Chart.js with JSON data error

by

1👍

✅

Fix your JSON 

$query = " SELECT column_name,COUNT(*) FROM tablename GROUP BY column_name;  ";

            $result = mysql_query( $query );
                if ( !$result ) {
                    $ErrorMessage  = 'Invalid query: ' . mysql_error() . "\n";
                    $ErrorMessage .= 'Whole query: ' . $query;
                die( $ErrorMessage );
        }

        $JSON_output = array();
            while ( $row = mysql_fetch_assoc( $result ) )
        {

        $JSON_output[] = array('ItemToCount'        => $row['ItemToCount'], 
                                'count'         => $row['COUNT(*)'],
                            );
        }

👍:0

I was able to resolve the issue. Appreciate the help for pointing out the few mistakes 🙂 . @spencer wieczorek

Required scripts

<script src="Chart.js"></script>
<script src="jquery-1.11.3.min.js"></script>

Code

<script type="text/javascript">
$.ajax({url:"json.php",dataType:"json"})
  .fail(function(){alert("Im a failure")})
  .done(function(data){
  var myData = (data);
  console.log(myData[0].kpi);
Array.prototype.mapProperty = function(property) {
      return this.map(function (obj) {
       return obj[property];
      });

     };

// Example: myData.mapProperty('rank') to get an array of all ranks 
 lineChartData = {
    labels : myData.mapProperty('column_name'),
     datasets : [
       {
   label: "Data",
   fillColor : "rgba(220,220,220,0.2)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   pointHighlightFill : "#fff",
   data : myData.mapProperty('count')
  }
       ]
  };

 //window.onload = function(){
console.log("cheerio")
 var ctx = document.getElementById("canvas").getContext("2d");
 window.myLine = new Chart(ctx).Line(lineChartData);
 //}  

}); </script>

Leave a comment