2013-03-14 23 views
0

創建圖表我讀了很多有關導入CSV的職位,我已經看了其中的一些例子。我正在嘗試使用Insert Javascript插件在WP3.5.1中顯示圖表。使用數據或CSV在Highstock

我試圖使用數據創建圖表從數據中使用Apple(AAPL)的演示中使用的數據,它可以在他們的數據轉儲(aapl-ohlcv.json)在highcharts網站上找到。他們的高位圖是他們燭臺和數量。

我不認爲我可以創建一個JSON文件(超出了我的能力給所涉及的PHP)和導入CSV似乎並沒有工作。所以我的問題是:

1我該如何格式化一個可以工作的csv文件,以及哪些數據基於上面的數據,我可以在<div id="data.csv" style="display: none">這個文章中加入?

2什麼是我需要解析這些數據的代碼?

我試過 -

$.get = function(id, fn) { 
     fn(document.getElementById(id).innerHTML);   
    }; 

    $.get('data.csv', function(data) { 
$(function() { 

,但是這說明沒有數據的圖表,但也許這是因爲數據格式不正確。此外,它需要在郵件中包含數據(這不是我的首選選項)。

理想情況下,我想創建一個csv文件(基於上面的Apple數據,但對於另一個股票/產品,以相同的格式獲取相同類型的圖表),並將其導入到我的文章中。我已經嘗試創建這樣的文件並引用它們,但正如我所說這不起作用。

任何想法非常讚賞。請參考指定的數據 - 謝謝。

添加了這個作爲編輯的一部分:

OK,讓我重新短語,是因爲已經與其他的圖表工作,我可以看到我不打算找到解決的辦法。我想把構成蠟燭圖和體積圖的圖表數據作爲直線數據數組添加到我的javascript中。你能告訴我如何做到這一點?

源數據文件的格式如下(僅一個月):

/* AAPL historical OHLC data from the Google Finance API */ 
[ 
/* Mar 2006 */ 
[1142553600000,64.75,65.54,64.11,64.66,29048435], 
[1142812800000,65.22,65.46,63.87,63.99,21627764], 
[1142899200000,64.29,64.34,61.39,61.81,48048714], 
[1142985600000,62.16,63.25,61.27,61.67,48087166], 
[1143072000000,61.82,61.90,59.61,60.16,51054888], 
[1143158400000,60.25,60.94,59.03,59.96,38293616], 
[1143417600000,60.35,61.38,59.40,59.51,39601685], 
[1143504000000,59.63,60.14,58.25,58.71,48944176], 
[1143590400000,59.13,62.52,57.67,62.33,83839008], 
[1143676800000,62.82,63.30,61.53,62.75,49678962], 
[1143763200000,63.25,63.61,62.24,62.72,29113658], 

原來JS如下:

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-  ohlcv.json&callback=?', function(data) { 

     // split the data set into ohlc and volume 
     var ohlc = [], 
      volume = [], 
      dataLength = data.length; 

     for (i = 0; i < dataLength; i++) { 
      ohlc.push([ 
       data[i][0], // the date 
       data[i][1], // open 
       data[i][2], // high 
       data[i][3], // low 
       data[i][4] // close 
      ]); 

      volume.push([ 
       data[i][0], // the date 
       data[i][5] // the volume 
      ]) 
     } 

     // set the allowed units for data grouping 
     var groupingUnits = [[ 
      'week',       // unit name 
      [1]        // allowed multiples 
     ], [ 
      'month', 
      [1, 2, 3, 4, 6] 
     ]]; 

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

      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'AAPL Historical' 
      }, 

      yAxis: [{ 
       title: { 
        text: 'OHLC' 
       }, 
       height: 200, 
       lineWidth: 2 
      }, { 
       title: { 
        text: 'Volume' 
       }, 
       top: 300, 
       height: 100, 
       offset: 0, 
       lineWidth: 2 
      }], 

      series: [{ 
       type: 'candlestick', 
       name: 'AAPL', 
       data: ohlc, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      }, { 
       type: 'column', 
       name: 'Volume', 
       data: volume, 
       yAxis: 1, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      }] 
     }); 

    }); 
}); 

我已經改變了這一點(只使用了少量數據)到:

