Skip to content

 Install the App?

Displaying a bar chart with ChartJS

ChartJS integrated to ZnetDK for Mobile
DESCRIPTION Integrating ChartJS into the Starter Web Application and display of bar chart.

PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only four steps are required:
  • Step 1: Coding the view in charge of displaying the bar chart,
  • Step 2: Coding the controller that supplies data to the bar chart,
  • Step 3: Loading the JS script of ChartJS from CDN hosting,
  • Step 4: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view mybarchart.php

The view mybarchart.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

  • <canvas id="my-bar-chart"/> is the HTML container of the bar chart.
  • The loadChartData() JS function requests through the AJAX API the data of the bar chart.
  • The showChart() JS function instantiates the bar chart on first call and updates its data if it is already instantiated (see ChartJS documentation).
  • The jQuery event handler on ZnetDK for Mobile afterviewdisplay events is triggered each time the view mybarchart.php is displayed.

View mybarchart.php

<div class="w3-padding-64">
    <canvas id="my-bar-chart" width="400" height="400"></canvas>
</div>
<script>
console.log('mybarchart.php');
var ctx = document.getElementById('my-bar-chart').getContext('2d'),
    myChart = null;

/* Once the view is displayed ... */
$('body').on('afterviewdisplay', function (event, viewId) {
    if (viewId === 'mybarchart') {
        loadChartData();
    }
});

function loadChartData() {
    znetdkMobile.ajax.request({
        controller: 'barchartctrl',
        action: 'data',
        callback: function (response) {
            showChart(response);
            // Footer position is adjusted
            znetdkMobile.footer.adjustPosition();
        }
    });
}

function showChart(chartData) {
    if (myChart === null) { // First display
        myChart = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    } else {
        myChart.data = chartData;
        myChart.update();
    }
}
</script>
HTML5 JS

Step 2 - Coding the controller barchartctrl.php

The controller barchartctrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

  • The action_data() method is called by the mybarchart.php view through the AJAX API (see the loadChartData() JS function in the view).
  • Data to display by the chart data are returned by the controller's action in JSON format (the PHP array is automatically tansformed in JSON by the ZnetDK \Response object).

Controller barchartctrl.php

<?php
namespace app\controller;

class BarChartCtrl extends \AppController {
    static protected function action_data() {
        $data = [
            'labels' => ["January","February","March","April","May","June","July"],
            'datasets' => [[
                'label' => 'My Dataset',
                'data' => [65,59,80,81,56,55,40],
                'fill' => false,
                'backgroundColor' => ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)",
                    "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)",
                    "rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)",
                    "rgba(201, 203, 207, 0.2)"],
                'borderColor' => ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
                    "rgb(75, 192, 192)","rgb(54, 162, 235)",
                    "rgb(153, 102, 255)","rgb(201, 203, 207)"],
                'borderWidth' => 1
            ]]
        ];
        $response = new \Response();
        $response->setResponse($data);
        return $response;
    }
}
PHP

Step 3 - Loading the ChartJS library

The ChartJS library is automatically loaded by specifying into the config.php of the Web App, the matching url on the CDN hosting (see Settings | App extra CSS and JS libraries).

The config.php script is located into the INSTALL_DIR/applications/default/app/ folder.

The line below can be inserted anywhere in the config.php script.

Script config.php

define('CFG_APP_JS', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js');
PHP

Step 4 - Adding "My bar chart" item to the navigation menu

Finally, to give users access to the mybarchart.php bar chart view, a menu item definition is added into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

Script menu.php

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'mybarchart', 'My bar chart', 'fa-bar-chart');
    
    // ... Here, other menu items...
    
}
PHP

Search

Sort order