google Chart not working as expected

This is an output of my json data.

[["Period","SOC","Control Signal","Charge/discharge"],
 ["00:00:00",60,0.01,0.01],
 ["00:01:00",58,0.01,0.01],
 ["00:02:00",56,0.01,0.01],
 ["00:03:00",55,0,0],
 ["00:04:00",54,0,0],
 ["00:05:00",53,-0.01,-0.01],
 ["00:30:00",53,-0.01,-0.01]]

JavaScript
​x
 
[["Period","SOC","Control Signal","Charge/discharge"], ["00:00:00",60,0.01,0.01], ["00:01:00",58,0.01,0.01], ["00:02:00",56,0.01,0.01], ["00:03:00",55,0,0], ["00:04:00",54,0,0], ["00:05:00",53,-0.01,-0.01], ["00:30:00",53,-0.01,-0.01]] ​

I’m passing this data…

var table="holds my json data";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var obj = jQuery.parseJSON(table);
var data = google.visualization.arrayToDataTable(obj)
var options = {
    title: 'Charge Discharge Management',
    curveType: 'function',
    series: {0: {targetAxisIndex:0},
    1:{targetAxisIndex:1}, 
},
'hAxis':{textPosition: 'none'}
};

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

JavaScript
 
var table="holds my json data";google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);function drawChart() {var obj = jQuery.parseJSON(table);var data = google.visualization.arrayToDataTable(obj)var options = {    title: 'Charge Discharge Management',    curveType: 'function',    series: {0: {targetAxisIndex:0},    1:{targetAxisIndex:1}, },'hAxis':{textPosition: 'none'}};​var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}​

enter image description here

As we can see in the image time difference between each time on h-axis is “1 minutes” but at the last it is “5”-“30” ….how to make it linear??

Answer

I have used the “timeofday” datatype to show what you want. I have tried and was able to do in this way.

http://jsfiddle.net/rajeshwerkushwaha/128sdznL/

If link is not working please use this code:

<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
   
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
     
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      function drawChart() {
      
      var data = [["00:00:00",60,0.01,0.01],
                  ["00:01:00",58,0.01,0.01],
                  ["00:02:00",56,0.01,0.01],
                  ["00:03:00",55,0,0],
                  ["00:04:00",54,0,0],
                  ["00:05:00",53,-0.01,-0.01],
                  ["00:30:00",53,-0.01,-0.01]];
          
      for(var i=0; i<data.length; i++){
          
          var temp1 = data[i][0].split(':');
          
          for(var j=0; j<temp1.length; j++){
              var temp2 = parseInt(temp1[j].replace(/^0/, ''),10);
              temp1[j] = temp2;
          }
          temp1.push(0);
          data[i][0] = temp1;
      }

      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('timeofday', 'Period');    
      dataTable.addColumn('number', 'SOC');
      dataTable.addColumn('number', 'Control Signal');
      dataTable.addColumn('number', 'Charge/discharge');
          
      dataTable.addRows(data);
      

      var dataView = new google.visualization.DataView(dataTable);

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      var options = {
                        title: 'Charge Discharge Management',
                        curveType: 'function',
                        series: {0: {targetAxisIndex:0},
                                 1: {targetAxisIndex:1}, 
                                }
                    };
      chart.draw(dataView, options);
    }
    </script>
  </head>

  <body>

    <div id="chart_div" style="height:300"></div>
  </body>
</html>

JavaScript
 
<html>  <head>    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>    <script type="text/javascript" src="https://www.google.com/jsapi"></script>    <script type="text/javascript">         // Load the Visualization API and the piechart package.      google.load('visualization', '1.0', {'packages':['corechart']});           // Set a callback to run when the Google Visualization API is loaded.      google.setOnLoadCallback(drawChart);​      function drawChart() {            var data = [["00:00:00",60,0.01,0.01],                  ["00:01:00",58,0.01,0.01],                  ["00:02:00",56,0.01,0.01],                  ["00:03:00",55,0,0],                  ["00:04:00",54,0,0],                  ["00:05:00",53,-0.01,-0.01],                  ["00:30:00",53,-0.01,-0.01]];                for(var i=0; i<data.length; i++){                    var temp1 = data[i][0].split(':');                    for(var j=0; j<temp1.length; j++){              var temp2 = parseInt(temp1[j].replace(/^0/, ''),10);              temp1[j] = temp2;          }          temp1.push(0);          data[i][0] = temp1;      }​      var dataTable = new google.visualization.DataTable();      dataTable.addColumn('timeofday', 'Period');          dataTable.addColumn('number', 'SOC');      dataTable.addColumn('number', 'Control Signal');      dataTable.addColumn('number', 'Charge/discharge');                dataTable.addRows(data);      ​      var dataView = new google.visualization.DataView(dataTable);​      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));      var options = {                        title: 'Charge Discharge Management',                        curveType: 'function',                        series: {0: {targetAxisIndex:0},                                 1: {targetAxisIndex:1},                                 }                    };      chart.draw(dataView, options);    }    </script>  </head>​  <body>​    <div id="chart_div" style="height:300"></div>  </body></html>​

Advertisement

Answer