Google Line chart from CSV

Question

I am quite new to java-script and html stuff.. I am trying to make a basic line chart with Google chart using example.csv file but something is wrong. I dont see any chart. Nothing is being displayed. Please help. I came up with code after reading some similar codes

All i need is to start with this basic working code and develop into more advanced shape

<html>

<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.csv-0.71.js"></script>
    <script type="text/javascript">

        //google.load('visualization', '1', {packages: ['corechart', 'line']});
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(BasicLine);

        function BasicLine() {
             // grab the CSV
            $.get("example.csv", function(csvString) {
            // transform the CSV string into a 2-dimensional array
                var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
                var data = new google.visualization.arrayToDataTable(arrayData);



            ]);

            var options = {
                hAxis: {
                    title: 'Time'
                },
                vAxis: {
                    title: 'Temperature'
                },
                backgroundColor: '#f1f8e9'
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
</body>

</html>

My CSV File is as below

Hour, Temperature
1, 70
2, 65
3, 60
4, 65
5, 67
6, 69

What do you mean by "something is wrong"? – duffn Aug 16 '15 at 00:13 — duffn, Aug 16 '15 at 00:13
The chart is not displayed.. There is nothing shown – user2774120 Aug 16 '15 at 00:14 — user2774120, Aug 16 '15 at 00:14

score 2 · Answer 1 · answered Aug 16 '15 at 00:48

There is an syntax-error(the console should have told you about this).

Fixed version:

<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(BasicLine);

    function BasicLine() {
        $.get("example.csv", function(csvString) {
            var arrayData = $.csv.toArrays(csvString, 
                                          {onParseValue: $.csv.hooks.castToScalar}),
                data      = new google.visualization.arrayToDataTable(arrayData),
                options   = {
                              hAxis: {
                                title: 'Time'
                              },
                              vAxis: {
                                title: 'Temperature'
                              },
                              backgroundColor: '#f1f8e9'
                            },
                chart     = new google.visualization
                              .LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        },
        'text');
    }
</script>

Google Line chart from CSV

1 Answers1