Chart.js - Type Line - JSON - SQL Server

Asked

Viewed 396 times

1

I’m putting together my first chart. When I use date constants Chart renders normally, but when I upload sql database information I don’t have the same success. Follow code ...

<div id="canvas-holder1" style="width: 100%;">
    <canvas id="chart1" />
</div>
<script language="javascript" type="text/javascript">
    $(function() {
        $.ajax({
            type: "POST",
            url: "Entrada.aspx/getChartData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnErrorCall
        });

        function OnSuccess(response) {
            var lstReceita = eval(response.d[0]);
            var lstDespesa = eval(response.d[1]);

            var lineChartData = {
                labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                datasets: [{
                    label: "Receitas",
                    data: lstReceita
                }, {
                    label: "Despesas",
                    data: lstDespesa
                }]
            };

            window.onload = function() {
                var chartEl = document.getElementById("chart1");
                window.myLine = new Chart(chartEl, {
                    type: 'line',
                    data: lineChartData,
                    options: {
                        title: {
                            display: true,
                            text: 'Comparativo Gráfico de Performance Financeira'
                        },
                        tooltips: {
                            enabled: true
                        }
                    }
                });
            };
        };

        function OnErrorCall(response) {
            alert('error');
        }
    });

</script>
json chartjs

  • Remove that window.onload, it’s only getting in the way. After that it works? if you don’t have an error in the console?

  • 1

    Perfect Sergio. That was exactly the problem.

  • On the testing machine it worked perfectly, but on the hosting provider it did not render. What could that be?

  • Do you have an error in your console? url "Entrada.aspx/getChartData" exists and gives some result?

  • The table exists, it has data, the query returns the data, but the json does not complement the work.

  • What gives console.log(response);?

  • I didn’t bring anything. It’s a Webmethod. Maybe it needs to be set up on the provider.

  • Okay, so it’s a separate issue from this question and you have to set it up on the server...

  • Let’s go continue this discussion in chat.

Show 4 more comments

1 answer

0


The line $(function() { is the jQuery way of calling window.load. The code that’s inside $(function() {...}); will only be run when DOM is loaded. So have the line window.onload = function() {...}; is redundancy and in some cases (e.g. when there are others window.load) That will stop the code from running.

Remove window.onload = function() {...}; and just leave what’s inside, that should solve your problem.

Browser other questions tagged json chartjs

You are not signed in. Login or sign up in order to post.