Hi,
here are couple of problems I'm having with fusioncharts timeseries:
1) When timeseries chart is having historic data it deletes them from the chart on the first live update (see images 1-3)
2) After first couple of live updates the graph is empty and then resumes normal drawing (see images 1-3)
3) "plotHighlightEffect": "fadeout" , doesnt work (there is no highlighting when mouseover legend, nor mouse over individual line).
4) Ancors are not displayed. Setting attribute "drawAnchors" to 1 doesnt make any difference.
5) Setting attributes useMessageLog: "1" and showRTMenuItem: "1", also doesnt work.
6) How to show all data points on the graph (without deletion of the oldest one on the left)? And define lets say to display 1000 points on current live view?
Graph source code:
<script>
const schema = [{
'name': 'Date',
'type': 'date',
'format': '%Y-%m-%d %H:%M:%S'
},{
'name': 'Current',
'type': 'number'
},{
'name': 'Temperature',
'type': 'number'
},{
'name': 'Mixer speed',
'type': 'number'
}];
const chartData = [
["2020-10-10 08:59:00","1","20", "40"],
["2020-10-10 09:00:00","2","23", "40"],
["2020-10-10 09:01:00","4","27", "40"],
["2020-10-10 09:02:00","8","31", "40"],
["2020-10-10 09:03:00","14","45", "40"],
["2020-10-10 09:04:00","14.25","65", "40"],
["2020-10-10 09:05:00","14.44","67", "40"],
["2020-10-10 09:06:00","16.50","75", "40"],
["2020-10-10 09:07:00","18.90","80", "40"],
["2020-10-10 09:08:00","17.80","81", "40"],
["2020-10-10 09:09:00","15.50","74", "40"],
["2020-10-10 09:10:00","14.75","65", "40"],
["2020-10-10 09:11:00","14.70","63", "40"]
];
const fusionDataStore = new FusionCharts.DataStore();
const data = fusionDataStore.createDataTable(chartData, schema);
const chartConfigs = {
type: 'timeseries',
width: '100%',
height: '100%',
dataFormat: 'json',
renderAt: 'chartContainer',
dataSource: {
data: data,
chart: {
theme: 'candy',
plotHighlightEffect: 'fadeout',
multicanvas: true,
useMessageLog: "1",
showRTMenuItem: "1",
exportenabled: 1,
exportFormats: 'PDF=Export as PDF|PNG=Export as PNG|SVG=Export as SVG',
exportfilename: 'smaticGraph_'+(new Date().toLocaleString())
},
caption: {
text: 'Cooking process overview',
position: 'left'
},
subcaption: {
text: '',
position: 'left'
},
yaxis: [{
plot: [{
value: 'Current',
connectnulldata: true,
type: 'line'
}],
orientation: 'left',
format: {
suffix: ' A'
}
},
{
plot: [{
value: 'Temperature',
connectnulldata: true,
type: 'line'
}],
orientation: 'left',
format: {
suffix: ' °C'
}
},
{
plot: [{
value: 'Mixer speed',
connectnulldata: true,
type: 'line'
}],
orientation: 'left',
format: {
suffix: ' rpm'
}
}
]
}
}
var chart = new FusionCharts(chartConfigs);
chart.addEventListener("rendered", function (_ref) {
var chart = _ref.sender;
chart.incrementor = setInterval(function () {
if(chart.feedData){
//chart.feedData([['2020-10-01 01:12:00', Math.floor(Math.random() * 101), Math.floor(Math.random() * 101), Math.floor(Math.random() * 101)]]);
chart.feedData([getGraphOverviewData()]);
}
}, 1000);
});
chart.addEventListener("disposed", function(eventObj){
var chartRef = eventObj;
clearInterval(chartRef.incrementor);
});
chart.render();
</script>
Data feeded to the graph with getGraphOverviewData() funstion is json, example: ["2020-10-10 10:45:13",2,55,43]
Thank you for your help.
