javascriptphpjquerychartsgchart

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]]

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);
}

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??

Solution

  • 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>