Chart.js Line-Chart with different labels for each dataset

Question

Using Chart.js , you can create line charts, and for this you must use labels and datasets. eg:

var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40], } ] }; 

The problem is that you have the number of label corrections (in this case 7), and you also need to provide 7 data records for each data set. Now, if you have an unknown number of labels and data records?

What to do if one data item contains a number and time:

 Entry { number: 127 time: 10:00 } 

What if you want to show all the time on the x-axis and all numbers on the y-axis, sorted by time on the x-axis. Is this possible with Chart.js?

Answer 1

I also had a battle with this today. You need to get more specific information with your data set. In a line chart, “data sets” is an array with each element in the array representing a row in your graph. Chart.js is actually really flexible when you work it. You can bind a row (dataset element) to the x axis and / or y axis, each of which you can specify in detail.

In your case, if we stick to one line on the chart, and you want the part of the time that makes up the time element to be at the bottom (x axis), then all your times could fall into the labels array and your “number” will point to the axis y. To simplify this without specifying our own scales with the x and y axes and considering this data:

 var MyData = [{time:"10:00", number: "127"}, {time:"11:00", number: "140"}, {time:"12:00", number: "135"}, {time:"13:00", number: "122"}]; 

You can set the data property in your chart as follows:

 var data = { labels: ["10:00", "11:00", "12:00", "13:00"], datasets: [ { label: "My First dataset", // Insert styling, colors etc here data: [{x: "10:00", y: 127}, {x: "11:00", y: 140}, {x: "12:00", y: 135}, {x: "13:00", y: 122}] } ]}; 

Note that the data array is now slightly more specific for each data element plotted on the x axis by referring to one of the labels, and not just to the raw number. Now you can put another dataset object in the dataset array after this template and have two lines, obviously give your lines different colors and names ("label").

Hope this helps.

Answer 2

Since there are a number of questions in your post, I will try to help at least some of them. For your input model with number and time, you must create a scattered graph. Here you define data objects with x and y values, as shown in my example below. This requires that each entry x matches y. Look at the scatter chart. http://www.chartjs.org/docs/#line-chart-scatter-line-charts

 var d = new Date(); var scatterChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Scatter Dataset', data: [{ x: new Date().setDate(d.getDate()-5), y: 0 }, { x: new Date(), y: 10 }, { x: new Date().setDate(d.getDate()5), y: 5 }] }] }, options: { scales: { xAxes: [{ type: "time", time: { format: "HH:mm", unit: 'hour', unitStepSize: 2, displayFormats: { 'minute': 'HH:mm', 'hour': 'HH:mm' }, tooltipFormat: 'HH:mm' }, gridLines: { display: false } }], } } });