recursionCount error in canvasjs on setting width of container element - javascript

I'm fairly new to using canvasjs plugin for charts. There was a requirement wherein I had to resize the chartcontainer to a particular width. On changing the width from 100% to 300px I got the following error on IE as well as on chrome: recursionCount is undefined . The following is the code snippet of the same that i'm using:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Common Names"
},
exportFileName: "Pie Chart",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 732, legendText: "James", exploded: true, label: "James" },
{ y: 4, legendText: "West", label: "West" },
{ y: 3, legendText: "John", label: "John" },
{ y: 247, legendText: "Peter", label: "Peter"},
{ y: 2716, legendText: "Mark", label: "MArk" },
{ y: 2, legendText: "Luke", label: "Luke"}
]
}
]
});
chart.render();
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: "Top Categoires of New Year's Resolution"
},
exportFileName: "Bar Graph",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "bar",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 35, legendText: "Health", exploded: true, label: "Health" },
{ y: 20, legendText: "Finance", label: "Finance" },
{ y: 18, legendText: "Career", label: "Career" },
{ y: 15, legendText: "Education", label: "Education"},
{ y: 5, legendText: "Family", label: "Family" },
{ y: 7, legendText: "Real Estate", label: "Real Estate"}
]
}
]
});
chart1.render();
var chart2 = new CanvasJS.Chart("chartContainer2",
{
theme: "theme2",
title:{
text: "Earthquakes - per month"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]}]
});
chart2.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 300px;"></div>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
</body>
</html>
I don't understand how changing the width of element id: chartContainer from 100% to 300px can cause such an error...
Thanks in advance.


I managed to solve that error by creating a variable with the same name in the html page inside the script tag.
I've added the following line just before every initialization of CanvasJS.Chart element:
recursionCount = 0;
eg:
window.onload = function () {
recursionCount = 0;
//code for chartContianer
recursionCount = 0;
//code for chartContianer 1
recursionCount = 0;
//code for chartContianer 2
};
Regards,
Darrel Viegas.

Related

Make a CanvasJS Chart using JSON data

