Menu
So I need to display basic graphs for around 30,000 data points and I am currently using Google Charts with the following code in javascript with a little jinja thrown in there:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', "value1");
data.addColumn('number', "value2");
var mnemonic_count = 1;
{% for item in response %}
data.addRow([mnemonic_count, {{item["value1"] | safe}}, {{item["value2"] | safe}}]);
count = count+1;
{% endfor %}
console.log(count);
var options = {
chart: {
title: 'value over time',
subtitle: 'count . ' data points'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
<html>
<div id="linechart_material"></div>
</html>
This works just fine with small data sets and it never really fails but when I get up the number of data points I need, circa 30,000 it takes almost 30 seconds to load. Is there anything I can do on the backend to speed this up or does anyone know if a browser based chart that can render faster?
737
Unfortunately, some charting libs just aren't built to handle big data sets. If your own optimizations don't pan out, switching to another library might be the best solution.
Some more heavyweight options include Highcharts, ZingChart, and - if you're ready for a steep learning curve - d3.js.
I'm on the ZingChart team, and we built a render speed demo using some common libraries. It might help you get a feel for normal render times with different data sets. Bear in mind that interactive features and the number / type of chart elements (aside from data points) will affect speeds as well. Note that some combinations of library/render tests may kill the page or lock up your browser for a bit. We allowed this in order to demonstrate true behavior.
If you have any questions about the subject or ZingChart, feel free to reach out to us.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
