Create HTML5 Charts using Chartist JS and asp.net
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:
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.