I need to make this coding in a way where I can show JSON data in graph. but I don't know how to convert this coding in a way so that this graph will show JSON data. I am posting coding in here for your convenience.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "dark2",
title:{
text: "MOVEMENT CATEGORY"
},
subtitles:[
{
text: "(STANDSTILL, ON FOOT or ON VEHICLE)",
},],
axisX:{
title: "TIME SLOT"
},
axisY:{
title:"Number of users(%)",
suffix: "%"
},
toolTip:
{
shared: true
},
data: [{
type: "stackedArea100",
name: "STANDSTILL",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 83, label: "6am - 10am" },
{ y: 51, label: "10am - 4pm" },
{ y: 64, label: "4pm - 8pm" },
{ y: 71, label: "8pm - 12am" },
{ y: 45, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON FOOT",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 20 , label: "6am - 10am" },
{ y: 30, label: "10am - 4pm" },
{ y: 24, label: "4pm - 8pm" },
{ y: 38, label: "8pm - 12am" },
{ y: 51, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON VEHICLE",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 11, label: "6am - 10am" },
{ y: 61, label: "10am - 4pm" },
{ y: 50, label: "4pm - 8pm" },
{ y: 23, label: "8pm - 12am" },
{ y: 31, label: "12am - 6am" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

How to show only first and last labels in CanvasJS

I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?

You can use axisY labelFormatter to do so.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisY: {
tickColor: "transparent",
labelFormatter: function(e){
if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
return e.value;
return "";
}
},
data: [{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

You can also try hiding all axis-labels and add stripLines at the minimum and maximum.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisX: {
valueFormatString: "####"
},
axisY:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
axisY2:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
data: [
{
type: "column",
showInLegend: true,
name: "Axis Y-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Axis Y2-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 12 },
{ x: 2007, y: 20 },
{ x: 2008, y: 28 },
{ x: 2009, y: 34 },
{ x: 2010, y: 24 },
{ x: 2011, y: 45 },
{ x: 2012, y: 15 },
{ x: 2013, y: 34 },
{ x: 2014, y: 22 }
]
}
]
});
chart.render();
addStripLine(chart);
function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
min = chart.axisY[i].get("minimum");
max = chart.axisY[i].get("maximum");
chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
min = chart.axisY2[i].get("minimum");
max = chart.axisY2[i].get("maximum");
chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

Changing the x-label in HTML Canvas charts

Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?

You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };

How to fix bubble size (marker size) in canvasjs?

I want chart to look like this:
So far I'm very close to my expected output but not exactly what I want. Here is my current codebase:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "SEStimate Planning Graph"
},
axisX: {
title: "Age in Months",
interval:1
},
axisY: {
title: "SEstimate Score",
interval:5,
gridThickness: 0
},
creditText: "Hardiks Line Chart",
data: [
{
type: "line",
color:"blue",
markerSize:0,
toolTipContent: "",
lineThickness:2,
dataPoints: [
{ x: 36, y: 35 },
{ x: 45, y: 35}
]
},
{
type: "line",
color:"blue",
toolTipContent: "",
markerSize:0,
lineThickness:2,
dataPoints: [
{ x: 42, y: 0 },
{ x: 42, y: 43}
]
},
{
type: "line",
color:"cyan",
toolTipContent: "",
lineThickness:2,
indexLabelPlacement: "inside",
dataPoints: [
{ x: 43, y: 35},
{ x: 48, y: 37,markerSize:20, indexLabel:"5"},
{x:55,y:42,markerSize:20, indexLabel:"5"}
]
},
{
type: "line",
color:"purple",
toolTipContent: "",
lineThickness:2,
markerSize:27,
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43,indexLabel:"10"},
{x:55,y:54, indexLabel:"10"},
{x:61,y:60, indexLabel:"10"},
{x:67,y:70, indexLabel:"10"},
]
},
{
type: "line",
color:"red",
toolTipContent: "",
lineThickness:2,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 41, y: 25 },
{ x: 47, y: 25},
{ x: 61, y: 58},
{ x: 72, y: 58}
]
},
{
type: "line",
color:"green",
toolTipContent: "",
lineThickness:2,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 40, y: 30, abc:"hardy1" },
{ x: 61, y: 76, abc:"hardy2"},
{ x: 72, y: 76, abc:"hardy3" }
]
},
{
type: "bubble",
toolTipContent: "",
indexLabelPlacement: "inside",
dataPoints: [
{ x: 39, y: 20,z:2.0, number: "II",indexLabel: "II",markerColor: "yellow", radius: "90%" },
{ x: 39, y: 30,z:2.0, number: "HH", indexLabel:"HH",markerColor: "yellow", radius: "90%" },
{ x: 42, y: 35,z:2.0, number: "JJ", indexLabel:"JJ",markerColor: "yellow", radius: "90%"},
{ x: 45, y: 45, z:2.0, number: "GG", indexLabel:"GG",markerColor: "yellow", radius: "90%"},
{ x: 48, y: 50, z:2.0, markerSize:10,number: "EE", indexLabel:"EE",markerColor: "yellow", radius: "90%"},
{ x: 48, y: 35, z:2.0, markerSize:10, number: "FF", indexLabel:"FF",markerColor: "yellow", radius: "90%"},
{ x: 51, y: 43, z:2.0, number: "DD", indexLabel:"DD",markerColor: "yellow", radius: "90%"},
{ x: 52, y: 81, z:2.0, number: "CC", indexLabel:"CC",markerColor: "yellow", radius: "90%"},
{ x: 54, y: 35, z:2.0, number: "BB", indexLabel:"BB",markerColor: "yellow", radius: "90%"},
{ x: 54, y: 70, z:2.0, number: "AA", indexLabel:"AA",markerColor: "yellow", radius: "90%"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 450px; width: 100%;">
</div>
</body>
</html>
Output of my code looks like this:
How can I fix all the bubbles size in bubble chart of CanvasJS? Is there any property for setting and fix all the bubbles in same size?
So far I tried markerSize Property and also set all bubbles data's z field value to same but all the bubbles are looking very large. I want to show the bubbles in small size.

Hardik,
You can try scatter chart instead of bubble to achieve this.
Check this jsfiddle for solution for your requirement.
var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "SEStimate Planning Graph",
fontSize: 40,
fontColor: "#000",
horizontalAlign: "left"
},
axisX: {
title: "Age in Months",
interval: 1,
minimum: 35.5,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
},
axisY: {
title: "SEstimate Score",
interval:5,
gridThickness: 0,
labelFontSize: 14,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
maximum: 100,
},
data: [
{
type: "line",
color:"#4A83BA",
markerSize:0,
toolTipContent: "",
lineThickness:2,
dataPoints: [
{ x: 35, y: 35 },
{ x: 36, y: 35 },
{ x: 45, y: 35}
]
},
{
type: "line",
color:"#4A83BA",
toolTipContent: "",
markerSize:0,
lineThickness:2,
dataPoints: [
{ x: 42, y: 0 },
{ x: 42, y: 43 }
]
},
{
type: "line",
color:"#00B2EC",
lineThickness:2,
markerSize:30,
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37 },
{ x: 55, y:42 }
]
},
{
type: "scatter",
color:"#00B2EC",
indexLabelPlacement: "inside",
indexLabelFontSize: 16,
indexLabelFontColor: "#fff",
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37, indexLabel:"5" },
{ x: 55, y:42, indexLabel:"5" }
]
},
{
type: "line",
color:"purple",
toolTipContent: "",
lineThickness:2,
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43 },
{ x: 55, y: 54 },
{ x: 61, y: 60 },
{ x: 67, y: 70 },
]
},
{
type: "scatter",
color:"purple",
toolTipContent: "",
indexLabelPlacement: "inside",
indexLabelFontSize: 16,
indexLabelFontColor: "#fff",
markerSize:30,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43, indexLabel:"10" },
{ x:55, y:54, indexLabel:"10" },
{ x:61, y:60, indexLabel:"10" },
{ x:67, y:70, indexLabel:"10" },
]
},
{
type: "line",
color:"red",
toolTipContent: "",
lineThickness:3,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 41, y: 25 },
{ x: 47, y: 25 },
{ x: 61, y: 58 },
{ x: 72, y: 58 }
]
},
{
type: "line",
color:"#00F84C",
toolTipContent: "",
lineThickness: 3,
markerSize:0,
lineDashType: "dash",
dataPoints: [
{ x: 40, y: 30, abc:"hardy1" },
{ x: 61, y: 76, abc:"hardy2" },
{ x: 72, y: 76, abc:"hardy3" }
]
},
{
type: "scatter",
toolTipContent: "",
indexLabelPlacement: "inside",
indexLabelFontSize: 14,
indexLabelFontColor:"#1BBDCA",
markerSize: 30,
markerBorderThickness: 1,
markerColor:"#FFFC47",
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 39, y: 20, number: "II", indexLabel: "II" },
{ x: 39, y: 30, number: "HH", indexLabel: "HH" },
{ x: 42, y: 35, number: "JJ", indexLabel: "JJ" },
{ x: 45, y: 45, number: "GG", indexLabel: "GG" },
{ x: 48, y: 50, number: "EE", indexLabel: "EE" },
{ x: 48, y: 35, number: "FF", indexLabel: "FF" },
{ x: 51, y: 43, number: "DD", indexLabel: "DD" },
{ x: 52, y: 81, number: "CC", indexLabel: "CC" },
{ x: 54, y: 35, number: "BB", indexLabel: "BB" },
{ x: 54, y: 70, number: "AA", indexLabel: "AA" }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>

