Working Plot Without Using CSV Data
Using this example:
I wrote the following code to plot a simple ohlc chart:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.stockChart('chart-container', {
chart: {
type: 'ohlc'
},
title: {
text: 'OHLC Chart W/O CSV'
},
series: [{
data: [{
//date: 2016-08-01,
x: new Date('2015-08-01').getTime(),
open: 22,
high: 40,
low: 20,
close: 35,
}, {
// date: 2016-08-02,
x: new Date('2015-08-02').getTime(),
open: 32,
high: 50,
low: 30,
close: 45
}]
}]
});
</script>Experimenting with "null" values in the open and close fields shows that the application tolerates null values for open but does not print the bar if there is a null value for the close field.
Example of Using CSV in PRE Block
This example code uses embedded csv data to generate an "areaspline" chart via highcharts:
Unable to Plot OHLC Chart from CSV in PRE Block - (Solved!)
I am trying to embed csv data into the html and generate an "ohlc" style chart from the csv data. The html/script code below runs locally in Firefox. The result shows the chart layout except no data bars appear in the plot. (Edit: The code below now works due to solution provided in comment section).
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display: none">
x,open,high,low,close
1524787200000,179,180.48,178.16,178.50
1525046400000,179,180.615,178.05,178.80
</pre>
<script>
Highcharts.stockChart('chart-container', {
chart: {
type: 'ohlc'
},
title: {
text: 'OHLC Chart from CSV?'
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>The next effort will be to convert the date format in the CSV data to the timestamp format which is output from the example command: new Date('2015-08-02').getTime().