how to use data dynamically with google charts

StackOverflow https://stackoverflow.com/questions/23656838

Question

I'm trying to use data to draw a chart with google charts. I have several different CSV-files, and I'm trying to use a different file when a different option is selected. The first file is loaded correctly and showes a chart, but the $("#selection").change(...) doesn't work.. My code:

<html>
<head>
    <title>Google charts</title>
    <script src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
    <script type='text/javascript'>
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(function() {
            $(document).ready(function run(){

            $("#selection").val("file1.csv");
            var filename = "file1.csv";
            drawChartfromCSV(); 
            $("#selection").change(function() {
                filename = ("#selection").val();
                drawChartfromCSV();
            });
            function drawChartfromCSV() {
                $.get(filename, function(csvString) {
                    $("#chart").html(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]);
                    var options = {
                        title: "title haxis",
                        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
                        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
                        legend: 'none'
                    };
                    var chart = new google.visualization.LineChart(document.getElementById('csv2chart'));
                    chart.draw(view, options);
                });
            }
            });
        });
    </script>
</head>
<body>
    Select a file
    <select id="selection">
        <option value="file1.csv">file1</option>
        <option value="file2.csv">file2</option>
        <option value="file3.csv">file3</option>
    </select>
    <div id="csv2chart" style="width: 900px; height: 500px;"> </div>
</body>

Was it helpful?

Solution

There is an error in the code

$("#selection").change(function() {
//the $ was missing before ("#selection").val()
    filename = $("#selection").val();
    drawChartfromCSV();
});

OTHER TIPS

You first need to clear the chart and you missed the $ in front of ("#selection").val(); ! This should fix your problem:

$("#selection").change(function() {
   chart.clearChart()
   filename = $("#selection").val();
   drawChartfromCSV();
});

I think you must first check if the chart already exists if not than dont clear the chart

As others pointed out, you had a syntax error in the $("#selection").change(function() {...}); code, but you should also remove the $(document).ready(function run(){...}); you have wrapping your code. The callback from the google loader may run after document "ready" fires, so your internal functions may never run. If waiting for document ready is important in your code, you can either follow general best practices for javascript and stick the chart code at the bottom of your page, or you can do something like this:

function run() {
    // chart code here
}
var state = {
    ready: false,
    loaded: false
};
google.load("visualization", "1", {packages: ["corechart"], callback: function () {
    state.loaded = true;
    if (state.ready) {
        run();
    }
}});
$(document).ready(function () {
    state.ready= true;
    if (state.loaded) {
        run();
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top