Javascript - Membuat grafik menggunakan chart js

Membuat Grafik Chart menggunakan library chart js

source code HTML menggunakan bootstrap.

yang perlu di perhatikan nama id selector nya. yaitu yang ada di dalam tag id provinceChart

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">

          <div class="x_panel ">

            <div class="x_title">

              <h2>Data Penjualan Provinsi - <strong><?//=date('Y')?></strong></h2>

              <ul class="nav navbar-right panel_toolbox">

                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>

                </li>

                <li><a class="close-link"><i class="fa fa-close"></i></a>

                </li>

                </ul>

              <div class="clearfix"></div>

            </div>

            <div class="x_content">

              <canvas id="provinceChart" width="400" height="200"></canvas>

            </div>

          </div>

        </div>

source code javascript sebagai berikut:

getJson =  untuk mengambil data dari controller berupa json, hasil nya di masukan ke dalam parameter function(res)

sesuaikan nama field dengan atribut yang ada pada javascript nya seperti qty, address_province dll

 $.getJSON('<?=base_url('/Dashboard/getSummaryByProvince/') ?>', function(res) {

   

        let labels = new Array;

    let dataQty = new Array;

    res.forEach( (n, i) => {

      let element = n['address_province']

      if(n['address_province'] == null || n['address_province'] == ''){

        element = "no_name"

      }

      labels.push(element)

      dataQty.push(n['qty'])

    });

    console.log(labels);

            const data = {

                labels: labels,

                datasets: [{

                    label: 'Qty Penjualan',

                    backgroundColor: 'rgba(255, 255, 255, 0)',

                    borderColor: 'rgb(51, 161, 255)',

                    data: dataQty,

                }],

            }

            const config = {

                type: 'line',

                data: data,

                options: {

                    scales: {

                        yAxes: [{

                            ticks: {

                                beginAtZero: true

                            }

                        }]

                    }

                }

            };

            const myChart = new Chart(      

                document.getElementById('provinceChart'),

                config

             );

           

        });