How to save annotation customer input text data

I use annotation.js in order to add customer input text data. My source code is given below... But I cannot create save text data when the customer presses the Done button. How do I change this source code to solve my problem?
$(function () {
var options = {
chart: {
width: 980,
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
renderTo: 'container',
backgroundColor: '#f7f7f7',
marginTop: 50
},
xAxis: {
min: 0,
max: 10
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Drag and drop on a chart to add annotation <span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
annotations: [{
title: {
text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
style: {
color: 'red'
}
},
anchorX: "left",
anchorY: "top",
allowDragX: true,
allowDragY: true,
x: 515,
y: 155
}, {
title: 'drag me <br> horizontaly',
anchorX: "left",
anchorY: "top",
allowDragY: false,
allowDragX: true,
xValue: 4,
yValue: 10,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 110, 0],
stroke: '#c55'
}
}
}, {
title: 'on point <br> drag&drop <br> disabled',
linkedTo: 'high',
allowDragY: false,
allowDragX: false,
anchorX: "center",
anchorY: "center",
shape: {
type: 'circle',
params: {
r: 40,
stroke: '#c55'
}
}
}, {
x: 100,
y: 200,
title: 'drag me <br> verticaly',
anchorX: "left",
anchorY: "top",
allowDragY: true,
allowDragX: false,
shape: {
type: 'rect',
params: {
x: 0,
y: 0,
width: 55,
height: 40
}
}
}],
series: [{
data: [13, 4, 5, {
y: 1,
id: 'high'
},
2, 1, 3, 2, 11, 6, 5, 13, 6, 9, 11, 2, 3, 7, 9, 11]
}]
};
var chart = new Highcharts.StockChart(options);
});

Categories

Resources