Charts not appearing after the v.02 update

This topic has 9 replies, 5 voices, and was last updated 7 years ago by Sanjoy.

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

October 11, 2017 at 3:49 pm #17280

carlo

Good Day,

My team and I have been using CanvasJS for our locally hosted mock-site since July this year.We’re considering purchasing the team license package but would like to resolve an issue before we continue.

Just recently (around 2 weeks ago) Our charts stopped displaying in our front end. We haven’t changed anything in the code/script of the charts. the section where it used to display still shows the chart’s container with its “enable-export button” on the top right and a small “canvasjs.com” link on the bottom right.

I’m unsure, but it might have something to do with the update to V2.0 around September 29 as I noticed my charts stopped displaying after said date. Our charts appear when copy pasted on any sample charts on the CanvasJS site though.

Hoping to resolve this issue soon, Thanks in advance!
-Carlo

(bellow is the script of one of our charts)


<html>
<head>  

<script type="text/javascript">
window.onload = function () {

var chart1 = new CanvasJS.Chart("chartContainer1",
{
theme: "theme4",
animationEnabled: true,
title:{fontFamily: "arial",
fontColor: "white", 
text: "Food",
fontSize: 20
},	

backgroundColor: "#23262f", 

axisY:[{
interlacedColor: "#2c303a",
labelFontSize: 13,
labelFontColor: "white",
maximum: null,
interval: 2,
lineColor: "white", 
tickColor: "white"
},
],

axisX:{
labelFontSize: 13,
labelFontColor: "white",
interval: 1,},

			
data: [ 
{
type: "column",	
name: "Pizza",
legendText: "Pizza",
toolTipContent: "{name}: {y}",	
showInLegend: true, 
dataPoints:[
{label: "AUS", y: 3.1},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.0},
{label: "IND", y: 9.1},
{label: "IDN", y: 8.0},
{label: "JPN", y: 2.2},
{label: "MYS", y: 5.1},
{label: "MMR", y: null},
{label: "PHL", y: 6.0},
{label: "SGP", y: 4.2},
{label: "KOR", y: 4.8},
{label: "LKA", y: null},
{label: "TWN", y: 3.7},
{label: "THA", y: 5.2},
{label: "VNM", y: 7.8}
]
},
{
type: "column",	
name: "Burrito",
legendText: "Burrito",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: null},
{label: "CHN", y: null},
{label: "HKG", y: null},
{label: "IND", y: 10.0},
{label: "IDN", y: 7.5},
{label: "JPN", y: 2.0},
{label: "MYS", y: 5.2},
{label: "MMR", y: null},
{label: "PHL", y: 6.2},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.3},
{label: "LKA", y: null},
{label: "TWN", y: 3.5},
{label: "THA", y: 5.5},
{label: "VNM", y: 9.7}
]
},
{
type: "column",	
name: "Taco",
legendText: "Taco",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: null},
{label: "CHN", y: 6.8},
{label: "HKG", y: null},
{label: "IND", y: 7.0},
{label: "IDN", y: 3.5},
{label: "JPN", y: 1.8},
{label: "MYS", y: 3.0},
{label: "MMR", y: null},
{label: "PHL", y: 6.2},
{label: "SGP", y: 3.1},
{label: "KOR", y: null},
{label: "LKA", y: null},
{label: "TWN", y: 4.0},
{label: "THA", y: 4.0},
{label: "VNM", y: null}
]
},
{
type: "column",	
name: "Burger",
legendText: "Burger",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: 7.0},
{label: "CHN", y: 6.8},
{label: "HKG", y: 4.0},
{label: "IND", y: 10.5},
{label: "IDN", y: 9.0},
{label: "JPN", y: 2.1},
{label: "MYS", y: 5.5},
{label: "MMR", y: 9.0},
{label: "PHL", y: 6.0},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.5},
{label: "LKA", y: 8.6},
{label: "TWN", y: 3.5},
{label: "THA", y: 5.6},
{label: "VNM", y: 10.0}
]
},
{
type: "column",	
name: "Fries",
legendText: "Fries",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.5},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.1},
{label: "IND", y: 9.0},
{label: "IDN", y: 9.9},
{label: "JPN", y: 2.2},
{label: "MYS", y: 4.8},
{label: "MMR", y: null},
{label: "PHL", y: 5.9},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.0},
{label: "LKA", y: null},
{label: "TWN", y: 3.5},
{label: "THA", y: 5.0},
{label: "VNM", y: 9.0}
]
},
{
type: "column",	
name: "Icecream",
legendText: "Icecream",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 2.8},
{label: "KHM", y: null},
{label: "CHN", y: 4.5},
{label: "HKG", y: 3.5},
{label: "IND", y: 6.5},
{label: "IDN", y: 6.0},
{label: "JPN", y: 1.7},
{label: "MYS", y: 4.5},
{label: "MMR", y: null},
{label: "PHL", y: 6.0},
{label: "SGP", y: 3.0},
{label: "KOR", y: null},
{label: "LKA", y: null},
{label: "TWN", y: 3.0},
{label: "THA", y: 3.7},
{label: "VNM", y: 5.0}
]
},
{
type: "column",	
name: "Chips",
legendText: "Chips",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.3},
{label: "KHM", y: null},
{label: "CHN", y: 7.2},
{label: "HKG", y: 4.3},
{label: "IND", y: 10.4},
{label: "IDN", y: 8.8},
{label: "JPN", y: 2.0},
{label: "MYS", y: 5.5},
{label: "MMR", y: null},
{label: "PHL", y: 6.4},
{label: "SGP", y: 4.4},
{label: "KOR", y: 5.0},
{label: "LKA", y: null},
{label: "TWN", y: 4.0},
{label: "THA", y: 5.7},
{label: "VNM", y: 9.7}
]
},
{
type: "column",	
name: "Beer",
legendText: "Beer",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: null},
{label: "CHN", y: 6.5},
{label: "HKG", y: 3.8},
{label: "IND", y: 10.0},
{label: "IDN", y: 7.1},
{label: "JPN", y: 2.0},
{label: "MYS", y: 4.8},
{label: "MMR", y: null},
{label: "PHL", y: 6.3},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.0},
{label: "LKA", y: null},
{label: "TWN", y: 3.5},
{label: "THA", y: 5.1},
{label: "VNM", y: 8.5}
]
},
{
type: "column",	
name: "Chicken",
legendText: "Chicken",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: null},
{label: "CHN", y: 5.6},
{label: "HKG", y: 3.7},
{label: "IND", y: 9.9},
{label: "IDN", y: 8.5},
{label: "JPN", y: 2.3},
{label: "MYS", y: 4.0},
{label: "MMR", y: null},
{label: "PHL", y: 4.6},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.7},
{label: "LKA", y: null},
{label: "TWN", y: 3.9},
{label: "THA", y: 5.0},
{label: "VNM", y: null}
]
},
{
type: "column",	
name: "Spaghetti",
legendText: "Spaghetti",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.1},
{label: "KHM", y: null},
{label: "CHN", y: 6.0},
{label: "HKG", y: 3.0},
{label: "IND", y: 7.3},
{label: "IDN", y: 7.9},
{label: "JPN", y: 2.2},
{label: "MYS", y: 3.0},
{label: "MMR", y: null},
{label: "PHL", y: 5.3},
{label: "SGP", y: 3.3},
{label: "KOR", y: 4.3},
{label: "LKA", y: null},
{label: "TWN", y: 3.0},
{label: "THA", y: 4.0},
{label: "VNM", y: 8.5}
]
},
{
type: "column",	
name: "Banana",
legendText: "Banana",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.0},
{label: "KHM", y: 6.0},
{label: "CHN", y: 7.1},
{label: "HKG", y: 4.0},
{label: "IND", y: 10.0},
{label: "IDN", y: 8.0},
{label: "JPN", y: 2.3},
{label: "MYS", y: 5.4},
{label: "MMR", y: 8.0},
{label: "PHL", y: 5.9},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.5},
{label: "LKA", y: 8.0},
{label: "TWN", y: 4.0},
{label: "THA", y: 5.0},
{label: "VNM", y: 9.1}
]
},
{
type: "column",	
name: "Pansit",
legendText: "Pansit",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 2.7},
{label: "KHM", y: null},
{label: "CHN", y: 8.0},
{label: "HKG", y: 4.1},
{label: "IND", y: 10.3},
{label: "IDN", y: 9.0},
{label: "JPN", y: 2.3},
{label: "MYS", y: 5.4},
{label: "MMR", y: null},
{label: "PHL", y: 6.5},
{label: "SGP", y: 3.8},
{label: "KOR", y: 4.7},
{label: "LKA", y: null},
{label: "TWN", y: 3.8},
{label: "THA", y: 5.3},
{label: "VNM", y: null}
]
},
{
type: "column",	
name: "Salad",
legendText: "Salad",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.1},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.0},
{label: "IND", y: 9.1},
{label: "IDN", y: 8.0},
{label: "JPN", y: 2.2},
{label: "MYS", y: 5.1},
{label: "MMR", y: null},
{label: "PHL", y: 6.0},
{label: "SGP", y: 4.2},
{label: "KOR", y: 4.8},
{label: "LKA", y: null},
{label: "TWN", y: 3.7},
{label: "THA", y: 5.2},
{label: "VNM", y: 7.8}
]
},
{
type: "column",	
name: "Fish",
legendText: "Fish",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.5},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.1},
{label: "IND", y: 9.0},
{label: "IDN", y: 9.9},
{label: "JPN", y: 2.2},
{label: "MYS", y: 4.8},
{label: "MMR", y: null},
{label: "PHL", y: 5.9},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.0},
{label: "LKA", y: null},
{label: "TWN", y: 3.5},
{label: "THA", y: 5.0},
{label: "VNM", y: 9.0}
]
},
{
type: "column",	
name: "Lasagna",
legendText: "Lasagna",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.3},
{label: "KHM", y: 5.9},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.0},
{label: "IND", y: 9.5},
{label: "IDN", y: 8.7},
{label: "JPN", y: 2.4},
{label: "MYS", y: 5.0},
{label: "MMR", y: null},
{label: "PHL", y: 6.5},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.4},
{label: "LKA", y: null},
{label: "TWN", y: 3.0},
{label: "THA", y: 5.7},
{label: "VNM", y: 7.7}
]
},
{
type: "column",	
name: "BBQ",
legendText: "BBQ",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 3.2},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.3},
{label: "IND", y: 9.5},
{label: "IDN", y: 10.0},
{label: "JPN", y: 2.4},
{label: "MYS", y: 5.2},
{label: "MMR", y: null},
{label: "PHL", y: 6.5},
{label: "SGP", y: 4.0},
{label: "KOR", y: 4.8},
{label: "LKA", y: null},
{label: "TWN", y: 3.0},
{label: "THA", y: 5.9},
{label: "VNM", y: 10.0}
]
},
{
type: "column",	
name: "Hotdog",
legendText: "Hotdog",
toolTipContent: "{name}: {y}",
showInLegend: true,
dataPoints:[
{label: "AUS", y: 2.2},
{label: "KHM", y: null},
{label: "CHN", y: 7.0},
{label: "HKG", y: 4.1},
{label: "IND", y: 7.8},
{label: "IDN", y: null},
{label: "JPN", y: 3.0},
{label: "MYS", y: 5.0},
{label: "MMR", y: null},
{label: "PHL", y: 6.4},
{label: "SGP", y: 3.0},
{label: "KOR", y: null},
{label: "LKA", y: null},
{label: "TWN", y: 3.0},
{label: "THA", y: 4.0},
{label: "VNM", y: 8.5}
]
} 
],
         
