I am trying to display a candlestick with small values, but I cannot see candles on the chart.
Here’s an example:
HTML:
<div class="graphs">
<div id="chartEURUSDContainer" style="height: 331px; min-width: 611px"></div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
Javascript:
$(function () {
var jsonData = [{"LastModification":"04:18:45","Symbol":"EURUSD","Bid":"1.33132","Ask":"1.33157","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760060933)\/"},{"LastModification":"04:20:05","Symbol":"EURUSD","Bid":"1.33151","Ask":"1.33174","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760140625)\/"},{"LastModification":"04:21:25","Symbol":"EURUSD","Bid":"1.3312","Ask":"1.33144","High":"1.33336","Low":"1.33007","Direction":"1","InserTime":"\/Date(1358760220731)\/"},{"LastModification":"04:22:48","Symbol":"EURUSD","Bid":"1.33115","Ask":"1.33141","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760300387)\/"},{"LastModification":"04:23:48","Symbol":"EURUSD","Bid":"1.33107","Ask":"1.33132","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760361033)\/"},{"LastModification":"04:25:08","Symbol":"EURUSD","Bid":"1.33139","Ask":"1.33164","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760440193)\/"},{"LastModification":"04:26:28","Symbol":"EURUSD","Bid":"1.33202","Ask":"1.33222","High":"1.33336","Low":"1.33007","Direction":"1","InserTime":"\/Date(1358760520037)\/"},{"LastModification":"04:27:48","Symbol":"EURUSD","Bid":"1.33212","Ask":"1.33238","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760600163)\/"}]
var data = [];
fillData();
function fillData() {
for (i = 0; i < jsonData.length; i++) {
data.push([
parseInt(jsonData[i].InserTime.substr(6)),
jsonData[i].Ask ,
jsonData[i].High ,
jsonData[i].Low ,
jsonData[i].Bid
]);
}
CreateChart();
}
function CreateChart() {
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartEURUSDContainer',
type: 'candlestick',
marginRight: 10,
},
rangeSelector : {
enabled: false
},
scrollbar : {
enabled: false
},
navigator : {
enabled: false
},
series : [{
type : 'candlestick',
color: '#00FF00',
name : 'Currency Rates',
data : data,
}]
});
}
});
You should use parseFloat() to change string into number for Ask / High values.
Here’s a full example:
HTML:
Javascript:
Demo on JS Fiddle.