JSON编码数据未解析为PhP脚本中的JqPlot Chart

Question

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

Answer 1

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