Business Analysis
Now Reading
Are Google Charts the answer?

Are Google Charts the answer?

by KieranJuly 23, 2016

In today’s data heavy environment, we’re always looking for new ways to visualise data, making it possible to make quicker, more accurate decisions. To date, I have been a big advocate of Google Charts – they’re interactive and they provide an excellent user experience.

However, my impression of Google Charts as the golden child of business intelligence has recently changed and I no longer think of Google Charts as the defaqto, go-to option when I’m looking to visualise something.

Let me show you why. Below, you will see my code to load two Google charts, pulling from a CSV data source. The code works exactly as it should and provides some awesome visualizations, so, smiley face. However, because the CSV is fairly large, it takes 12 seconds to render on the page – sad face.

Now, this is all due to the CSV size, right? You’re never going to speed it up! 2 charts will take 12 seconds, so suck it up!

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(FwThroughputStacked);
google.charts.setOnLoadCallback(DownloadThroughput);

function FwThroughputStacked(){
$.get(“../CRX1/Overall_DAB_Fortinet_Throughput_Report.csv”, function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);

var options = {
chartArea: {width: ‘80%’, height: ‘75%’},
explorer: {actions: [“dragToZoom”, “rightClickToReset”]},
isStacked: true,
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: “Megabits/s”, minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: ‘top’, maxLines: 10, textStyle: {fontSize: 9} },
};
var options2 = {
chartArea: {width: ‘80%’, height: ‘75%’},
explorer: {actions: [“dragToZoom”, “rightClickToReset”]},
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: “Megabits/s”, minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: ‘top’, maxLines: 10, textStyle: {fontSize: 9} },
};

var chart = new google.visualization.AreaChart(document.getElementById(‘throughputStacked’));

chart.draw(view, options);
var chart = new google.visualization.LineChart(document.getElementById(‘throughput’));
chart.draw(view, options2);
});
}

If that were true, it would be a huge blow for DIY business intelligence solutions. Waiting 12 seconds to render 2 charts is abysmal. So, I stumbled upon Dygraphs library. They offer very similar visualizations as Google Charts but are designed for much larger data sets. As such, I can now load a page of 15 charts in under 3 seconds! What an improvement!

So in answer to my own question, no Google Charts isn’t the answer – Dygraphs is!

Header Code:
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript" src="dygraph-dev.js"></script>

Body Code:
<!--Session Rate NAT FW-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-title">
Overall DAB Fortinet NAT FW Session Rate
</div>
<div><p>The average session setup rate over 10 minutes duration</p></div>
<td valign="top"><div id="graphdiv6" style="width:900px; height:300px;"></div></td>
<td valign="top">&nbsp; &nbsp;</td>
<td valign="top"><div id="labels4"></div></td>

<script type=”text/javascript”>
g2 = new Dygraph(
document.getElementById(“graphdiv6”),
“../Data_Access/Combined_DAB_FW_Session_Rate.csv”, // path to CSV file
{ylabel: ‘Session Rate’,
xlabel: ‘Date / Time’,
labelsDiv: document.getElementById(“labels4”),
legend: “always”} // options
);
</script>
</div>
</div>
</div>

What's your reaction?
Love It
0%
Interested
0%
Meh...
0%
What?
0%
Hate It
0%
Sad
0%
About The Author
Kieran

My name is Kieran, I love to see how technology can drive business growth. I started the Netshock technology blog as a place to share my thoughts and experiences with a wider audience. I cover all sorts of topics, from marketing to development.