i am new in canvas.js and i am trying to plot graph dynamically but it is not working and give me error that chart.render() is not a function in console window. can anybody tell me my mistake? thanks in advance.
already tried this solution but i couldn't understand it. neither it resolves my error. canvasjs render is not a function
<!DOCTYPE html>
<html>
<head>
<title>hello love</title>
</head>
<body><br />
<script>
function showchart() {
var dataPoints = [];
var dataPointsExpense = [];
//calling function for y2 axis
function addDataExpense(result) {
for (var i = 0; i < result.length; i++) {
dataPointsExpense.push({
x: new Date(result[i].day + result[i].month + result[i].year),
y: result[i].ExpenseofMonth
});
}
chart.render();
}
//calling finctions for income
function addData(result) {
console.log(result);
for (var i = 0; i < result.length; i++) {
dataPoints.push({
x: new Date(result[i].day + result[i].month + result[i].year),
y: result[i].IncomeofMonth
}
);
}
chart.render();
addDataExpense(result)
}
//canvas coding
var chart = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Income Vs Expense of the Month"
},
subtitles: [{
text: "This will Show You Expense plus Income of the Month"
}],
axisX: {
title: "States"
},
axisY: {
title: "Income of the Month",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
titleFontSize: 24,
includeZero: false
},
axisY2: {
title: "Expense of the Month",
titleFontColor: "#C0504E",
lineColor: "#C0504E",
labelFontColor: "#C0504E",
tickColor: "#C0504E",
titleFontSize: 24,
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data:
[{
type: "spline",
name: "Income of the Month",
showInLegend: true,
xValueFormatString: "MMM YYYY",
yValueFormatString: "Rs ####",
dataPoints: dataPoints
},
{
type: "spline",
name: "Expense of the Month",
axisYType: "secondary",
showInLegend: true,
xValueFormatString: "MMM YYYY",
yValueFormatString: "Rs ###",
dataPoints: dataPointsExpense
}
]
};
$("#chartContainer").CanvasJSChart(chart);
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
$.getJSON("/Home/reportup", addData)
}
</script>
<br /><br />
<button style="margin-left:300px; margin-top:10px" type="button" id="btn" onclick="showchart()">Show my chart</button>
<div id="chartContainer" style ="height: 300px; width: 100%;margin: 50px auto;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="/jquery.canvasjs.min.js"></script>
<script src="/canvasjs.min.js"></script>
<script src="/canvasjs.react.js"></script>
</body>
</html>
