How do I switch between two input files/arrays with Google Charts?

Question

I'm including multiple plots with Google Charts. I'd like to display one chart at a time but allow the user to switch between multiple csv input files. A change in input data would also require a change in chart and axis titles. I'm new to Javascript and I'm not sure how best to do this.

Here's how I'm currently plotting one csv. Any tips on how to toggle the change in input file would be appreciated. I'm currently using the jquery-csv module to read in my csv file into an array.

Script created in header.

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    // Reading in a locally stored CSV file to an array of numbers
    $.get("2017T.csv", function(csvString) {
    var dataarray = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});  

    // Turning array into format usable by Google Charts
    var data = google.visualization.arrayToDataTable(dataarray);

    // Formatting Google Charts
    var options = {
      title: 'Raspberry PI Temperature plot - Yearly',
      titleTextStyle: {
        fontSize: '18',
        },
      vAxis: { 
        title: 'Temperature (\u00B0 C)' ,
        titleTextStyle: {
            italic: 'FALSE',
            fontSize: '14',
        },
        baseline: '0',
        baselineColor: 'black',
        gridlines: { color: 'transparent'},
        },
      hAxis: {
        title: 'Date',
        titleTextStyle: {
            italic: 'FALSE',
            fontSize: '14',
        },
        baseline: '0',
        baselineColor: 'black',
        gridlines: { color: 'transparent'},
        },
      curveType: 'function',
      backgroundColor: {
        stroke: 'black',
        strokeWidth: '5',
        },
      haxis: {
        title: 'Hello',
        },
      legend: {position: 'none'},
    };

    //Creating Charts
    var chart = new google.visualization.LineChart(document.getElementById('temp_year'));

    chart.draw(data, options);
    });
  }

Chart called in body.

<div id="temp_year" style="width: 800px; height: 400px"></div>

Answer 1

You can accomplish this by making your drawChart function generic and then passing in the chart specific data each time you draw. This allows you redraw with new data and even makes it so it'll handle dynamic data too.

For example, based on your code you might do something like:

var chartData = {};
var dataarray;

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(function () {
    drawChart(chartData);
});

// Reading in a locally stored CSV file to an array of numbers
$.get("2017T.csv", function (csvString) {
    dataarray = $.csv.toArrays(csvString, { onParseValue: $.csv.hooks.castToScalar });
});

// Turning array into format usable by Google Charts
var data = google.visualization.arrayToDataTable(dataarray);

chartData = {
    title: 'Raspberry PI Temperature plot - Yearly',
    data: data
}

function drawChart(chartData) {

    // Formatting Google Charts
    var options = {
        title: chartData.title,
        titleTextStyle: {
            fontSize: '18',
        },
        vAxis: {
            title: 'Temperature (\u00B0 C)',
            titleTextStyle: {
                italic: 'FALSE',
                fontSize: '14',
            },
            baseline: '0',
            baselineColor: 'black',
            gridlines: { color: 'transparent' },
        },
        hAxis: {
            title: 'Date',
            titleTextStyle: {
                italic: 'FALSE',
                fontSize: '14',
            },
            baseline: '0',
            baselineColor: 'black',
            gridlines: { color: 'transparent' },
        },
        curveType: 'function',
        backgroundColor: {
            stroke: 'black',
            strokeWidth: '5',
        },
        haxis: {
            title: 'Hello',
        },
        legend: { position: 'none' },
    };

    //Creating Charts
    var chart = new google.visualization.LineChart(document.getElementById('temp_year'));

    chart.draw(chartData.data, options);
}

So what I've done is created a chartData object that you can define any chart specific variables in. I've only done the title and data, but obviously you can do as many of the chart options as you want. Then, when you want to redraw the chart, you overwrite the chartData object with the new chart's data and call drawChart again with the new data.