1

I have some Google Charts reading a CSV on an Apache Tomcat 5 server.

The load takes a long time (15 secs to display charts).

Does anyone know how I'd be able to speed this up?

Perhaps caching on tomcat 5.5?

Code below

function FwThroughputStacked(){
     $.get("../Data_Access/Overall_Fortinet_DLUL_Throughput_Report.csv", function(csvString) {
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
        var data = new google.visualization.arrayToDataTable(arrayData);
        var DLThroughputView = new google.visualization.DataView(data);
        DLThroughputView.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
        var ULThroughputView = new google.visualization.DataView(data);
        ULThroughputView.setColumns([0,11,12,13,14,15,16,17,18,19]);

      var ULThroughputStackedOps = {
        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(11).min, maxValue: data.getColumnRange(11).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
      };
      var ULThroughputOps = {
        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(11).min, maxValue: data.getColumnRange(11).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },         
      };
      var DLThroughputOps = {
        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 DLThroughputStackedOps = {
        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 chart = new google.visualization.LineChart(document.getElementById('DLThroughput'));
        chart.draw(DLThroughputView, DLThroughputOps);
    var chart = new google.visualization.AreaChart(document.getElementById('DLThroughputStacked'));
        chart.draw(DLThroughputView, DLThroughputStackedOps);
    var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
        chart.draw(ULThroughputView, ULThroughputStackedOps);
    var chart = new google.visualization.LineChart(document.getElementById('throughput'));
        chart.draw(ULThroughputView, ULThroughputOps);   
     });
  }
f_puras
  • 2,521
  • 4
  • 33
  • 38
  • do you know how long it takes to download the csv vs. running the function above? how many rows are in the csv? – WhiteHat Jul 20 '16 at 12:40
  • It's a big CSV, generated automatically by one of our systems every hour. The CSV download takes the majority of the time - so I am wondering if we can cache the Google Chart somehow - so it doesn't reload on every refresh, but rather, reloads every hour. –  Jul 20 '16 at 13:09
  • you could generate an image from the chart and display it instead using `chart.getImageURI()`, until it's time to refresh -- [here is an example](http://stackoverflow.com/a/38464203/5090771) – WhiteHat Jul 20 '16 at 13:23

1 Answers1

0

DyGraphs provided much faster charting with no need to mess around with caching. I can now load 20 charts on a single sheet & it loads faster than a single chart with Google Charts!