0

I am trying to create gauge chart from csv data. Following function works well but it consider one char as string input. I believe this part decide how many words to be read from 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},

It reads this short of data only:

Category,' '
E,24
m,34
m,0
y,10
y,6
r,6

My actual data that I want to read is:

Engine,24
min,34
max,0
yellowFrom,10
yellowTo,6
redFrom,6
redTo,0

Can someone please tell me where I need improvement?

function drawChart() {
       $.get("Chart2-data.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 view = new google.visualization.DataView(data);
          view.setColumns([0,1]);
         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.Gauge(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }

Entire code:

<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:["gauge"]});
      google.setOnLoadCallback(drawChart);

    function drawChart() {
       // grab the CSV
       $.get("Chart2-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.Gauge(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }
    </script>
  </head>
  <body>
    <div id="gauge" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Improve this question
5
  • I faced this kind of problem while processing csv data. I think this is due to encoding problems. You must use the same encoding in the CSV and HTML/PHP Commented Feb 2, 2014 at 18:16
  • @PatarticsMilán: thanks, can you please elaborate, which encoding you talking here? Commented Feb 2, 2014 at 18:17
  • The file encoding, HTML encoding and the IO stream encoding. This is maybe related to your problem, except it is python. Commented Feb 2, 2014 at 19:08
  • @PatarticsMilán: thanks again. But updating enocoding to UTF-8 in both html csv does not make any change .. Commented Feb 2, 2014 at 19:21
  • 1
    Maybe you could use this Commented Feb 2, 2014 at 19:32

1 Answer 1

Reset to default
1

Things where =ok, Just remove this part:

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'

And add levels in csv data

label,value
Engine,24
min,34
max,0
yellowFrom,10
yellowTo,6
redFrom,6

It will work nice

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.