• Create HTML5 Charts using ASP.net and RGraph

    On an existing web project I wanted to draw some charts: bar charts, pie charts etc. I had a look at Highcharts which looks very good and has some very nice effects (like animation or putting several charts into one) but in an HTML5 book (HTML5 & CSS3 from O’Reilly) I read about RGraph. That’s a free open source javascript library under MIT license so you could use it in every project you want, personal or commercial. It’s using the new canvas tag, see RGraph Homepage for details.

    In Richards Support Forum I saw some requests regarding integration into ASP.net, and as there is no summary so far I’ll add it here. In fact it’s very easy to implement it into ASP.net WebForms.

    This tutorial shows how to integrate Richards ‘Getting Starting’ example into ASP.net with retrieving the chart data from the backend.

    So first follow all the steps described in Richards tutorial and run your ASP.net application, it should display the chart as expected.

     

    Now go to your backend end. You need to provide 2 public properties: ChartData (containing the numeric values) and ChartLabels (containing the chart labels, surprise surprise). Additionally you need 2 private variables containing the data itself (m_chartData and m_chartLabels).

    Now you could add your code. I’ve created a new sub ‘SetValues’ which sets the values…. Of course here you could do any operations you like, e.g. retrieve the data from a database or a webservice etc.. Make sure your sub ‘SetValues’ in called on Page_Load. And that’s already all for the Backend!
    Here is the complete .aspx.vb code :

    Of course you also have to make some changes to the .aspx page itself. Locate the script provided by Richard in his 4th step. The data and labels are hardcoded, but now you want to retrieve it from the backend. So tell the script to use the new public properties like this:

    And you’re done!! The chart should be displayed fine now. Of course this works fine with all other chart types like pie chart, meter charts, line charts etc.. Have fun! And don’t forget to donate to Richard for his excellent piece of code!

Leave a comment

If you want to share your opinion, leave a comment.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">