CODEWITHSUNDEEP
google-visualization
codepals
codepals

Reputation: 73

Google charts - plotting points on linechart

I am using linechart in google api chart.I am having reference values of 'WEIGHT against AGE' graph like [1,42.2,null], [2,43.8,null], [3,44.1,null],[3.5,null,44.3], [4,45.1,null], [5,46.1,null] and now I want to plot point values [1.75,null,43.7] and [3.5,null,44.3]. but it is giving output in a breaking line if I added it (refer actual graph).I want output with the linear line(without breaking) + the plotted points(refer expected graph). please help...

 <script type="text/javascript"   src="https://www.gstatic.com/charts/loader.js"></script>
 <div id="chart_div"></div>
  <script>
  google.charts.load('current', {packages: ['corechart', 'line']});
  google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Time');
  data.addColumn('number', 'Ref Wt');
data.addColumn('number', 'Actual Wt');

  data.addRows([
        [1,42.2,null], //reference value
        [1.75,null,43.7], //value to plot
        [2,43.8,null], //reference value
        [3,44.1,null], //reference value
        [3.5,null,44.3], //value to plot
        [4,45.1,null], //reference value
        [5,46.1,null] //reference value
       ]);

  var options = {
    width: 600,
    height: 500,
    hAxis: {
      title: 'Weight',
      titleTextStyle:{
        color: 'blue'
      },
    },
    vAxis: {
      title: 'Time',
       titleTextStyle:{
        color: 'blue'
      },
    },  
  };

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

</script>

Upvotes: 1

Views: 64

Answers (2)

WhiteHat
WhiteHat

Reputation: 61275

add the following configuration option...

interpolateNulls: true

Upvotes: 1

corn3lius
corn3lius

Reputation: 5005

Well one way to fix it is to inject values in the null parameters which is what is breaking the line chart.

When including data with null values for Ref Wt interpolate the point with its neighbors.

function getPointOnLine(pt1, pt2, x){
  // assumes ptx = [ x , y ];
  var m = (pt1[1] - pt2[1]) / (pt1[0] - pt2[0]); 
  var b = pt1[1] - ( m * pt1[0]);
  var y = m * x + b; 
  return y;
}

and from your data just massage it a little bit: (untested example) 

data.forEach(function(datum,i ,a){
   if( datum[1] === null && i !== 0 && i !== a.length ) {
      datum[1] = getPointOnLine(a[i-1],a[i+1], datum[0]);
   }
});

https://jsfiddle.net/corn3lius/1g8k8762/

Upvotes: 0

Related Questions