Sunday, May 19, 2013

Google Charts Tips

I incorporated a few Google Charts into a recent project.  I wrote some code to automatically write the chart javascript using data extracted from an SQL database.  I found the Google Charts API well documented and fairly easy to use.  However, I did encounter a few issues that I think merit addressing.

Here's an example of a highly customized graph that makes use of some of the more involved chart options.



This graph contains a secondary vertical axis, an option not demonstrated in the Google examples.  Also used are date, number, and tool-tip formatting.  Notice the formatted numbers on the mouseover tooltips for the first set of data points (May 1st) compared to the default formatting on the other points.  The code below will generate the graph as seen above.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div id="history_div" style="width: 730px; height: 400px; margin: 0;"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Cost Total($)');
        data.addColumn('number', 'Sell Total($)');
        data.addColumn('number', '# of Products');
        data.addRows([
            [new Date(2013,4,1), {v: 90000.00, f: '$90,000.00'}, {v: 140000.00, f: '$140,000.00'}, {v: 8000.00, f: '8,000'}],
            [new Date(2013,5,1), 100000, 160000, 10000],
            [new Date(2013,6,1), 130000, 200000, 14000],
            [new Date(2013,7,1), 95000, 150000, 9000],
            [new Date(2013,8,1), 95000, 150000, 9000]
        ]);
        var options = {
            pointSize: 2,
            width: 730,
            height: 400,
            vAxis: {
                baseline: 0,
                gridlines: {count: 8}},
            vAxes: [
                {title: 'Value ($)', format: '$###,###,###', textStyle: {color: '#088A08'}},
                {title: '# of Products', format: '#', textStyle: {color: '#0000FF'}}],
            hAxis: {
                title: "Date", 
                format: 'M/d', 
                gridlines: {count: 8}},
            series: {
                0: {type: "line", targetAxisIndex: 0, color: '#21610B'},
                1: {type: "line", targetAxisIndex: 0, color: '#5FB404'},
                2: {type: "line", targetAxisIndex: 1, color: '0000FF'}}, 
            chartArea:{
                width: "75%", 
                height: "75%"}    
        }
        var chart = new google.visualization.ComboChart(document.getElementById('history_div'));
        chart.draw(data, options);
    }
</script>

Secondary Vertical Axis:  Created using the vAxes option.  We can then tell the # of Products data series to use the secondary axis using the targetAxisIndex in the series configuration as shown in line 37.

Formatted Data Values:  Declared using the {v: VALUE, f: 'FORMATTED VALUE'} notation.  An example of formatting tooltip numbers is shown in line 14.

Dates:  Created using Date(Y,M,D) remember that javascript months count from 0-11.

Component Overlapping Bug:  
The image below shows another problem you may encounter while implementing Google Charts.  The overlapping of the chart entities is the result of the chart not being visible at the time of its loading.  In my case it was in a div that was hidden at the time of page load.  Ensure that the chart is visible at the time of its loading (at least for a few milliseconds) in order to fix this problem.


I had some problems trying to get the graph to size itself correctly in browsers other than Chrome.  I haven't been able to reliably reproduce the problem  (so it may have just been a typo on my part), but it seems that as long as you declare a size both in both your div styling and the chart options the chart will render correctly.

No comments:

Post a Comment