Echarts - Dynamic multi line chart based on Json data - json

Question

I am trying to plot time line chart with multiple lines (number of lines is dynamic based on Json data). I am getting Json data as mentioned. I would like to have each line plotted for each product. How should I convert data so that echarts supports?
[
{date: "2019-05-21 00:00:00 UTC", value: 100, product: 'p1'},
{date: "2019-05-21 00:00:00 UTC", value: 50, product: 'p2'},
{date: "2019-05-19 00:00:00 UTC", value: 200, product: 'p3'},
{date: "2019-05-18 00:00:00 UTC", value: 70, product: 'p1'},
{date: "2019-05-18 00:00:00 UTC", value: 125, product: 'p2'},
{date: "2019-05-18 00:00:00 UTC", value: 55, product: 'p3'}
]

Answer 1

You should be storing your axis data separately from your values, in a simple multi-line chart: see the following two examples:
https://echarts.baidu.com/echarts2/doc/example/line1.html#-en
https://echarts.baidu.com/echarts2/doc/example/line8.html#-en
The second example provides the "time" x-axis type, which we can use with the first, which provides a good multi-line framework.
Your option may look something like this:
option = {
title : {
text: 'Multi-line Time Axis example',
subtext: 'made for Dileep'
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'time',
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} $'
}
}
],
series : [
{
name: 'series1', // Product p1, for instance
type: 'line',
data: (function () {
var d = [];
var len = 0;
var now = new Date();
var value;
while (len++ < 10) {
d.push([
new Date(2014, 9, 1, 0, len * 10000), // some Date() object
(Math.random()*30).toFixed(2) - 0// // some random value
]);
}
return d;
})()
},
{
name: 'series2', // product p2
type: 'line',
data: (function () {
var d = [];
var len = 0;
var now = new Date();
var value;
while (len++ < 10) {
d.push([
new Date(2014, 9, 1, 0, len * 10000),
(Math.random()*30).toFixed(2) - 0,
]);
}
return d;
})()
}
]
};