score:3
Accepted answer
You should use parseFloat() to change string into number for Ask / High values.
data.push([
parseInt(jsonData[i].InserTime.substr(6)),
parseFloat(jsonData[i].Ask),
parseFloat(jsonData[i].High),
parseFloat(jsonData[i].Low),
parseFloat(jsonData[i].Bid)]);
Here's a full 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)),
parseFloat(jsonData[i].Ask),
parseFloat(jsonData[i].High),
parseFloat(jsonData[i].Low),
parseFloat(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,
}]
});
}
});
Source: stackoverflow.com
Related Query
- How do I use Highcharts to display candlestick with small values?
- How to use highcharts with angular 5?
- How To Use Epoch Time With Highcharts Series Data?
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- How to use highcharts with princeXML?
- Highcharts How to get decimal point values on y-axis with big numbers
- How do I use an Highcharts Solid Gauge in angular 6 with typescript?
- How to display HighCharts with tables
- How to use Highmaps and Highcharts with Meteor?
- how to display 2 same highcharts without duplicate the code
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- How to display Highcharts legends with their corresponding chart?
- how to use highcharts tooltip formatter in python code
- How to display line break for irregular time series with highcharts
- How to connect null values with dotted lines in highcharts
- Highcharts - Dealing with small values in Funnel chart
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- How to convert string array to ints to use with Highcharts
- How can I display crosshair labels on top of the chart with Highcharts
- How to display yearly values on xAxis in Highcharts
- How is the proper way to use HighCharts with StencilJS?
- How to use highcharts in reactjs with fetched data from API
- Highcharts how to use a percentage area with time
- How to use axios to fetch data from servlet and then crossfilter it and display via highcharts
- How to use highcharts bubble to display more than 3 columns data?
- highcharts with scrollbar, how to display all items on download image?
- In highcharts how can I provide data with values x, y, title so that I can put the title in the tooltip?
- How to display only last point on highcharts and that point should travel with chart line?
- highcharts gauge use with negative values
- Highcharts - How to choose a range to display with javascript?
More Query from same tag
- Highcharts Ajax Json not displaying Chart
- highcharts customize tooltip for a single point
- How to reduce the space between Bars with a fixed bar width in Highcharts column chart?
- How can I have both a legend and data labels, with different labels, in Highcharts?
- How can I get inner slice when clicking on an outer slice in a HighChart donut chart?
- Data won't echo on Highcharts
- how to reduce/increase gap between horizontal legends- highcharts
- Show labels outside in sunburst highchart
- Highcharts - accessing overlaying data points
- How to draw points with highcharts-react?
- Highcharts dont display statistics with MySQL Query
- Highcharts replacing column/tooltip label
- How to view and or read contents of a JSON object in C#?
- Issue loading JSON in Highstock
- Add Extra info like Data attribute or id in heat map highcharts jquery
- Showing/Hiding child nodes and links in Highcharts Networkgraph
- HighCharts Not Adding Series Data Points
- How to force a line break without using <br/>
- Highcharts mouse tracking/mouseover feature is slow on chrome but not slow in firefox or IE
- Highcharts pie graph with two rings filtering
- Highcharts Maps - Displaying data on Highmaps
- Download all high chart output from R shiny
- Set axis extremes dynamically on drilldown
- Isolate a single series on Highcharts line chart
- Slanted highcharts axis labels overlap with legend
- Highcharts issue when start index is less than 0
- How to use html/unicode symbols as marker-symbols in highcharts?
- Highcharts diffent color @ Temperature Line
- Tooltip overlap issue in highchart, can not select plotpoint on same datetime?
- Highcharts: Cannot read property 'parts/Globals.js' of undefined