locked
chart.js RRS feed

  • Question

  • User2128357114 posted

    Hi all,

    I want to create a chart with chart.js but my code return a empty chart:

    @Code
        ViewData("Title") = "Grafico"
        'Layout = ""
    
    End Code
    
    <h2>Grafico </h2>
    
    
    
    @*<script type="text/javascript" charset="utf-8" src='~/Scripts/jquery-1.10.2.min.js'></script>*@
    @*<script type="text/javascript" charset="utf-8" src='~/Scripts/Grafico/script.js'></script>*@
    <script type="text/javascript" charset="utf-8" src='~/Scripts/Grafico/Chart.js'></script>
    
    <canvas id="idgrafico"></canvas>
    
    
    <script>
    
     
    
    
        var dateGrafico = [];
        var vgm = [];
        var ter = [];
        var bin = [];
    
        
            $.getJSON('@Url.Action("LoadJsonDataGrafico", "Statistiche")', function (data) {
                for (var i = 0; i < data.dateGrafico.length; i++) {
    
    
                    dateGrafico.push(data.dateGrafico[i]);
                    vgm.push(data.countVGM[i]);
                    ter.push(data.countTER[i]);
                    bin.push(data.countBIN[i]);
    
                }
    
    
            });
        
    
    
        var config = {
    
            type: 'line',
    data: {
        labels: dateGrafico,
                datasets:  [{
    
                    label: "VGM",
                    data: vgm,
                    //fill: false,
                    //borderDash: [5, 5],
                    borderColor: 'rgba(0,166,132,' + ('0.4' || '.3') + ')',
                    backgroundColor: 'rgba(144,225,161,' + ('0.7' || '.3') + ')'
    
                },
    
                {
                   label: "TER",
                   data: ter,
                   borderColor: 'rgba(0,204,204,' + ('0.4' || '.3') + ')',
                   backgroundColor: 'rgba(0,255,255,' + ('0.7' || '.3') + ')'
                },
    
                {
                label: "BIN",
                data: bin,
                borderColor: 'rgba(204,102,0,' + ('0.4' || '.3') + ')',
                backgroundColor: 'rgba(153,76,0,' + ('0.7' || '.3') + ')'
            }
    
    
                ]
    
    
    
    
    },
    
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Grafico'
                },
                tooltips: {
                    mode: 'label',
    callbacks: {
                    }
                },
                hover: {
                    mode: 'dataset'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            show: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            show: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            suggestedMin: 0,
                            //suggestedMax: 200,
                        }
                    }]
                }
            }
        };
    
    
    
        $(document).ready(function () {
    
            var ctx = document.getElementById("idgrafico").getContext("2d");
            window.myLine = new Chart(ctx, config);
    
        });
    
    </script>
    
    

    and json:

    {"dateGrafico":["25/06/2016","26/06/2016","27/06/2016","28/06/2016","29/06/2016","27/07/2016"],"countVGM":[0,0,5503,2314,1030,0],"countTER":[1,0,491,438,453,2],"countBIN":[0,3,22,102,61,1]}

    any idea?

    thanks in advice!

    Wednesday, June 29, 2016 3:06 PM

Answers

  • User281315223 posted

    Do you have any errors present when you use the Developer Tools (F12) within your browser?

    I would recommend checking that. Additionally, make sure you make your getJSON() call within your document ready block as well to ensure that jQuery is ready before it attempts to use it to pull your data :

    $(document).ready(function(){
            $.getJSON('@Url.Action("LoadJsonDataGrafico", "Statistiche")', function (data) {
                for (var i = 0; i < data.dateGrafico.length; i++) {
                    dateGrafico.push(data.dateGrafico[i]);
                    vgm.push(data.countVGM[i]);
                    ter.push(data.countTER[i]);
                    bin.push(data.countBIN[i]);
                }
            });
     
            // Other code omitted for brevity (ctx declaration, etc.)
    }); 



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 3:42 PM

All replies

  • User281315223 posted

    Do you have any errors present when you use the Developer Tools (F12) within your browser?

    I would recommend checking that. Additionally, make sure you make your getJSON() call within your document ready block as well to ensure that jQuery is ready before it attempts to use it to pull your data :

    $(document).ready(function(){
            $.getJSON('@Url.Action("LoadJsonDataGrafico", "Statistiche")', function (data) {
                for (var i = 0; i < data.dateGrafico.length; i++) {
                    dateGrafico.push(data.dateGrafico[i]);
                    vgm.push(data.countVGM[i]);
                    ter.push(data.countTER[i]);
                    bin.push(data.countBIN[i]);
                }
            });
     
            // Other code omitted for brevity (ctx declaration, etc.)
    }); 



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 3:42 PM
  • User2128357114 posted

    don't run, but if i hide and show datatable,it works.

    Wednesday, June 29, 2016 8:39 PM
  • User281315223 posted

    Do you have any errors present in the Console when using the Developer Tools (F12)?

    Wednesday, June 29, 2016 9:05 PM