2013-12-17 4 views
0

HighCharts를 사용 중입니다. 예상대로이가 작동Highcharts 사용자 입력이있는 JSON

<?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); 

?> 

:

$(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 } 
       }); 

이 내 PHP 파일입니다. 쿼리에 사용할 사용자 입력이있는 json 파일을 호출하고 싶습니다. 어떻게해야합니까?

같은 :

$ .getJSON ("JSON/PowerCurve.php UserInput 사용자가 UserInput 사용자가?", 기능 (JSON), 당신은 PowerCurve.php의 값을 얻을 것이 사용

+0

제안을 시도 했습니까? 나에게 일해. json을 반환하기 전에 PowerCurve.php 파일에서 $ _GET 매개 변수로 필요한 것을 수행하면됩니다. – Mattt

+0

차트와 사용자 입력이 표시된 다른 data.php가 있습니다. 사용자 입력 값을 PowerCurve.php로 전달하는 방법은 무엇입니까? – devwebapp

+0

맞습니다.하지만 params를 사용하려면 무엇이 필요합니까? json 결과를 좁히거나 특정 데이터를 가져 오는 것이라고 생각했습니다. 다른 파일이 매개 변수를 powercurve 파일에 전달하는 것과 어떤 관련이 있는지 확실하지 않음 – Mattt

답변

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

스크립트를 $ _GET [ 'start'] 및 $ _GET [ 'end']로 사용하면 날짜 범위를 기준으로 데이터를 쿼리 할 수 ​​있습니다. 결과를 가져 와서 json으로 차트에 반환하십시오. json 파일의 결과를 좁히면 아무것도 바꿔줘야합니다.

+0

고마워요! 나는 너의 제안을 시도 할 것이다. 차트를 다시 그릴 수있는 방법에 대한 아이디어가 있습니까? – devwebapp

+0

여기를 보시면 도움이 될 것입니다. http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts – Mattt

+0

가능하면 가장 좋은 방법은 무엇입니까? 사용자 입력에서 jquery에 이르는 값 $ .getJSON ("json/PowerCurve.php? start = value & end = value", function (json)) – devwebapp

관련 문제