2013-03-13 4 views
0

데이터를 사용하여 생성하려고하는 차트의 JSFiddle을 만들었습니다.하이 스톡 차트에 정확한 날짜가 표시되지 않고 날짜별로 확대되지 않습니다.

mySQL에서 내 데이터를 성공적으로 내 보내면 유닉스 타임 스탬프가 올바른 것처럼 보입니다. 첫 번째 데이터는 2004 년 1 월 1 일과 마지막 어제 (2013 년 3 월 12 일)에 시작됩니다. 그러나 차트에는 1 월 13 일 -16 일과 내가 필요로하지 않는 시간 만 표시됩니다. IE 2004 - 2013 전체 데이터 범위를 표시해야합니다. 날짜 별 확대/축소가 작동하지 않는 것 같습니다.

내 JSFiddle 링크는 다음과 같습니다

http://jsfiddle.net/petenaylor/rJDRB/1/

<script type="text/javascript"> 

(function($){ // encapsulate jQuery 

$(function() { 
var seriesOptions = [], 
    yAxisOptions = [], 
    seriesCounter = 0, 
    names = ['Electric', 'Oil', 'Gas'], 
    colors = Highcharts.getOptions().colors; 

$.each(names, function(i, name) { 

    $(function() { 

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
    // Create the chart 
    window.chart = new Highcharts.StockChart({ 
     chart : { 
      renderTo : 'container' 
     }, 

     rangeSelector : { 
      selected : 1 
     }, 

     title : { 
      text : 'Energy Prices' 
     }, 

     series : [{ 
      name : 'Electric', 

      <?php 
      $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error()); 
      while ($row = mysql_fetch_array($result)) { 
      extract($row); 
      $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time 
      $data1[] = "[$date, $electric]"; 
      } 
      ?> 


      data: [<?php echo join($data1, ',') ?>], 
      tooltip: { 
       valueDecimals: 2 
      } 
     },{ 
      name : 'Oil', 


      <?php 
      $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error()); 
      while ($row = mysql_fetch_array($result)) { 
      extract($row); 
      $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time 
      $data2[] = "[$date, $oil]"; 
      } 
      ?> 


      data: [<?php echo join($data2, ',') ?>], 
      tooltip: { 
       valueDecimals: 2 
      } 
     },{ 
      name : 'Gas', 


      <?php 
      $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error()); 
      while ($row = mysql_fetch_array($result)) { 
      extract($row); 
      $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time 
      $data3[] = "[$date, $gas]"; 
      } 
      ?> 


      data: [<?php echo join($data3, ',') ?>], 
      tooltip: { 
       valueDecimals: 2 
      } 
     }] 
    }); 
}); 

}); 

}); 



// create the chart when all data is loaded 
function createChart() { 

    chart = new Highcharts.StockChart({ 
     chart: { 
      renderTo: 'container' 
     }, 

     rangeSelector: { 
      selected: 4 
     }, 

     yAxis: { 
      labels: { 
       formatter: function() { 
        return (this.value > 0 ? '+' : '') + this.value + '%'; 
       } 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 2, 
       color: 'silver' 
      }] 
     }, 

     plotOptions: { 
      series: { 
       compare: 'percent' 
      } 
     }, 

     tooltip: { 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
      valueDecimals: 2 
     }, 

     series: seriesOptions 
    }); 
} 

}); 
})(jQuery); 

감사합니다!

답변

0

JS 타임 스탬프가 필요하고 x로 오름차순으로 정렬되기 때문에 데이터 x는 1000을 곱해야합니다.

+0

도움을 주셔서 감사합니다. jquery에서 조정합니까? –

+0

글쎄, 당신이 필요로하는 것은 가치를 얻고 1000 배가되기 때문에 jquery에서 조정한다는 것은 무엇을 의미합니까? –

+0

죄송합니다. 어떤 데이터에 1000을 곱해야하는지 알려주십시오. 가치있는 데이터를 의미합니까? 내 예에서와 같이 석유, 가스, 전기 값은? –

관련 문제