StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHighCharts: local variable not working in "data:"
text
Body
copied!<p>I had a highcharts temperature gauge working when I put the javascript inline in my php file. However, I wanted to put the highcharts code in an "included" js file. Before, when I coded the javascript inline with the php file, it looked something like this:</p> <pre><code>// html and php above // this inline code below works <script> $(document).ready(function(){ // here i simply accessed a php variable from var $temperature_F = <?php echo round((($temp["Temperature"] * 9) / 5) + 32, 1); ?>; var chart1 = new Highcharts.Chart({ // code initializing everything else in the highchart series: [{ data: [{ id: 'temperature', y: $temperature_F, // value taken from php variable tooltip: { valueSuffix: ' \xB0F' } }] }] }); }) </script> // html and php below </code></pre> <p>Now, all I did was take this chunk of code, put it in a .js file and "include" it. I now just call a Print function from the php file, defined in my .js file, passing it the php variables I need. Like this:</p> <pre><code><script type="text/javascript"> PrintTemperatureChart(1, '<?php echo $temperatureToDisplay; ?>', '<?php echo $dewPointToDisplay; ?>', '<?php echo $relativeHumidityToDisplay; ?>'); </script> </code></pre> <p>From within this function, I am able to "alert" out the expected php variables that I passed in, however, when I attempt to set "data:" to one of these variables, it breaks the chart. When I replace the variable with a dummy hard-coded value, it works. So I know just about everything else is set up correctly. Here's the function in the .js file:</p> <pre><code>function PrintTemperatureChart(unitsMode, temperature, dewPoint, relativeHumidity){ alert(unitsMode + ", " + temperature + ", " + dewPoint + ", " + relativeHumidity); $(function () { alert("The passed temperature = " + temperature); var $theTemp = temperature; var chart1 = new Highcharts.Chart({ chart: { renderTo: 'Temperature_Chart', type: 'gauge', margin: 0 }, title: { text: 'Temperature' }, pane: { startAngle: -150, endAngle: 150, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF'], [1, '#333'] ] }, borderWidth: 0, outerRadius: '109%' }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#333'], [1, '#FFF'] ] }, borderWidth: 1, outerRadius: '107%' }, { // default background }, { backgroundColor: '#DDD', borderWidth: 0, outerRadius: '105%', innerRadius: '103%' }] }, yAxis: { title: { text: '\xB0F' }, min: 0, max: 120, minorTickInterval: 1, minorTickWidth: 1, minorTickLength: 5, minorTickPosition: 'inside', minorGridLineWidth: 0, minorTickColor: 'black', tickInterval: 10, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: 'black', }, series: [{ name: 'Temperature', data: [$theTemp], // this doesn't work // this is the js var set to the passed in temperature // I've also just tried using the param directly // only a hard coded value will work // i.e. data: [56], tooltip: { valueSuffix: ' \xB0F' } }] }); }); </code></pre> <p>}</p> <p>I just need to use these variables passed in as data in my chart. Thanks in advance!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload