Home Forums Chart Support chart not rendering

chart not rendering

Viewing 10 posts - 1 through 10 (of 10 total)
  • #24361

    probForObj = { data:
    ‘A Ashish Reddy,A Nehra,AD Mathews,AD Russell,AN Ahmed,AR Patel,Ankit Sharma,Anureet Singh,B Kumar,BE Hendricks,CH Morris,D Wiese,DJ Bravo,DJ Hooda,DJ Muthuswami,DR Smith,DS Kulkarni,GB Hog
    g,GJ Maxwell,GS Sandhu,Gurkeerat Singh,HH Pandya,HV Patel,Harbhajan Singh,IC Pandey,Imran Tahir,J Suchith,J Theron,JJ Bumrah,JP Duminy,JP Faulkner,KV Sharma,Karanveer Singh,M Vijay,M de Lange,
    MA Starc,MC Henriques,MG Johnson,MJ McClenaghan,MM Sharma,NM Coulter-Nile,P Negi,P Suyal,PJ Cummins,PV Tambe,R Ashwin,R Dhawan,R Tewatia,R Vinay Kumar,RA Jadeja,RG More,RS Bopara,S Aravind,S G
    opal,SA Abbott,SL Malinga,STR Binny,Sandeep Sharma,Shivam Sharma,TA Boult,TG Southee,UT Yadav,VR Aaron,YS Chahal’,
    value:
    ‘1.1333333333333333,9.164133738601823,1.8444444444444446,3.0458715596330275,2.15,1.8732394366197183,1.8387096774193548,7.014705882352941,1.2251461988304093,4.3076923076923075,1.931034482758
    6208,7.5,8.1875,3.8529411764705883,7.714285714285714,11.333333333333334,1.1693548387096775,1.8974358974358974,1.7321428571428572,10.75,4.714285714285714,38.65079365079365,2.8728813559322033,5.
    06425702811245,2.923076923076923,2.581967213114754,8.047619047619047,1.0512820512820513,1.0165745856353592,1.1228070175438596,2.013953488372093,1.9425287356321839,4.416666666666667,4.666666666
    666667,1.5789473684210527,3,1.0718954248366013,1.7743589743589743,11.707317073170731,10.727969348659004,3.377551020408163,12.682242990654206,5.388888888888889,1.6349206349206349,2.383928571428
    5716,3.842239185750636,1.2906976744186047,1.4761904761904763,7.638888888888889,5.871559633027523,10.5,4.555555555555555,1.0076335877862594,1.2105263157894737,11.4,4.541202672605791,1.554347826
    0869565,1.6933962264150944,2.3157894736842106,4.0508474576271185,2.217391304347826,1.1415929203539823,1.1920529801324504,2.0492610837438425’ }

    window.onload = function () {
    var dataPoints = [];
    for(let i in probForObj){
    dataPoints.push({x: probForObj[i].data, y: Math.round(probForObj[i].value)});

    }

    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    title:{
    text: “2015”
    },

    axisX: {
    labelAngle: 0
    },

    data: [
    {
    type: “column”,
    dataPoints: dataPoints
    }
    ]
    });

    chart.render();
    }

    please help!

    #24371

    @unicorn,

    In the code that you have shared, the JSON-format(data and value) doesn’t seems to be proper. Storing names as array of string and values as array of numbers should work fine in this case. Please find the code-snippet for parsing JSON data below.

    for(var j = 0; j < probForObj["data"].length; j++){  	
      dataPoints.push({label: probForObj["data"][j], y: Math.round(probForObj["value"][j])});
    }

    Please take a look at this JSFiddle for working sample.
    column chart with data from json


    Vishwas R
    Team CanvasJS

    #24377

    Thank you so much :)

    #24380

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function (){

    var dataPoints = [];
    for(var j = 0; j < probForObj[“data”].length; j++){
    dataPoints.push({label: probForObj[“data”][j], y: Math.round(probForObj[“value”][j])});
    }

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title:{
    text: “Top economical bowlers in 2015”
    },

    axisX: {
    labelAngle: 0
    },
    data: [{
    type: “column”,
    dataPoints: dataPoints
    }]
    });

    chart.render();
    }
    </script>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script&gt;
    <script src=”ipl.js” type=”text/javascript”></script></head>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 300px; width: 100%;”>
    </div>
    </body>
    </html>

    I’m using Visual Studio code. It’s not working. Can you tell me what’s wrong please?

    #24403

    @unicorn,

    The code that you have shared seems to be working fine, please take a look at this JSFiddle.

    If you are still facing issue, kindly share us the static HTML file along with dependencies(ipl.js) over Google-Drive / Onedrive so that we can run your it locally at our end, understand the scenario better and help you resolve.


    Vishwas R
    Team CanvasJS

    #24406
    #24424

    @unicorn,

    The sample code that you have shared also seems to be working fine. Can you kindly share the Working Sample Project reproducing the issue you are facing and also kindly brief us what do you mean by ‘not working’? Also can you check browser-console for any error?


    Vishwas R
    Team CanvasJS

    #24448

    I’m getting a blank webpage

    Uncaught ReferenceError: require is not defined
    at ipl3.js:1
    chart3.html:7 Uncaught TypeError: Cannot read property ‘data’ of undefined
    at window.onload (chart3.html:7)

    #24454

    @unicorn,

    The project that you have shared seems to be a node.js project, which would give such error when it’s not run on a server. Please check this tutorial for more information on running node.js project.


    Vishwas R
    Team CanvasJS

    #24455

    Yes!! Thank you

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

You must be logged in to reply to this topic.