legend:{
fontColor: "white" ,
fontSize: 12 ,
fontFamily: "arial",
cursor:"pointer",
itemclick: function(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}

chart1.render();
}
},
});

chart1.render();
}
</script>
<script type="text/javascript" 

src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer1" style="height: 300px; width: 100%;">
</div>
</body>
</html>

October 12, 2017 at 10:38 am #17286

Indranil

carlo,

The code you have provided seems to be working fine across all browsers.
Screenshot

Kindly share the following details like browser, browser version, OS and the server on which the site is hosted locally so that we can reproduce the issue at our end and help you better.

__________
Indranil Deo,
Team CanvasJS

October 12, 2017 at 12:52 pm #17289

carlo

Hi,

OS: win7 64-bit

Internet explorer : version 11.0.9600.18792
Google Chrome: version 61.0.3163.100

Locally hosted via Joomla CMS Version3.8 Gantry 5
WampServer (wamp64) Version 3.0.6 -64bit
-Apache version 2.4.23
-PHP Version 7.0.10
-MySQL version 5.7.14
We us a plug-in from “Regular Labs – Sourcerer” to enable Joomla to recognize Javascript.

These were all running fine and the charts were displaying normally a few weeks ago.
What appears on our front end:
\\file-ap1-03\userdata1$\carlo849\Desktop\JSCHARTS SCRIPTS\Charts displaying issue.png

