How to show multiple datasets in line chart js - php

Question

I'm using line chart.js
I want to show my line chart have two line (actually it's will dynamic datasets)
base with location and label in bottom will base with month.
Now my chart it's show only last data set.
My data is look like this
{
location: "Apartment A",
color: "#b168ac",
set_data: [{
month: 1,
value: 3500
},{
month: 2,
value: 2700
},{
month: 3,
value: 1500
}]
},
{
location: "Apartment B",
color: "#b168aa",
set_data: [{
month: 1,
value: 1700
},{
month: 2,
value: 2800
},{
month: 3,
value: 3200
}]
}
I made my code something like this:
var obj = JSON.parse(data);
$.each(obj,function(i,item){
var locate = [];
var amt = [];
var color = [];
var item_set = [];
locate.push(item.location);
var m = [];
var val = [];
var item_s = item.set_data;
$.each(item_s,function(i2,item2){
val.push(item2.value);
m.push(item2.month);
var chartdata = {
labels: m,
datasets : [{
label:locate,
data: val,
backgroundColor: item.color,
borderWidth: 1,
fill: false,
}]
};
var ctx = document.getElementById("graph_by_usage").getContext('2d');
var LineChart = new Chart(ctx,{
type : 'line',
data : chartdata,
options: {
responsive:true
}
});
});
});
The data should be look like this https://codepen.io/k3no/pen/pbYGVa
Please advice me. Thank you.

Answer 1

Assuming that your data is a JSON array, you could generate labels and datasets as follows:
const labels = baseData[0].set_data.map(v => v.month);
const dataSets = [];
baseData.forEach(o => dataSets.push({
label: o.location,
data: o.set_data.map(v => v.value),
borderColor: o.color,
borderWidth: 1,
fill: false
})
);
Please have a look at the runnable code sample below.
const baseData = [{
location: "Apartment A",
color: "red",
set_data: [
{ month: 1, value: 3500 },
{ month: 2, value: 2700 },
{ month: 3, value: 1500 }
]
},
{
location: "Apartment B",
color: "blue",
set_data: [
{ month: 1, value: 1700 },
{ month: 2, value: 2800 },
{ month: 3, value: 3200 }
]
}
];
const labels = baseData[0].set_data.map(v => v.month);
const dataSets = [];
baseData.forEach(o => dataSets.push({
label: o.location,
data: o.set_data.map(v => v.value),
borderColor: o.color,
borderWidth: 1,
fill: false
})
);
new Chart('graph_by_usage', {
type : 'line',
data: {
labels: labels,
datasets: dataSets
},
options: {
responsive:true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="graph_by_usage" height="90"></canvas>