score:-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>

Related Query

More Query from same tag