I’ll be checking whether there were any patches or updates in the other platforms as well that may be causing the charts not to display.

Kind Regards,
Carlo

October 12, 2017 at 12:53 pm #17290

carlo

(please disregard “what appears on our front end” from previous reply as the img. didnt load)

October 12, 2017 at 3:27 pm #17291

Sunil Urs

Carlo,

Can you please check if there is any error being shown in Chrome Developer Console??

—
Sunil Urs

October 12, 2017 at 3:46 pm #17292

carlo

Hi,

Yes there appears to be an error showing up in the developer console:

canvasjs.min.js:223 Uncaught TypeError: Cannot read property ‘_dataRanges’ of undefined
at u.x.Chart.u.calculateAutoBreaks (canvasjs.min.js:223)
at u.x.Chart.u._processData (canvasjs.min.js:190)
at u.x.Chart.u.render (canvasjs.min.js:173)
at window.onload ((index):168)
canvasjs.min.js:223 Uncaught TypeError: Cannot read property ‘_dataRanges’ of undefined
at u.x.Chart.u.calculateAutoBreaks (canvasjs.min.js:223)
at u.x.Chart.u._processData (canvasjs.min.js:190)
at u.x.Chart.u.render (canvasjs.min.js:173)
at canvasjs.min.js:110

Weird how this is happening as the charts have displayed before with no changes to the script,
thanks in advance for any suggestions or feedback.

