CODEWITHSUNDEEP
javascriptphpjqueryjoomlachart.js
Yohan Greenburg
Yohan Greenburg

Reputation: 333

Chart.JS Chart Not Being Generated

I am attempting to display 3 charts on this page. 2 of the 3 display perfectly, I asked a different question as I thought the issue was related to the syntax of the 2nd chart (cone) however a friendly user pointed out that the syntax is sound there, so alas I post back with full on syntax and hopefully someone can present me with the resolution to have all 3 charts display on my page.

And the exact error I receive is:

Uncaught type error. Can not read property 'data' of undefined.

On this line data: sb }] and the red X in the dev console is directly after the ]

    <?php
$option = array();
$option['driver'] = 'mssql';
$option['host'] = 'Server';
$option['user'] = 'User';
$option['password'] = 'Pass';
$option['database'] = 'DB';
$option['prefix'] = '';
$db = JDatabaseDriver::getInstance($option);
$sql = $db->getQuery(true);
$sql = "Select * from green";
$db->setQuery($sql);
$rows = $db->loadRowList();
$output = array();
foreach ($rows as $row) {
    array_push($output, $row);
}
$data = json_encode($output[0]);
$sql = "Select * from alpha";
$db->setQuery($sql);
$rows = $db->loadRowList();
$newoutput = array();
foreach ($rows as $row) {
    array_push($newoutput, $row);
}
$newop = json_encode($newoutput[0]);
$sql = "Select * from jibjab";
$db->setQuery($sql);
$rows = $db->loadRowList();
$joc = array();
foreach ($rows as $row) {
    array_push($joc, $row);
}
$yoytr = json_encode($joc[0]);
?>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    </head>
    <style>
        .doublecolumn { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;}
    </style>
    <body>
        <h1><?php echo $paramname; ?> Place Header Here</h1>

        <div class="doublecolumn">
            <div id="container" style="width: 100%;"><canvas width:="100px;" id="canvas"></canvas></div>
            <div id="containerone" style="width: 100%;"><canvas width:="100px;" id="cone"></canvas></div></div>
        <script>
            "use strict";
            var jsondata = <?php echo $data; ?>;
            var values = [];
            for (var i = 0; i < jsondata.length; i++) {
                values.push(jsondata[i]);
            }
            var jdata1 = <?php echo $newop; ?>;
            var values1 = [];
            for (var i = 0; i < jdata1.length; i++) {
                values1.push(jdata1[i]);
            }
            var jdata2 = <?php echo $yoytr; ?>;
            var yoyvalues = [];
            for (var i = 0; i < jdata2.length; i++) {
                yoyvalues.push(jdata2[i]);
            }
            var mainlabels = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
            var salesbyperson = [21, 31, 21, 16, 22, 24];
            var ctx = document.getElementById('canvas').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: mainlabels,
                    datasets: [{
                            label: 'First',
                            backgroundColor: 'rgba(0, 129, 214, 0.8)',
                            data: salesbyperson
                        }]
                },
                options: {
                    tooltips: {
                        callbacks: {
                            label: function (t, d) {
                                    var xLabel = d.datasets[t.datasetIndex].label;
                                    var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                                    return xLabel + ': ' + yLabel;
                            }
                        }
                    },
                    legend: {
                        display: false,
                        position: 'top',
                    },
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    callback: function (value, index, values) {
                                        if (parseInt(value) >= 1000) {
                                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                        } else {
                                            return '$' + value;
                                        }
                                    }
                                }
                            }]
                    }
                }
            });
            var ml = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
            var sb = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('cone').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ml,
      datasets: [{
         label: 'Sum of Sales',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: sb
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
               return xLabel + ': ' + yLabel;
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[0]._meta['0'].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '12')
               bar.backgroundColor = 'blue';
            else if (dataPoint === '13')
               bar.backgroundColor = 'green';
         });
      }
   }]
});
        </script>         
        <h1><?php echo $paramname; ?> Place Header Here</h1>
        <div id="containerGPPercent" style="width: 50%;"><canvas width:="100px;" id="cavasme"></canvas></div>        
        <script>
             var m2 = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
            var sb1 = [21, 31, 21, 16, 22, 24];
            var ctx = document.getElementById('cavasme').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: m2,
                    datasets: [{
                            type: 'line',
                            fill: false,
                            label: 'Gross Profit',
                            backgroundColor: 'rgba(255,0,0,1)',
                            borderColor: 'rgba(255,0,0,1)',
                            data: sb1,
                            yAxisID: 'y-axis-1'
                        }, {
                            label: 'Total Revenue',
                            backgroundColor: 'rgba(0, 129, 214, 0.8)',
                            data: sb
                        }]
                },
                options: {
                    tooltips: {
                        callbacks: {
                            label: function (t, d) {
                                var xLabel = d.datasets[t.datasetIndex].label;
                                var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                                return xLabel + ': ' + yLabel;
                            }
                        }
                    },
                    legend: {
                        display: false,
                        position: 'top',
                    },
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    callback: function (value, index, values) {
                                        if (parseInt(value) >= 1000) {
                                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                        } else {
                                            return '$' + value;
                                        }
                                    }
                                }
                            }, {
                                id: 'y-axis-1',
                                position: 'right',
                                ticks: {
                                    beginAtZero: true,
                                    callback: function (value, index, values) {
                                        return value + '%';
                                    }
                                }
                            }]
                    }
                }
            });
        </script>
    </body>
</html>
</body>
</html>
{/source}

Upvotes: 0

Views: 314

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

There seems to be an issue with the plugin. TRY using the following one :

plugins: [{
   beforeDraw: function(chart) {
      var labels = chart.data.labels;
      labels.forEach(function(e, i) {
         var meta = chart.data.datasets[0]._meta;
         var bar = meta[Object.keys(meta)[0]].data[i]._model;
         var dataPoint = e.split(/\s/)[1];
         if (dataPoint === '12') bar.backgroundColor = 'blue';
         else if (dataPoint === '13') bar.backgroundColor = 'green';
      });
   }
}]

Upvotes: 1

Related Questions