JSON, HighCharts/HighStock, DBSlayer - 데이터 표시

Question

내가 HighCharts/HighStock을 사용하여 표시하고 싶은 일부 가격 데이터가있는 MySQL 데이터베이스가 있습니다. 그러나 MySQL에서이 데이터를 가져 오는 방법에 대해 실제로 어떻게 확신 할 수 있는지 잘 모르겠습니다. (JSON 레이어로서의 DBslayer를 통해) 높은 차트로 표시됩니다 (예를 들어 자신의 사이트에서 발견 한 예는 도움이되지 않으며 검색은 좋은 방법이 아닙니다).

그래서 기본적으로 시스템은 다음과 같습니다

MySQL <---> DBSlayer Service <---> JSON Requests to DBSlayer <---> Web page with charts - send query to DBSLayer 

요컨대 DBSlayer 쿼리는 다음과 같습니다 MySQL의 전망 :

DATE TIME | Symbol1 | Price 1 | Symbol2 | Price 2 | Price3 
2011-09-01| ABC  | 12.3 | XYZ  | 67.8 | 0.0852 

또는 더 나은 예는 쿼리에서 반환 된 JSON입니다 ~ DBSlayer :

{"RESULT" : {"HEADER" : ["id" , , "authorID" , "msgDate" , "obj_obj" , "obj_subj" , "obj_diff" , "subj_pos" , "subj_neg" , "subj_diff" , "pos_lex" , "neg_lex" ] , 
    "ROWS" : [["4e0f1c393bfbb6aa4b7278c2" , "27" , "2011-06-30 13:59:47" , 0.0275171 , 0.972483 , -0.944966 , 0.993814 , 0.00618577 , 0.987628 , 1 , 0 ] , 
    ["4e0f1c393bfbb6aa4b7278c3" , "36324" , "2011-06-30 13:59:31" , 0.364953 , 0.635047 , -0.270095 , 0.0319281 , 0.968072 , -0.936144 , 3 , 1 ] , 
    ["4e0f1c393bfbb6aa4b7278c4" , "12134" , "2011-06-30 13:59:28" , 0.0112589 , 0.988741 , -0.977482 , 0.857735 , 0.142265 , 0.715469 , 1 , 1 ] ] , 
    "TYPES" : ["MYSQL_TYPE_VAR_STRING" , "MYSQL_TYPE_VAR_STRING" , "MYSQL_TYPE_DATETIME" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_LONG" } , "SERVER" : "db-webPrices"} 

하이 차트에는 어떻게 배포해야합니까? Node.js를 사용하여 먼저 쿼리를 래핑해야합니까 (Node.js가 DBSlayer 라이브러리에 있지만 Node.js의 최신 버전에서 작동하지 않음)

이 데이터 및 형식을 얻기 위해 어떻게 JQuery를 사용합니까? 이와 같은 HighStock 차트 : http://www.highcharts.com/stock/demo/multiple-series/gray

기본 HighCharts 데이터 소스로 CSV 파일을 사용하여 데모는 다음과 같습니다

$(function() { 
     var seriesOptions = [], 
      yAxisOptions = [], 
      seriesCounter = 0, 
      names = ['DJI', 'SENTIMENT', 'GOOG', 'GS', 'SENTIMENT-Z', 'DJI-Z'], 
      colors = Highcharts.getOptions().colors; 

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

      $.get(name +'.csv', function(csv, state, xhr) { 

       // inconsistency 
       if (typeof csv != 'string') { 
        csv = xhr.responseText; 
       } 

       // parse the CSV data 
       var data = [], header, comment = /^#/, x; 

       $.each(csv.split('\n'), function(i, line){ 
        if (!comment.test(line)) { 
         if (!header) { 
          header = line; 
         } 
         else { 
          var point = line.split(';'), date = point[0].split('-'); 

          x = Date.UTC(date[2], date[1] - 1, date[0]); 

          if (point.length > 1) { 
           // use point[4], the close value 
           data.push([ 
            x, 
            parseFloat(point[4]) 
           ]); 
          } 
         } 
        } 
       }); 

       seriesOptions[i] = { 
        name: name, 
        data: data, 
        yAxis: i 
       }; 

       // create one y axis for each series in order to be able to compare them 
       yAxisOptions[i] = { 
        alternateGridColor: null, 
        gridLineWidth: i ? 0 : 1, // only grid lines for the first series 
        opposite: i ? true : false, 
        minorGridLineWidth: 0, 
        title: { 
         text: name, 
         style: { 
          color: colors[i] 
         } 
        }, 
        lineWidth: 2, 
        lineColor: colors[i] 
       }; 

       // As we're loading the data asynchronously, we don't know what order it will arrive. So 
       // we keep a counter and create the chart when all the data is loaded. 
       seriesCounter++; 

       if (seriesCounter == names.length) { 
        createChart(); 
       } 
      }); 
     }); 



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

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

       rangeSelector: { 
        selected: 1 
       }, 

       title: { 
        text: null 
       }, 

       xAxis: { 
        type: 'datetime', 
        maxZoom: 14 * 24 * 3600000, // fourteen days 
        title: { 
         text: null 
        } 
       }, 
       yAxis: yAxisOptions, 

       series: seriesOptions 
      }); 
     } 

    }); 
    </script> 
    <script type="text/javascript" src="js/themes/gray.js"></script> 

예제를/코드는 크게 감상 할 수

! 건배!

Answer 1

제공된 데모 페이지의 소스를 보면 CSV 데이터로 어떻게 완료되었는지 확인할 수 있습니다. JSON 결과는 사용하기가 훨씬 쉽습니다.

업데이트 : documentation에는 데이터 표시 방법에 대한 자세한 정보가 표시됩니다.