`$(function() { 
    // $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) { 

     // split the data set into ohlc and volume 
     var ohlc = [], 
      volume = [], 
      dataLength = data.length; 

     for (i = 0; i < dataLength; i++) { 
      ohlc.push([ 
       data[i][0], // the date 
       data[i][1], // open 
       data[i][2], // high 
       data[i][3], // low 
       data[i][4] // close 
      ]); 

      volume.push([ 
       data[i][0], // the date 
       data[i][5] // the volume 
      ]) 
     } 

     // set the allowed units for data grouping 
     var groupingUnits = [[ 
      'week',       // unit name 
      [1]        // allowed multiples 
     ], [ 
      'month', 
      [1, 2, 3, 4, 6] 
     ]]; 

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

      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'AAPL Historical' 
      }, 

      yAxis: [{ 
       title: { 
        text: 'OHLC' 
       }, 
       height: 200, 
       lineWidth: 2 
      }, { 
       title: { 
        text: 'Volume' 
       }, 
       top: 300, 
       height: 100, 
       offset: 0, 
       lineWidth: 2 
      }], 

      series: [{ 
      type: 'candlestick', 


     name: 'AAPL', 
       data: [[1142553600000,64.75,65.54,64.11,64.66,29048435], 
[1142812800000,65.22,65.46,63.87,63.99,21627764], 
[1142899200000,64.29,64.34,61.39,61.81,48048714], 
[1142985600000,62.16,63.25,61.27,61.67,48087166], 
[1143072000000,61.82,61.90,59.61,60.16,51054888], 
[1143158400000,60.25,60.94,59.03,59.96,38293616], 
[1143417600000,60.35,61.38,59.40,59.51,39601685], 
[1143504000000,59.63,60.14,58.25,58.71,48944176], 
[1143590400000,59.13,62.52,57.67,62.33,83839008], 
[1143676800000,62.82,63.30,61.53,62.75,49678962], 
[1143763200000,63.25,63.61,62.24,62.72,29113658]] 
dataGrouping: { 
         units: groupingUnits 
        } 
      }, { 
       type: 'column', 
name: 'Volume', 
       data: [[1142553600000,64.75,65.54,64.11,64.66,29048435], 
[1142812800000,65.22,65.46,63.87,63.99,21627764], 
[1142899200000,64.29,64.34,61.39,61.81,48048714], 
[1142985600000,62.16,63.25,61.27,61.67,48087166], 
[1143072000000,61.82,61.90,59.61,60.16,51054888], 
[1143158400000,60.25,60.94,59.03,59.96,38293616], 
[1143417600000,60.35,61.38,59.40,59.51,39601685], 
[1143504000000,59.63,60.14,58.25,58.71,48944176], 
[1143590400000,59.13,62.52,57.67,62.33,83839008], 
[1143676800000,62.82,63.30,61.53,62.75,49678962], 
[1143763200000,63.25,63.61,62.24,62.72,29113658]] 
yAxis: 1, 
        dataGrouping: { 
         units: groupingUnits 
        } 

}] 

      }); 
    }); 
}); 

但是,這不會在'小提琴'中運行。我哪裏錯了?非常感謝。

+0

你嘗試把Highstock進入調試模式看到的是與數據有什麼錯誤? – 2013-03-15 12:11:42

+0

請看我上面的重新編輯來澄清。 – user2168745 2013-03-15 16:11:00

回答

-2

您可以使用WordPress插件目錄下的free IPU-Chart WP plugin。根本沒有編程(或者至少沒有太多)。

插件需要CSV和呈現酒吧餡餅甜甜圈散點圖出來的數據。您可以通過url引用csv,或者使用簡碼直接在您的頁面/文章中包含csv-data。

請參閱some usage examples

0

當我看到你有JSON的身影,但CSV應該看起來像:

1142812800000,65.22,65.46,63.87,63.99,21627764, 
1142812800000,65.22,65.46,63.87,63.99,21627764, 
1142812800000,65.22,65.46,63.87,63.99,21627764, 
1142812800000,65.22,65.46,63.87,63.99,21627764, 
1142812800000,65.22,65.46,63.87,63.99,21627764 

然後解析http://docs.highcharts.com/#preprocesssing-data-from-a-file $ 1