问题
I've read quite a lot of the posts about importing csv and I've looked at some of the examples. I am trying to show the charts in WP3.5.1 using the Insert Javascript plugin.
I'm trying to use the data which creates the chart from the data as used in the demo for Apple (AAPL) and which can be found on the highcharts website in their data dump (aapl-ohlcv.json). Their demo highstock chart is their candlestick-and-volume.
I don't think I can create a json file (beyond my competence given the php involved) and importing a csv doesn't seem to work. So my questions are:
1 how can I format a csv file which will work and which is based on the data above which I can just add into the post as in <div id="data.csv" style="display: none">?
2 what is the code I need to parse this data?
I've tried --
$.get = function(id, fn) {
fn(document.getElementById(id).innerHTML);
};
$.get('data.csv', function(data) {
$(function() {
but this shows a chart with no data but maybe this is because the data is improperly formatted. Also, it requires one to include the data in the post itself (which is not my preferred option).
Ideally, I would like to create a csv file (based on the Apple data above but for another stock/product so in this same format to obtain the same kind of chart), and import this into into my post. I have tried creating such files and referencing them but as I said this does not work.
Any ideas much appreciated. Please refer to the specified data - thank you.
Added this as part of an edit:
OK, let me re-phrase this because having worked with other charts I can see I'm not going to find a solution. I Want to take the chart data which makes up the candlestick-and-volume chart and add it into my javascript as a straight data array. Can you show me how to do this?
The origin data file has this format (just one month) :
/* 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],
the original js is as follows:
$(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
}
}]
});
});
});
I have changed this (using only a small amount of the data) to:
`$(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
}
}]
});
});
});
However, this does not run in the 'fiddle'. Where have I gone wrong? Many thanks.
回答1:
As I see you have JSON figure, but CSV should looks like:
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
Then parse http://docs.highcharts.com/#preprocesssing-data-from-a-file$1
回答2:
You could use the free IPU-Chart WP plugin available at the WordPress plugin directory. There's no programming at all (or not much at least).
The plugin takes a csv and renders bar, pie, donut, line or scatter charts out of the data. You can reference the csv by url or include the csv-data directly in your page/article with a shortcode.
See some usage examples.
来源：https://stackoverflow.com/questions/15418947/using-data-or-csv-to-create-charts-in-highstock