CODEWITHSUNDEEP
javascriptcharts
RED SOFT ADAIR
RED SOFT ADAIR

Reputation: 12218

js chart non uniform x values

Is there a JS Charting lib that supports multiple curces, having unequal steps? Consider data like that:

Curve 1 (x/y pairs) RED in Sample:
[1, 10] [10, 20] [20,20]
Curve 2 Green in Sample:
[1, 2] [5, 6] [10,10] [11,12] [15,15] [20,20]

This should result in 2 Curves with x RANGE from 1..20. The first only has 3 data points that should be connected by a line. The second has 6 Points in the same x value range.

Which JS Charting library can handle that?enter image description here

Upvotes: 0

Views: 133

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

most likely, any chart lib can handle, just need to load the data in the format the chart accepts

here, google charts is used to draw the chart

google charts has a method to join tables

so, just create two data tables, one for each x range

the resulting joined table will fill in the missing values with null

as such, need option for interpolateNulls so there are no breaks in the lines

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var x0 = [
    [1, 10], [10, 20], [20,20]
  ];
  var x1 = [
    [1, 2], [5, 6], [10,10], [11,12], [15,15], [20,20]
  ];

  var data0 = google.visualization.arrayToDataTable(x0, true);
  var data1 = google.visualization.arrayToDataTable(x1, true);

  var joinData = google.visualization.data.join(
    data0, data1, 'full', [[0, 0]], [1], [1]
  );

  var options = {
    height: 400,
    interpolateNulls: true,
    legend: {
      position: 'none'
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    },
    hAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(joinData, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions