fc1

Weird chart behaviors

Recommended Posts

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.

start.png

afterFirstRefresh.png

afterFewSeconds.png

Edited by fc1

Share this post


Link to post
Share on other sites

Hi,

 

1. and 2. The updating data to the chart is working fine, with the previous rendered data and adding the new ones to the right of the canvas. Check this showcased sample for reference : https://www.fusioncharts.com/fusiontime/examples/add-data-in-real-time

Please refer to the code reference in the above link to implement accordingly in your implementation.

3. 4. and 5. These are not supported attributes of FT charts. Please check the supported list of configuration attributes of FT charts :
https://www.fusioncharts.com/dev/fusiontime/fusiontime-attributes

6. The dynamically updating chart using feedData() API method keeps adding from the right of the canvas and the data plots moves out from the other end. This is the intended feature, and cannot be disabled to stop the plots to move out since when number of data values constantly being fed into a chart, it can slow down browser performance, or even cause a browser crash. To avoid this, use the optional chart level attribute timeSpread, to specify the total time interval you want to display in the chart at a given instant.

Documentation for reference : https://www.fusioncharts.com/dev/fusiontime/getting-started/real-time-data-in-fusiontime

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now