dotnetco.de

After RGraph has changed their license type and I also saw an article about Chartist JS in Smashing Magazine I checked what needs to be done to move. Chartist is hosted on Github so it’s open source and also free according to their current license.

I’ve already written a blog post how to Create HTML5 Charts using ASP.net and RGraph so I used this code and transferred it to Chartist JS. And well, it’s just 2 minutes work.

Of course you have to reference the library, so add the script and the css to your page:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

Then add the script for your chart and the div for the chart itself:

<script type="text/javascript">
    function setChart() {
        var data = {
            labels: <%=chartLabels %>,
            series: <%=chartData%>
        };
        new Chartist.Line('.ct-chart', data);
    };
    window.onload = setChart;
</script>
<div class="ct-chart ct-perfect-fourth">
</div>

In the backend compute the values you want to show. Probably you would like to read them from SQL DB or else, but I just code them for easier understanding in this example. Take care: chartDate needs 2 square brackets!

Public Class WebForm3
    Inherits System.Web.UI.Page
 
    Private m_chartData As String
    Public Property chartData() As String
        Get
            Return m_chartData
        End Get
        Set(value As String)
            m_chartData = value
        End Set
    End Property
 
    Private m_chartLabels As String
    Public Property chartLabels() As String
        Get
            Return m_chartLabels
        End Get
        Set(value As String)
            m_chartLabels = value
        End Set
    End Property
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            SetValues()
        End If
    End Sub
 
    Private Sub SetValues()
        chartData = "[]280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89[]"
        chartLabels = "['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
    End Sub
 
End Class

And that’s all.

Of course you could do much more with Chartist, like Animations, tooltips etc., but current post should only give you a first overview how to start with asp.net and Chartist JS. Now have a look at their examples and create your own charts.