Regards,
Carlo

October 12, 2017 at 6:12 pm #17294

Suyash Singh

Carlo,

We are unable to reproduce the issue with the chart options you have shared. Seems like some other chart is causing the issue. Can you please share the options of the chart which is throwing error. This will help us reproduce the issue and help you out better.

___
Suyash Singh
Team CanvasJS

October 17, 2017 at 8:07 pm #17335

Sanjoy

Carlo,

Still we are unable to reproduce the issue at our end. But based on the error you have shared we have made few changes. Can you please test your charts in the mock-site with this updated build and let us know your feedback.

——–
Sanjoy Debnath,
Team CanvasJS

This reply was modified 7 years, 1 month ago by Sanjoy.
This reply was modified 7 years, 1 month ago by Sanjoy.

October 23, 2017 at 6:54 pm #17360

Sanjoy

Carlo,

We have figured out the issue. It happens when some library(like prototype.js) or section of code modifies JavaScript primitive data-types(Array).

We have fixed the issue and it would be released in version 2.0 GA.

——–
Sanjoy Debnath,
Team CanvasJS

October 31, 2017 at 10:04 pm #17433

Sanjoy

Carlo,

[update]

We have just released v2.0 GA with 5 new chart types & several other features. Please refer the release blog for more information & let us know your feedback.

We have just released v2.0 Beta 2 with this fix. Please refer to the release blog for more information.

Do download the latest version from our download page and let us know your feedback.

——–
Sanjoy Debnath,
Team CanvasJS

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

You must be logged in to reply to this topic.

FORUMS

Charts not appearing after the v.02 update

Quick Links

Server Side Technologies

Front Side Technologies

Contact

FORUMS

Login to Ask a Question or Reply

Charts not appearing after the v.02 update