CODEWITHSUNDEEP
javascripthtmlcsschartschart.js
Anil Chauhan
Anil Chauhan

Reputation: 5

Want to multiple charts on same page with different data

I am using a doughnut chart plugin in my website. It is working fine but I want multiple chart on same page with different data. Please see the code below.

This is the chart I am using

<canvas id="chart-area1" width="200" height="200" style="width:150px !important; height:150px !important;"/></canvas>

Script is here

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script>
    var doughnutData = [
            {
                value: 45,
                color:"#17CB8A",
                highlight: "#17CB8C",
                label: "Strating"
            },
            {
                value: 12,
                color: "#FF003C",
                highlight: "#FF003A",
                label: "Warning"
            },
            {
                value: 7,
                color: "#fb6800",
                highlight: "#fb6801",
                label: "Past Due"
            },
            {
                value: 9,
                color: "#88c100",
                highlight: "#88c102",
                label: "In Progress"
            },

        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area1").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        };

</script>

How I can copy this chart with different attributes?

Upvotes: 0

Views: 3194

Answers (1)

Omer Bonfil
Omer Bonfil

Reputation: 417

This is how i did it. with multiple canvases.

<script>
    var doughnutData = [ ... ];
    var doughnutData2 = [ ... ];
    var doughnutData3 = [ ... ];

    window.onload = function(){
       var ctx = document.getElementById("chart-area1").getContext("2d");
       var dtx = document.getElementById("chart-area2").getContext("2d");
       var etx = document.getElementById("chart-area3").getContext("2d");
       window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
       window.myDoughnut2 = new Chart(dtx).Doughnut(doughnutData2, {responsive : true});
       window.myDoughnut3 = new Chart(etx).Doughnut(doughnutData3, {responsive : true});
    };

</script>

If you want to use multiple Charts on same canvas you can use the fork FVANCOP did for Chart.js here

Upvotes: 2

Related Questions