CODEWITHSUNDEEP
javascriptjquerychartsgoogle-visualization
user3245689
user3245689

Reputation: 157

Google chart does not appear even if no error

Here is my code to create google chart from csv data. ANd also no error. But even chart does not appear.

Here is the documentation for which works: http://economistry.com/2013/07/easy-data-visualization-with-google-charts-and-a-csv/

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

    function drawChart() {
       // grab the CSV
       $.get("Chart1-data.csv", function(csvString) {
          // transform the CSV string into a 2-dimensional array
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
        alert(arrayData);
          // this new DataTable object holds all the data
          var data = new google.visualization.arrayToDataTable(arrayData);

          // this view can select a subset of the data at a time
          var view = new google.visualization.DataView(data);
          view.setColumns([0,1]);

         // set chart options
         var options = {
        title: "A Chart from a CSV!",
        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.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
});
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Chart1-data.csv

Category,

A,34

B,23

C,14

D,57

E,18    

Other,5

Do I missing anything in the code?

Upvotes: 0

Views: 1225

Answers (2)

Pranay Agrawal
Pranay Agrawal

Reputation: 19

There doesn't seem any kind of problem with this Google chart code snippet.

Though in browser console there are some Uncaught JavaScript errors. Most importantly there is " Uncaught null "error which is in reference to blank space after "Category" so Category, ' ' should work fine

Upvotes: 2

Paul Facklam
Paul Facklam

Reputation: 1643

Good news: Your Code is fine! Your CSV file is the bottleneck.

  1. Column names can't be null, means Category, => Category,''
  2. No additional line breaks between data rows, means

A,34

B,23

=>

A,34
B,23

Result:

Category,''
A,34
B,23
C,14
D,57
E,18
Other,5

That is all! :)

Upvotes: 3

Related Questions