具有独立数据的多个折线图 Javascript（Chart.js 或 google-vizualisation）

Question

js and I have two datasets:

data1 = [[0,1],[2,3],[5,7]] and data2 = [[1,4],[2,6],[5,2],[7,1]] for example. Each data list contains lists that represent points to plot on a same chart. (x and y values)

I want to plot exactely like this: https://www.chartjs.org/samples/latest/charts/line/multi-axis.html

But as you can see, my data lists don't have the same x or y values and they don't even have the same size, so I can't use the regular:

data: {labels = [1,2,3,4,5],
       data = [7,8,3,1,2],
       data = [9,1,2,3,4]}  //for example

How can I code this chart only with javascript (no jQuery please)? I didn't find anything on the Internet that might help. Any suggestions would matter to me !

Answer 1

You can use a scatter chart , that accepts the data as an array of objects containing x and y properties. To turn it into a line chart, define showLine: true inside the data configuration objects.

Given your data structures, the following line of code produces the data structure expected by Chart.js.

data1.map(o => ({ x: o[0], y: o[1] }))

Please have a look at below runnable code snippet.

 const data1 = [[0,1],[2,3],[5,7]]; const data2 = [[1,4],[2,6],[5,2],[7,1]]; new Chart('line-chart', { type: "scatter", responsive: true, data: { datasets: [ { data: data1.map(o => ({ x: o[0], y: o[1] })), label: 'Dataset 1', showLine: true, fill: false, borderColor: 'red' }, { data: data2.map(o => ({ x: o[0], y: o[1] })), label: 'Dataset 2', showLine: true, fill: false, borderColor: 'blue' } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="line-chart" height="80"></canvas>