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

This topic contains 7 replies, has 5 voices, and was last updated by  Sanjoy 5 days, 18 hours ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17280

    carlo
    Member

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer1" style="height: 300px; width: 100%;">
    </div>
    </body>
    </html>
    
    #17286

    Indranil Deo
    Member

    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

    #17289

    carlo
    Member

    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:

    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

    #17290

    carlo
    Member

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

    #17291

    Sunil Urs
    Keymaster

    Carlo,

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


    Sunil Urs

    #17292

    carlo
    Member

    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

    #17294

    Suyash Singh
    Moderator

    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

    #17335

    Sanjoy
    Moderator

    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 5 days, 18 hours ago by  Sanjoy.
    • This reply was modified 3 days, 20 hours ago by  Sanjoy.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.