Home › Forums › Chart Support › Loading Data to Canvas

Loading Data to Canvas

Viewing 4 posts - 1 through 4 (of 4 total)
  • April 15, 2018 at 8:33 pm #20326

    thrasher7811

    Hello,
    I have a canvas that I tried to adapt to use with flask(python). I have the canvas loading and the data is there. I am not able to get the data to load to the chart. Below is the code. Any help will be very much appreciated.

    
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dataPoints1 = [];
var dataPoints2 = [];
var humidorT = {{ humidorT|safe }};
var humidorH = {{ humidorH|safe }};

var date = {{ date|safe }};
var length = {{ length|safe }};

var chart = new CanvasJS.Chart("chartContainer", {
	zoomEnabled: true,
	title: {
		text: "Share Value of Two Companies"
	},
	axisX: {
		title: "Time Stamp"
	},
	axisY:{
		prefix: "",
		includeZero: false
	}, 
	toolTip: {
		shared: true
	},
	legend: {
		cursor:"pointer",
		verticalAlign: "top",
		fontSize: 22,
		fontColor: "dimGrey",
		itemclick : toggleDataSeries
	},
	data: [{ 
		type: "line",
		xValueType: "dateTime",
		yValueFormatString: "####",
		//xValueFormatString: "MM-dd-YYYY hh:mm:ss TT",
		showInLegend: true,
		name: "Temerature",
		dataPoints: dataPoints1
		},
		{				
			type: "line",
			xValueType: "dateTime",
			yValueFormatString: "####",
			showInLegend: true,
			name: "Humidity" ,
			dataPoints: dataPoints2
	}]
});

function toggleDataSeries(e) {
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	chart.render();
}

function updateChart(length) {

	// pushing the new values
	var i;
	for(i = 0; i < length; i++){
		dataPoints1.push({
			x: date[i],
			y: humidorH[i]
		});
		dataPoints2.push({
			x: date[i],
			y: humidorT[i]
		});
		
	}

	}
	
	updateChart(length);
	
	chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
    April 16, 2018 at 10:06 am #20329

    Indranil

    @thrasher7811,

    Can you please provide your sample data so that we can look into the data and help you out.

    ___________
    Indranil Deo,
    Team CanvasJS

    April 16, 2018 at 4:16 pm #20340

    thrasher7811

    Here is the code with the input data. Thank you.

    

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dataPoints1 = [];
var dataPoints2 = [];
var humidorT = [69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 69.8, 68.0, 64.4, 66.2, 66.2, 68.0, 69.8, 71.6, 71.6, 73.4, 75.2, 75.2, 75.2, 75.2];

var humidorH = [40.0, 40.0, 41.0, 43.0, 43.0, 43.0, 43.0, 45.0, 47.0, 46.0, 48.0, 50.0, 49.0, 46.0, 47.0, 44.0, 43.0, 44.0, 44.0, 44.0, 43.0, 44.0, 41.0, 42.0, 41.0, 40.0, 39.0, 40.0, 39.0, 39.0, 38.0, 35.0, 36.0, 37.0, 38.0];

var date = ['2018-04-16 06:00:21', '2018-04-16 06:00:21', '2018-04-16 05:00:14', '2018-04-16 04:00:08', '2018-04-16 03:00:21', '2018-04-16 02:00:14', '2018-04-16 01:00:07', '2018-04-16 00:00:21', '2018-04-15 23:00:14', '2018-04-15 22:00:07', '2018-04-15 21:00:20', '2018-04-15 20:00:10', '2018-04-15 19:00:21', '2018-04-15 18:00:14', '2018-04-15 17:00:07', '2018-04-15 16:00:19', '2018-04-15 15:00:12', '2018-04-15 14:00:23', '2018-04-15 13:00:16', '2018-04-15 12:00:09', '2018-04-15 11:00:22', '2018-04-15 10:00:16', '2018-04-15 09:00:09', '2018-04-15 08:00:22', '2018-04-15 07:00:15', '2018-04-15 06:00:08', '2018-04-15 05:00:22', '2018-04-15 04:00:15', '2018-04-15 03:00:08', '2018-04-15 02:00:21', '2018-04-15 01:00:14', '2018-04-15 00:00:08', '2018-04-14 23:00:21', '2018-04-14 22:00:11', '2018-04-14 21:00:25'];

var length = 35;

var chart = new CanvasJS.Chart("chartContainer", {
	zoomEnabled: true,
	title: {
		text: "Share Value of Two Companies"
	},
	axisX: {
		title: "Time Stamp"
	},
	axisY:{
		prefix: "",
		includeZero: false
	}, 
	toolTip: {
		shared: true
	},
	legend: {
		cursor:"pointer",
		verticalAlign: "top",
		fontSize: 22,
		fontColor: "dimGrey",
		itemclick : toggleDataSeries
	},
	data: [{ 
		type: "line",
		xValueType: "dateTime",
		yValueFormatString: "####.00",
		//xValueFormatString: "MM-dd-YYYY hh:mm:ss TT",
		showInLegend: true,
		name: "Temerature",
		dataPoints: dataPoints1
		},
		{				
			type: "line",
			xValueType: "dateTime",
			yValueFormatString: "####.00",
			showInLegend: true,
			name: "Humidity" ,
			dataPoints: dataPoints2
	}]
});

function toggleDataSeries(e) {
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	chart.render();
}

function updateChart(length) {

	// pushing the new values
	var i;
	for(i = 0; i < length; i++){
		dataPoints1.push({
			x: date[i],
			y: humidorH[i]
		});
		dataPoints2.push({
			x: date[i],
			y: humidorT[i]
		});
		
	}

	}
	
	updateChart(length);
	
	chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
    April 17, 2018 at 10:38 am #20358

    Indranil

    @thrasher7811,

    X-values can either be number or valid date-time object. In your case, its not valid date-object. Changing x: date[i], to x: new Date(date[i]), and passing date-time in one of the valid formats should work fine in this case.

    Also, please take a look at this documentation page for information on rendering chart with date-time axis.

    Still, if you are facing any issue or have other requirements please create a jsfiddle reproducing the issue you are facing so that we can understand your requirement better and help you out.

    Chart with Date Time axis

    ___________
    Indranil Deo
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.