Google Charts - read specific columns - google-visualization

Question

I have a big CSV file with 20 columns.
In a single statement, I would like to be able to make chart one take values from column 1 to 10 and chart two to take the values from columns 11 to 20.
This way, I am only reading the CSV once, which should speed up load times.
Currently, I have the below code, which reads the same columns for both charts.
Can anyone advise me how to do this?
Thanks
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);
});
}

Answer 1

sounds like you need separate views for each chart, similar to options
in the following snippet,
view is created for chart
-- and --
view2 is created for chart2
google.charts.load('current', {
callback: function () {
$.get("output.txt", 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 view2 = new google.visualization.DataView(data);
view2.setColumns([11,12,13,14,15,16,17,18,19]);
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 chart2 = new google.visualization.LineChart(document.getElementById('throughput'));
chart2.draw(view2, options2);
});
},
packages: ['corechart']
});