locked
Chart.JS rendering data from Datatable RRS feed

  • Question

  • User31164289 posted

    I want to use Chart.js library.

    I need to build linear chart with 3 series (year revenue).

    The data is in a SQL DB and was extracted into a datatable similar to this:

    2018

    46541

    41251

    42278

    37255,98

    39959

    35015

    35483

    28049

    34315

    35788

    36317

    34469

    2019

    40774

    38324

    37625

    35385

    35904

    30549

    30438

    25803

    32010

    34049

    34260

    31132

    2020

    42739

    40289

    39590

    37350

    37869

    32514

    32403

    27768

    33975

    In my web page I've SQLdatasource and same control to filter it:

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:LocalSqlServer %>" SelectCommandType="StoredProcedure"

                    SelectCommand="dg_QueryIMSGraphic">

                    <SelectParameters>

                        <asp:Parameter Name="ListaAnni" />

                        <asp:Parameter Name="ListaISF" />

                        <asp:Parameter Name="ListaProdotti" />

                        <asp:Parameter Name="ListaBrick" />

                    </SelectParameters>

                </asp:SqlDataSource>

    and this is JAVASCRIPT sample that I want to use for my chart:

    var ctx = document.getElementById('myChart').getContext('2d');

    var myChart = new Chart(ctx, {

        type: 'line',

        data: {

            labels: ['Gen', 'Feb', 'Mar', 'Apr', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],

            datasets: [{

                label: 'Anno 2020',

                data: [12, 16, 9, 5, 4, 6,11,12,7],

                backgroundColor: [

                    'rgba(184, 191, 255, 1)'               

                ],

                borderColor: [

                    'rgba(0, 21, 214, 1)'                

                ],

                borderWidth: 1,

                responsive: true,

                maintainAspectRatio: true,

                lineTension: 0,

                pointBorderWidth: 10

            },

            {

                label: 'Anno 2019',

                data: [12, 1, 9, 2, 4, 9, 12, 5, 7,11,19],

                backgroundColor: [

                    'rgba(14, 191, 255, 1)'

                ],

                borderColor: [

                    'rgba(100, 21, 214, 1)'

                ],

                borderWidth: 1,

                responsive: true,

                maintainAspectRatio: true,

                fill: false,

                lineTension: 0,

                pointBorderWidth: 10,

                borderWidth: 2

            },

            {

                label: 'Obiettivo 2020',

                data: [12, 18, 29, 32, 24, 29, 22, 15, 17, 19, 25],

                backgroundColor: [

                    'rgba(210, 161, 255, 1)'                    

                ],

                borderColor: [

                    'rgba(180, 21, 214, 1)'

                ],

                borderWidth: 1,

                responsive: true,

                maintainAspectRatio: true,

                fill: false,

                lineTension: 0,

                pointBorderWidth: 10

            }],

        },

        options: {

            scales: {

                yAxes: [{

                    ticks: {

                        beginAtZero: true

                    }

                }]

            }

        }

    });

    How I can replace data in javascript with datatable record?

    Thanks in advance

    Sunday, October 18, 2020 1:46 PM

All replies

  • User1535942433 posted

    Hi clembo67,

    Accroding to your description,you need to create a WebMethod populates the data from databases and builds a JSON string that will be used to populate the Canvas chart.And then,you need to call jQuery AJAX which made to the WebMethod to receive JSON string.The JSON string is converted to a JSON object. The JSON object is then applied to the Canvas chart and also used to prepare a legend for the chart by looping and adding dynamic HTML to the legend DIV.

    More details,you could refer to below article:

    https://www.aspsnippets.com/Articles/Implement-Free-HTML5-Canvas-charts-using-Chartjs-in-ASPNet.aspx

    Best regards,

    Yijing Sun

    Monday, October 19, 2020 3:36 AM