let count = [], time = [], event_type=[], chartData, noData = false, chartOptions
data.series.map((s) => {
const t = s.fields.find((f) => f.name === 'timestamp')
const c = s.fields.find((f) => f.name === 'count')
const et = s.fields.find((f) => f.name === 'event_type')
time = t ? t.values.buffer : [];
count = c ? c.values.buffer : [];
event_type = et ? et.values.buffer : [];
noData = time && time.length > 0 ? false : true
console.log("event_type", event_type);
console.log("count",count);
console.log("time", time);
})
//console.log("Data", eventType)
data['echartsInstance'] = echartsInstance
console.log("echartsInstance",echartsInstance)
if(noData) {
chartOptions = {
title: {
text: 'No Data to show',
textStyle: {
fontSize: 14,
fontWeight:'normal',
fontFamily:'Roboto,Helvetica Neue,Arial,sans-serif'
},
left: 'center',
top: '50%'
}
}
} else {
chartOptions = {
tooltip: {
trigger: 'axis'
/*formatter: (function(value){
//console.log("value check", value)
const label = `Date - ${new Date(value[0].name).toLocaleString()} <br> Events - ${value[0].value} <br> Series Name - ${value[0].seriesName}`
//const label = `Date - ${value[0].name}`
return label
})*/
},
legend : {
data:data
},
grid: {
top: 10,
left: '10%',
right: '10%',
bottom: 40
},
xAxis:
{
type: 'category',
boundaryGap: false,
data: time,
axisLabel: {
formatter: (function(value){
return new Date(value).toLocaleString()
})
},
max: function (value) {
return value.max - 20;
},
},
yAxis:
{
type: ‘value’,
axisLabel:{show:true},
splitLine: {
lineStyle: {
color: [’#f3f3f3’]
}
},
name: ‘Number of Events’,
nameLocation: ‘middle’,
nameGap: 20,
boundaryGap:[‘20%’, ‘20%’],
minInterval:1
}
,
series: [
{
name: 'Events Count',
type: 'line',
stack: 'Total',
smooth: true,
areaStyle: {},
emphasis: {
focus: 'series',
scale:true
},
data: count,
color: ['#0085E6']
},
{
name: 'Events Type',
type: 'line',
stack: 'Total',
smooth: true,
areaStyle: {},
emphasis: {
focus: 'series',
scale:true
},
data: event_type,
color: ['#008677']
},
]
};
}
return chartOptions