Chartjs-Dynamic data in ChartJS

by

1👍

✅

You can use an AJAX request to get the data from the server. Below is an example using PHP to build out data. Although you would need to make it conditional based on region. 

onRegionClick: function(element, code, region) {
 $.ajax('/get_chart_data.php', {
  data: {region: region},
  dataType: 'json',
  success: function(response) {
    new Chart(pie).Doughnut(response.pieData, pieOptions);
  }
});

get_chart_data.php

<?php

// Check which region was passed
//$_REQUEST['region']
// Based on region build chart data

$chartData = new stdClass();

$pieData = array();
$pie1= new stdClass();
$pie1->value = 20;
$pie1->color = '#878BB6';
$pieData[] = $pie1;

$pie2= new stdClass();
$pie2->value = 40;
$pie2->color = '#4ACAB4';
$pieData[] = $pie2;

$chartData->pieData = $pieData;
echo json_encode($chartData);
?>

One method of switching based on region

<?php

$region1Pie = array(20, '#878BB6', 40, '#4ACAB4', 10, '#FF8153', 30, '#FFEA88');
$region2Pie = array(15, '#878BB6', 20, '#4ACAB4', 25, '#FF8153', 30, '#FFEA88');
$region3Pie = array(9, '#878BB6', 60, '#4ACAB4', 25, '#FF8153', 12, '#FFEA88');

$chartData = new stdClass();
$pieData = array();

// Swtich based on region
switch($_REQUEST['region']) {
  case 1:
    $pieArray = $region1Pie;
    break;
  case 2:
    $pieArray = $region2Pie;
    break;
  case 3:
    $pieArray = $region3Pie;
    break;
}

for($i=0; $i<count($pieArray); $i+=2) {
  $pie= new stdClass();
  $pie->value = $pieArray[$i];
  $pie->color = $pieArray[$i+1];
  $pieData[] = $pie;
}

$chartData->pieData = $pieData;
echo json_encode($chartData);

?>

0👍

Yes, it’s quite easy. I am using bootstrap adminlte and want to show the donut chart.

The HTML Code is given below :

 <div class="chart-responsive">
     <canvas id="myChart" height="400"></canvas>
 </div>

Script File :

    /*
     * Declaration of Arrays
     */
    var dataCount = new Array();
    var labelSet = new Array();
    var colorArray = new Array();
    var colorHoverArray = new Array();
    var footerArray = new Array();
    /*
     * Footer color array (To set the color dynamically)
     */
    footerArray.push('green', 'orange', 'blue', 'yellow', 'red','purple');
     /*
     * Label color Array
     */
    colorArray.push('#3c8dbc', '#f56954', '#FFCE56', '#f56954', '#d2d6de', '#00a65a', '#00c0ef', '#605ca8', '#ff851b');

    /*
     * On Hover color Array
     */
    colorHoverArray.push('#605ca8', '#ff851b', '#00c0ef', '#00a65a', '#72dbdb', '#f56954', '#FFCE56', '#3c8dbc', '#f56954');
    var backgroundArray = new Array();
    var hoverArray = new Array();
    var listCount = 0;
    /*
     * Ajax call to get the response
     */
    $.ajax({
        type: "GET",
        url: yourUrl',
        success: function (response) {
            $.each(response.list, function (index, value) {
                /*
                 * dynamically loading the data in the array to pass it on to the datasets and labels Option
                 * of the Donut Chart
                 */
                dataCount[index] = value.usersCount;
                labelSet[index] = value.statusName;
                listCount = response.list.length;
            });

            /*
             * Background & hover color of the area on donut chart
             */
            for (var item = 0; item < listCount; item++)
            {
                backgroundArray[item] = colorArray[item];
                hoverArray[item] = colorHoverArray[item];
            }
            /*
             * Main donut chart section
             */
            var ctx = document.getElementById("myChart");
            var ctx = document.getElementById("myChart").getContext("2d");
            var ctx = $("#myChart");
            var ctx = "myChart";
            var ctx = document.getElementById("myChart");
            var data = {
                labels: labelSet,
                datasets: [
                    {
                        data: dataCount,
                        backgroundColor: backgroundArray,
                        hoverBackgroundColor: hoverArray
                    }]
            };
            // And for a doughnut chart to render the data
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
            });
        }
    });

Leave a comment