can each series in a line chart have its own dataCollection?
each data collection has values on the x-axis and y-axis, so that it can render different lines on the same chart without showing 0 when there’s a point that only exists on the y-axis or x-axis for one line and not the other
Hello @Wraith ,
The chart can work only with one scale, so, unfortunately, it’s impossible to draw two different y-axes (such as in excel)
In such situation is better to create another chart
@Nastja thanks for your answer
I decided to go with something different, I am currently combining all the data that am receiving from my backend into one collection, and then using webix range chart to show that data, and I am setting the series and the legends dynamically according to a parameter. However I keep getting the following error: TypeError: Cannot read property ‘style’ of null
here’s my function to set the range chart:
refreshChart(startDate, endDate, devicesCollection) {
const deviceIds = [];
devicesCollection.serialize().forEach(device => {
deviceIds.push(device.deviceId);
});
return data.getChartData(startDate, endDate, deviceIds)
.then(chartData => {
const lineChart = $$('lineChart');
const rangeChart = $$('rangeChart');
const cnt_points = chartData.data.length;
lineChart.removeAllSeries();
rangeChart.removeAllSeries();
lineChart.define('legend', {
values: [],
align: 'center',
valign: 'bottom',
layout: 'x',
height: 40
});
for (let i = 0; i < chartData.numberOfDevices; i++) {
let color = '#'+Math.random().toString(16).substr(2,6);
lineChart.addSeries({
value: `#duration${i}#`,
item: {
borderColor: color,
color: 'white',
shadow: true,
borderWidth: 1,
radius: 2,
},
line: {
color: color,
width: 2
},
tooltip: {
template: function (obj) {
var dtype = 'temp';
var templ = obj[`duration${i}`] + ' (sec) <br>' + obj.dateTime;
return templ;
},
}
});
rangeChart.addSeries({
value: `#duration${i}#`,
line: {
color: color,
width: 2
}
});
legends.push({
text: `device-${i}`,
color: color,
markerType: 'item'
});
}
lineChart.define('legend', {
values: legends.reverse(),
align: 'center',
valign: 'bottom',
layout: 'x',
height: 40
});
var frameData = rangeChart.getFrameData();
if (frameData.length > 0) { rangeChart.setFrameRange({sindex: 0, eindex: 0});
}
lineChart.clearAll();
rangeChart.clearAll();
const rc_eindex = 60;
if (cnt_points > 0) {
rangeChart.parse(chartData.data);
if (cnt_points > rc_eindex) {
rangeChart.setFrameRange({sindex: cnt_points - rc_eindex, eindex: cnt_points - 1});
rangeChart.refresh();
} else {
rangeChart.setFrameRange({sindex: 0, eindex: cnt_points - 1});
rangeChart.refresh();
}
}
});
}
}
and the view component:
var layout = {
type: 'space',
rows: [
datepicker,
{
view: 'accordion',
multi: true,
rows: [
{
height: 440,
rows: [
{
view: 'chart',
height: 380,
id: 'lineChart',
type: 'line',
preset: 'simple',
offset: false,
xAxis: {
template: function (obj) {
var index = $$('lineChart').getIndexById(obj.id);
let templ = '';
let label = '';
var frameData = $$('rangeChart').getFrameData();
var modValue = 3;
if(frameData.length > 0) {
modValue = Math.floor(frameData.length / 8);
if (((frameData.length - 4) <= 8) || (modValue <= 2)) {
modValue = 3
}
}
if(index%modValue === 0) {
label = webix.Date.strToDate('%j %M %Y %H:%i:%s')(obj.dateTime);
templ = moment(label).format('ll') + '<br/>' + moment(label).format('LTS');
return templ;
}
},
lineColor: 'transparent',
offset: 1
},
yAxis: {
title: webix.i18n.duration,
},
},
{
view: 'rangechart',
height: 50,
id: 'rangeChart',
type: 'line',
padding: 0,
frameId: 'id',
item: {radius: 0},
on: {
onAfterRangeChange: function () {
$$('lineChart').clearAll();
var frameData = this.getFrameData();
$$('lineChart').parse(frameData);
var last_i = frameData.length - 1;
var range = this.getFrameRange();
$$('lineChart').refresh();
return true;
},
},
}
]
},
]
}]
};
on first load the chart is rendered as expected, although when ever it gets refereshed or the function gets called again, I get the error I mentioned at the beggining, the error happens in the following line
if (frameData.length > 0) {
rangeChart.setFrameRange({sindex: 0, eindex: 0});
}
why am i getting that error?
would be great if you could help, on how to get around that
Hello @Wraith ,
Please check the following example: https://snippet.webix.com/505ezmbx
After series are completely removed (either when clearAll is applied), there is no rendered data. With an empty chart, setFrameRange returns an error, as position of range markers is always based on data.
It will be better to reset the range
