AppGini Community Forums

Posted: **2020-11-30 11:51**

Hi All,

I've been playing around with appgini for some time now and I am really enjoying it, I am by no means knowledgeable in this area but do understand the most basic PHP.

I'm trying to add a very simple custom page to my web app.

I have created a page and included a table of the data and am happy with that aspect but I also want to include a line chart of the data in the table.

Here is the code I have used to pull the data from the db table and print it on the page.

Code: Select all

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<?php
    define('PREPEND_PATH', '../');
    $hooks_dir = dirname(__FILE__);
    include("$hooks_dir/../defaultLang.php");
    include("$hooks_dir/../language.php");
    include("$hooks_dir/../lib.php");

    /* grant access to all logged users */
    $mi = getMemberInfo();

    if(!$mi['username'] || $mi['username'] == 'guest'){
        echo "Access denied";
        exit;
    }

    $query = sql("SELECT period, conusmption FROM `consumption` where energy_type = 'electricity'", $eo);

    //$result = mysqli_query($query);
    $json_array = array();
        while($row = mysqli_fetch_assoc($query))
        {
            $json_array[] = $row;
        }
    $json = json_encode($json_array, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);
    echo $json;
?>

<div id="table"></div>
<script>
//define data array
var tabledata = <?php echo $json;?>;

//initialize table
var table = new Tabulator("#table", {
    data:tabledata,           //load row data from array
    layout:"fitColumns",      //fit columns to width of table
    responsiveLayout:"hide",  //hide columns that dont fit on the table
    pagination:"local",       //paginate the data
    paginationSize:7,         //allow 7 rows per page of data
    movableColumns:true,      //allow column order to be changed
    resizableRows:true,       //allow row order to be changed
    autoColumns:true, //create columns from data field names

});

</script>

on line 28 of the above, I include echo $json; which prints the following:

[{"period":"January","conusmption":25},{"period":"February","conusmption":50},{"period":"March","conusmption":75},{"period":"April","conusmption":100}]

I hope to include the period as the labels and consumption as the value to be graphed.

I have taken the example code from chart.js but can not for the life of me figure out how to pass the data from the above query to the chart.

Code: Select all

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

Any help would be greatly appreciated,

Thanks,
Michael

Posted: **2021-05-06 16:50**

Try this:

Code: Select all

<canvas id="myChart" width="200" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.0-alpha.2/js/plugins/chartjs2/Chart.bundle.min.js"></script>

<script>
var data = [{"period":"January","conusmption":25},{"period":"February","conusmption":50},{"period":"March","conusmption":75},{"period":"April","conusmption":100}]

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

function GetSelectedChartType(sSelectedOption) {
  return sSelectedOption.options[sSelectedOption.selectedIndex].value;
}
arroLevels = ['Period'];
period = data.map(function(e) {return e['conusmption'];});
arroLevelsCount = [period];
arroLevelsMonth = data.map(function(e) {return e['period'];});
arroLevelColors = ['rgba(220,20,20,0.5)'];
sChartType = "line";

arroChartConfig = {
  type: sChartType,
  data: {
    datasets: [{
      label: arroLevels[0],
      data: arroLevelsCount[0],
      backgroundColor: arroLevelColors[0],
      pointStyle: 'triangle',
    }],
    labels: arroLevelsMonth
  },
  options: {
    tooltips: {
      callbacks: {
        title: function(chart, data) {
          return data.labels[chart[0].datasetIndex];
        }
      }
    }
  }
}
oMyBarChart = new Chart(ctx, arroChartConfig);
</script>

Posted: **2021-05-06 17:03**

https://jsfiddle.net/qkjxaruy/

AppGini Community Forums

Custom Page with ChartJS

Custom Page with ChartJS

Re: Custom Page with ChartJS

Re: Custom Page with ChartJS