I have been searching stack overflow and other sites on this one for a few days and can't find enough information to solve my exact problem. I have also referred to 'create web charts with JqPlot' by Fabio Nelli, while a great book it does not address my circumstances. I do not have a great grasp of java script which may be some of my problem. I am trying to get some data charted into a bar graph and think that the data is not getting encoded to JSON in the required format leading to the failure. I may also not have my JavaScript component of my php document structured correctly. (My source MySQL data is being handled by PhP and builds the required table - my theory behind this is to pull a table up and use to compare with a JqPlot Chart).
My bits of relevant code Head:
<script type='text/javascript'> chart_data = ".json_encode($data_array).";</script>
Body (after fetching php variables as array through a html form filtering the data)
// creates array for json_encode
$data_array [] = array($inj_data2['count'], $damage_data2['count']);
Section that outputs the chart canvas and hopefully colorful data (using Bootstrap)
print ("<div class='panel-group'>
<div class='panel panel-default'>
<div class='col-sm-6 col-md-6 col-lg-6'><div class='row'><div id='chartdiv'></div>");
And for page loading speed the Jq Plot is at the foot of the script:
?>
</body> <!-- side bar chart source info http://www.jqplot.com/examples/barTest.php# !-->
<script type="text/javascript" src="jquerychart/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquerychart/jquery.jqplot.js"></script>
<script type="text/javascript" src="jquerychart/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="jquerychart/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="jquerychart/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="jquerychart/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="jquerychart/jquery.jqplot.css" />
<script>
$(document).ready(function(){
var plot4 = $.jqplot('chartdiv', [chart_data],
{
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true, formatString: '%'}
},
legend: {
show: true,
location: 'e',
placement: 'within'
},
title:"Incidents by Department",
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
</html>
I have checked the json_encode array with
print json_encode($data_array);
And this is output to the browser
[["5","1"],["1","1"],["1","0"]]
These data sets are what I am after, however I believe the " " symbols are what is causing the issue?
I also wish to be able to create labels based on variables (expecting this will require JSON also) and would appreciate pointers on this. My constraints are that I do not want any AJAX calls and wish to be able to pass all the data within the php script this is written in.
The current code returns a blank canvas below the table, and Firebug console returns:
Error: No data specified
All feedback will be greatly appreciated, please remember JavaScript is not a strong point for me. The chart also works if data is manually input to the code (ruling out any basic issues around resources). Cheers Jase
I have solved the problem (99%) I had - it may not be pretty or technically correct ..... if it can be improved upon please let me know......
Converting the variables to an array and removing the double quotes - I needed to declare each variable as the variable type within the array. Within the php body
$data_array [] = array((int)$inj_data2['count'],(int)$damage_data2['count']);
This was the bit that stumped me for days... Convert the php array into a JSON object using json_encode. I knew I had to create a javascript object but a little stuck. I was mistakenly missing out the php tags in the javascript My fix was to place this code in the foot (after the body close tag) of he document like this:
<script type='text/javascript'> var chart_data = <?php echo json_encode($data_array);?></script>
Then declare this javascript variable within the JqPlot code like this:
var plot4 = $.jqplot('chartdiv', chart_data,
{
Hopefully this can assist someone in the future I still need to work out how to add the required text labels from variables. Cheers Jase