HTML5 Bar chart using RGraph

Recently I implemented MVC WebApi that provides information on various activities in stock exchange. Few days ago I added a trading dashboard to this site. The first addition to this was Dividend Paying Stocks widget that shows list of securities that provide maximum yield. Some financial gurus asked me if we could add some statistics to dashboard, that will be helpful. The next one that we have added a widget Sectors listed on stock exchange that provides information on what are different sectors to which all companies belong on stock exchange.

In this widget we decided to added a HTML5 based bar chart that uses some ajax implementation to render these statistics. Following screenshot shows how this HTML5 bar chart looks like.

bar chart

Using RGraph for HTML5 charts

Instead of implementing our own bar chart implementation, we decided to go with RGraph. It does a very decent job of providing implementation of a wide variety of chart types. In this post I will show how to draw a simple bar chart using RGraph. Here are steps that you will follow.

Link to RGraph JavaScript files

Download latest build of RGrpah package from their site. After you unzip that package in a folder, you will find all the required JavaScript files in Libraries folder. Copy the files in your web site folder. There is no fixed name for the folder where you need to copy these files. Just follow your best practices. There are about 39 JavaScript files in that folder. You do not need to add reference to all of them for a particular chart type. You just need files that required for a certain chart type. For example following snippet shows the file that you will need for bar chart.

<script src="/Scripts/rgraph/rgraph.common.core.js" type="text/javascript"></script>
<script src="/Scripts/rgraph/rgraph.common.dynamic.js" type="text/javascript"></script>
<script src="/Scripts/rgraph/rgraph.bar.js" type="text/javascript"></script>
    

Add Canvas element on your page

RGraph implementation uses new canvas element from HTML5 stack to render the charts. So we need to add a canvas element to our page. And make sure you assign a unique ID to this element because you are going to need to when drawing chart. Following code snippet shows how i added this in my ASP.Net user control.

<div id="companySectorChartsWidget">
    <canvas id="sectorChartCanvas" width="550" height="300"></canvas>
</div>
<script type="text/javascript">
 $(document).ready(function () {
  loadCompanySectors('companySectorChartsWidget', 'chart');
 });
</script>
    

As you can see from the code above, I am loading this chart after page loads. One very important part of this step is that you have to provide height and width of canvas element using the attributes of HTML element itself and not through style attribute or css file. I tried it and it had some very undesirable effects. So make sure that you follow this step as mentioned.

Load data for chart using Ajax

Next thing you need is data that you want to load for rendering your chart. In my implementation I send an ajax request to one of our web services that returns list of data. the elements in this list contain two properties, Name and NumberOfSecurities.

Draw chart object using RGraph

Now you have all elements that you need to render the chart. Following code snippet shows what I have done to draw a bar chart.

function renderChart(chartData) {
  var displayData = getChartDisplayData(chartData);
  var bar = new RGraph.Bar('sectorChartCanvas', displayData.numbers);
  var left = 35;
  bar.Set('chart.background.grid', false);
  bar.Set('chart.gutter.left', left);
  bar.Set('chart.gutter.bottom', 40);
  bar.Set('chart.colors', ['#2782c6']);
  bar.Set('chart.bevel', true);
  bar.Set('chart.shadow', true);
  bar.Set('chart.shadow.color', '#ccc');
  bar.Set('chart.title', 'Company Sectors');
  bar.Set('chart.labels', displayData.labels);
  bar.Set('chart.text.size', 8);
  bar.Draw();
 }

function getChartDisplayData(chartData) {
  var numbers = new Array();
  var labels = new Array();
  for (var i = 0; i < chartData.length; i++) {
    numbers.push(chartData[i].NumberOfSecurities);
    var name = chartData[i].Name;
    if (i % 2 != 0) {
     name = "\r\n" + name;
    }
    labels.push(name);
  }
  return {
    'numbers': numbers,
    'labels': labels
 };
}
    

Preparing data arrays

As you can see from the code above that I have implemented getChartDisplayData function. The data that I get from server is an array of elements with two properties. For rendering of charts using RGraph, you need to provide separate arrays of numbers and labels. So I ended up splitting my array into two arrays.

Displaying X-Axis labels on multiple lines

There is one additional step I had to do for labels array. Labels on X-Axis were too large to fit all on one line. There is no direct support in RGraph to tell it to split the axis labels on multiple lines. RGraph support suggested that we append line break before the name. This added one more step to process. By splitting labels on 2 lines, you will need to increase height of bottom section where labels are displayed. Otherwise the second line of labels will disappear. You will set chart.gutter.bottom property to appropriate value so you can display multiple lines of labels. Default value of this property is 25. I ended up using value of 40 which did the trick for me.

bar.Set('chart.gutter.bottom', 40);
    

Demo

To see this all in action you can go to following page that shows our little financial statistic widget of company sectors on stock exchange.

Financial Dashboard - Sectors Listing

More

As we progress through our project and use more features of RGraph, we will post more information on use of this cool library. I will highly recommend using RGraph forums for any technical questions. They seem to be very active in responding to questions.

Search

Social

Weather

9.5 °C / 49.1 °F

weather conditions Clear

Monthly Posts

Blog Tags