FORUMS

Select any forum below to ask question

Home › Forums › Report Bugs › Charts not appearing after the v.02 update

Charts not appearing after the v.02 update

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 6 years, 6 months ago by Sanjoy.
    • This reply was modified 6 years, 6 months 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.