Canvas JS using ajax call

๐Ÿ‘:-1

Got it! Had to make chart inside ajax call.

<script type="text/javascript">
    $(document).ready(function(){

        var dps = [{x: 1, y: 10}]; 

$.ajax({

            url : "stackedcanvasjson.json",
            success : function(result) {
                var dataFromJSON = JSON.parse(result);
            dps.splice(0, dps.length);

            $.each(dataFromJSON, function (index, value) {
            dps.push(value);

            });

        var chart = new CanvasJS.Chart("chartContainer", {

            title:{
                text:"Olympic Medals of all Times (till 2012 Olympics)"             

            },
                        animationEnabled: true,
                        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();
                            }
                          },
                          axisY: {
                              title: "Medals"
                            },
                            toolTip: {
                              shared: true,  
                              content: function(e){
                                var str = '';
                                var total = 0 ;
                                var str3;
                                var str2 ;
                                for (var i = 0; i < e.entries.length; i++){
                                    console.log(e.entries[i].dataPoint.y);
                                  var  str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ; 
                                  total = e.entries[i].dataPoint.y + total;
                                  str = str.concat(str1);
                                }
                                str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
                                str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";

                                return (str2.concat(str)).concat(str3);
                              }

                            },

            data: [
            {     
                type: "bar",
                showInLegend: true,
                name: "CR",
                color: "#1f77b4",               
                dataPoints:dps[0]

            },
            {     
                type: "bar",
                showInLegend: true,
                name: "TR",
                color: "#2ca02c",               
                dataPoints:dps[1]

            },
            {     
                type: "bar",
                showInLegend: true,
                name: "IR",
                color: "#f52887",               
                dataPoints:dps[2]

            },
            {     
                type: "bar",
                showInLegend: true,
                name: "PTR",
                color: "#5afffa",               
                dataPoints:dps[3]

            },
            {     
                type: "bar",
                showInLegend: true,
                name: "WO",
                color: "#9b14e7",               
                dataPoints:dps[4]

            }

            ]
        });



        chart.render();
            }




});

    });
</script>

Leave a comment