Multiple charts not working chart.js

Question

I've been looking for a long time here in StackOverflow, searching for a solution to my problem. I already know that it is about window.onload that's been opened two times in my script, but I can't fix it. I'm looking it for days. Could you guys please help me?

Here's my chartBarSample.php code:

<script>
    var optionsBar = {
        responsive: true
    };

    var dataBar = {
        labels: ["Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "CPF's Enviados",
                fillColor: "#00335A",
                strokeColor: "#00243F",
                highlightFill: "#00243F",
                highlightStroke: "#00192B",
                data: [6920, 7226, 7969]
            },
            {
                label: "Propostas Finalizadas",
                fillColor: "#007CDA",
                strokeColor: "#0066B4",
                highlightFill: "#0066B4",
                highlightStroke: "#005290",
                data: [6325, 6825, 7586]
            },
            {
                label: "Propostas Aprovadas",
                fillColor: "#2B8B4A",
                strokeColor: "#196431",
                highlightFill: "#196431",
                highlightStroke: "#114622",
                data: [5463, 6606, 6501]
            }
        ]
    };

    var optionsLine = {
        responsive: true
    };

    var dataLine = {
        labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "Dados primários",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
            },
            {
                label: "Dados secundários",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90, 200, 87, 20, 50, 20]
            }
        ]
    };     

    function start(){
        var ctx = document.getElementById("graficoBarra").getContext("2d");
        var BarChart = new Chart(ctx).Bar(dataBar, optionsBar);

        var ctx2 = document.getElementById("graficoLinha").getContext("2d");
        var LineChart = new Chart(ctx2).Line(dataLine, optionsLine);
    }

    window.onload = start;
</script>

@TheValyreanGroup only one charts is opening (the second one). — jvbs
– jvbs, Commented Nov 7, 2016 at 10:31

Keno · Accepted Answer · 2016-11-04 20:25:25Z

2

Your chart definitions are incorrect, try this:

function start(){
    var ctx = document.getElementById("graficoBarra").getContext("2d");
    var BarChart = new Chart(ctx, {
          type: 'bar',
          data: dataBar,
          options: optionsBar          
    });

    var ctx2 = document.getElementById("graficoLinha").getContext("2d");
    var LineChart = new Chart(ctx2, {
          type: 'line',
          data: dataLine,
          options: optionsLine          
    });
}

Full Code in Codepen: 2 Chart.js Charts Result:

answered Nov 4, 2016 at 20:25

Keno

3,9753 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jvbs Over a year ago

It worked man, thanks! But do you know why the charts are both white? @Keno

Keno Over a year ago

@João you can change the background color in the css: #graficoBarra, #graficoLinha{background-color: white;} also, please accept the answer so I can get my imaginary points : )

jvbs Over a year ago

Already accepted, but do you know why it's not working inside the script, instead of using css to paint the charts? @Keno

Keno Over a year ago

@João: Thx, by default they render transparent and you usually use css, there is a way with plugins, check the Codepen Example or this:[stackoverflow.com/questions/30464750/… set background)

Collectives™ on Stack Overflow

Multiple charts not working chart.js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related