Highcharts JSON with user inputs

Question

I am using HighCharts.

 $(function ()
   {
       var chart;

       $(document).ready(function ()
       {
           $.getJSON("json/PowerCurve.php", function (json)
           {

               chart = new Highcharts.Chart({
                   chart: {
                       renderTo: 'container',
                       zoomType: 'xy'
                   },
                   title: {
                       text: 'Power Curve'
                   },
                   subtitle: {
                       text: 'Source: .wsd SCADA File'
                   },
                   xAxis: {
                       title: {
                           enabled: true,
                           text: 'wind speed [m/s]'
                       },
                       startOnTick: true,
                       endOnTick: true,
                       showLastLabel: true,
                       min: 0
                   },
                   yAxis: {
                       title: { text: 'Power [kW]' },
                       min: 0
                   },
                   legend: {
                       layout: 'vertical',
                       align: 'left',
                       verticalAlign: 'top',
                       x: 100,
                       y: 70,
                       floating: true,
                       backgroundColor: '#FFFFFF',
                       borderWidth: 1
                   },
                   plotOptions: {
                       scatter: {
                           marker: {
                               radius: 1,
                               states: {
                                   hover: {
                                       enabled: false,
                                       lineColor: 'rgb(100,100,100)'
                                   }
                               }
                           },
                           states: {
                               hover: {
                                   marker: {
                                       enabled: false
                                   }
                               }
                           },
                           tooltip: {
                               headerFormat: '<b>{series.name}</b><br>',
                               pointFormat: '{point.x} m/s, {point.y} kW'
                           }
                       }
                   },
                   series: [{
                       type: 'scatter',
                       name: 'WEC Power Curve',
                       color: 'rgba(46, 138, 138,  1)',
                       data: json[0]
                   }, {

                       type: 'line',
                       lineWidth: 1,
                       dashStyle: 'solid',
                       name: 'Power Curve',
                       color: 'rgba(195, 59, 69,  1)',
                       data: json[1]
                   }],
                   credits: { enabled: false }
               });

This is my php file:

<?php
$con = mysql_connect("localhost","r","admin");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("scada", $con);

    $query1 = mysql_query("SELECT avgwind, avgpower FROM tblwsd ORDER BY avgwind, avgpower ASC;");

    $query2 = mysql_query("SELECT wind, `E-82` FROM tblpowercurve ORDER BY wind, `E-82` ASC;");

$serie1 = array();
$serie2 = array();

while($r = mysql_fetch_array($query1)) {
    $avgwind = $r['avgwind'];
    $avgpower = $r['avgpower'];
    $serie1[] = array($avgwind, $avgpower);
}

while($r = mysql_fetch_array($query2)) {
    $avgwind = $r['wind'];
    $avgpower = $r['E-82'];
    $serie2[] = array($avgwind, $avgpower);
}


$result = array();
array_push($result,$category);

echo json_encode(array($serie1, $serie2), JSON_NUMERIC_CHECK);

mysql_close($con);

?>

This is working as expected. I want to call the json file with some user inputs to use on the query. How can I do this?

like:

$.getJSON("json/PowerCurve.php?USERINPUT?USERINPUT", function (json)

Have you tried what you suggested? Looks like it would work to me. You would just need to do what you need with the params vis $_GET in the PowerCurve.php file before it returns the json. — Mattt, Dec 17 '13 at 15:29
I have another data.php where the Chart and the user input is shown. How do I pass the values from the user input to the PowerCurve.php? — devwebapp, Dec 17 '13 at 15:34
Right, but what do you need to use the params for? I was guessing it was to narrow the json results or to grab specific data. Not sure what the other file would have to do with passing params to the powercurve file — Mattt, Dec 17 '13 at 15:36
Thank you for your time. So, I need the user to enter two dates Start and end date. Then I want to use this values to narrow my sql result, and then pass them o json and re-draw the chart! — devwebapp, Dec 17 '13 at 15:38
I only use PDO. But unfortunnely i cannot get the same array with PDO. Can you help to change my code to PDO? Thank you very much — devwebapp, Dec 17 '13 at 15:39

score 0 · Accepted Answer · answered Dec 17 '13 at 15:41

0

$.getJSON("json/PowerCurve.php?start=value&end=value", function (json))

Using this, you would get the values in the PowerCurve.php script as $_GET['start'] and $_GET['end']. You would use those to query the data based on the date range. Get the results and return them to the chart as json. All you are really doing is narrowing the results of the json file, nothing else should need to change.

answered Dec 17 '13 at 15:41

Mattt

1,780
14
15

Thank you! I'll try your suggestion. And do you have any idea on how can I re draw the chart? – devwebapp Dec 17 '13 at 15:43
Have a look here, this may help http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts – Mattt Dec 17 '13 at 15:45
One more thing, if possible, What is the best way to pass the values from the user input to the jquery $.getJSON("json/PowerCurve.php?start=value&end=value", function (json)) – devwebapp Dec 17 '13 at 15:47

Highcharts JSON with user inputs

1 Answers1