2

Eu queria colocar dois gráficos na mesma página só que só me aparece um.

<div id="canvas-holder">
   <canvas id="chart-area" />
</div> 
<div id="canvas-holder">
   <canvas id="pie" />
</div>

E o javascript está assim

<script>

        var pieData1 = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

            window.onload = function(){
                var ctx1 = document.getElementById("pie").getContext("2d");
                window.myPie = new Chart(ctx1).Pie(pieData1);
            };
    </script>

  <script>

        var doughnutData = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 40,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 120,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                }

            ];

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



    </script>
3
  • Acredito que o problema é porque você está sobrescrevendo a função onload...
    – KaduAmaral
    7/07/2015 às 19:52
  • voce tem duas divs com o mesmo id. isso não é uma boa prática 7/07/2015 às 20:11
  • tenta declarar cada um dos gráficos em uma função. do.jeito que está vai dar conflito mesmo.
    – thierry
    8/07/2015 às 7:11

1 Resposta 1

2

Tenta isso:

var pieData1 = [
  { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red"},
  { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green"},
  { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow"},
  { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey"},
  { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}];

  var doughnutData = [
  { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red"},
  { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green"},
  { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow"},
  { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey"},
  { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}   ];


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

    var ctx1 = document.getElementById("pie").getContext("2d");
    var myPie = new Chart(ctx1).Pie(pieData1);

https://jsfiddle.net/ivanteles/28554a43/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .