javascript - Pass JSON-encoded PHP Variable to HighCharts -

i'm attempting insert json-encoded mysql results set php variable highcharts script.

i have inserted mysql results list php variable highcharts in different instance, formatted highchart-acceptable data group concatenating commas , apostrophes in sql select statement (which dirty effective way it). goal make chart display metadata in tooltip, cannot work, think close have.

--

here php script retrieve data mysql database , json encode it:

$mysqli = new mysqli('localhost','username','password','database');  $myarray = array();  if ($result = $mysqli->query(" select time_minutes.minutes*60+time_seconds.seconds y, run_date.id id, run_date.date rundate, run_temp.temperature temperature, run_conditions.weather conditions, run_hydration.hydration_level hydration run_conditions, run_date, run_hydration, run_notes, run_temp, time_minutes, time_seconds run_date.id = run_conditions.id , run_date.id = run_hydration.id , run_date.id = run_notes.id , run_date.id = run_temp.id , run_date.id = time_minutes.id , run_date.id = time_seconds.id ")) {      while($row = $result->fetch_array(mysql_assoc)) {             $myarray[] = $row;     } }  $raw_json = json_encode($myarray);  $json_without_quotes = str_replace('"', "", $raw_json);  $result->close(); $mysqli->close(); ?> 

the y value intend bar-height be; rest metadata (temperature, conditions, etc.) appear in tooltip.

the raw_json output looks this:

[{"y":"1500.00", "id":"1", "rundate":"2015-10-19", "temperature":"87", "conditions":"humid , hot", "hydration":"8"}, {"y":"1474.48", "id":"2", "rundate":"2015-10-21", "temperature":"80", "conditions":"light rain", "hydration":"9"}, {"y":"1442.01", "id":"3", "rundate":"2015-10-22", "temperature":"82", "conditions":"sunny", "hydration":"4"}] 

the json_without_quotes output looks this:

[{y:1500.00, id:1, rundate:2015-10-19, temperature:87, conditions:humid , hot, hydration:8}, {y:1474.48, id:2, rundate:2015-10-21, temperature:80, conditions:light rain, hydration:9}, {y:1442.01, id:3, rundate:2015-10-22, temperature:82, conditions:sunny, hydration:4}]  

below base highcharts script (which functional) i'm attempting remodel using own data (found @ this jsfiddle).

<script> $(function () {     var chart = new highcharts.chart({         chart: {             renderto: 'chartchartchart',             type: 'column'         },         xaxis: {             categories: [(a dymanically-generated list of dates)]         },         series: [{             data: [{ 

this insert json_without_quotes variable; data below formatted correctly, notice contains integers; must changed make accept strings arguments, not know must changed.

                y: 3,                 locked: 1,                 unlocked: 1,                 potential: 1,             }, {                 y: 5,                 locked: 2,                 unlocked: 1,                 potential: 3,             }, {                 y: 7,                 locked: 3,                 unlocked: 1,                 potential: 3,             }]         }],         tooltip: {             formatter: function() {return ' ' +                 'locked: ' + this.point.locked + '<br />' +                 'unlocked: ' + this.point.unlocked + '<br />' +                 'potential: ' + this.point.potential;             }         }     }); }); </script> <div id="chartchartchart" style="height: 400px"></div> 

thanks in advance help!

you need convert output javascript object or else javascript consider string , read "['main item', 'second item', 'third item']" instead of object. can using json.parse() function in javascript.

try replace [(a dymanically-generated list of dates)] json.parse("<?php echo $raw_json; ?>");