I am trying to feed data to highcharts client. Currently highcharts expects data in below format.
[
[1515122457593,47,64.17,12.77,23.91,15969798],
[1515122497615,23.91,47.97,14.19,30.81,15969798],
[1515122537619,30.81,49.42,13.34,27.76,15969798],...
]
However, I could not find a way to store in same format in MongoDB. I think one possibility is as below.
{
{ "_id": 1, "time":1515122457593, "O":47, "H":64.17, "L":12.77, "C":23.91, "V":15969798 },
{ "_id": 2, "time":1515122497615, "O":23.91, "H":47.97, "L":14.19, "C":30.81, "V":15969798 },
{ "_id": 3, "time":1515122537619, "O":30.81, "H":49.42, "L":13.34, "C":27.76, "V":15969798 },
...
}
My questions are in both directions.
Direction 1: How do I make above mongodb friendly json format to be read by Highcharts OHLC.
Direction 2: How do I store Highcharts friendly data series in Mongodb?
Kindly share example as I could not find online any snippets that could help and all my trials are in vain. I got a hint here, but could not develop it further for my OHLC format (I am newbie to JS and webdev)
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]});
You should be able to achieve the exact document structure required by Highcharts using the below schema:
var schema = new Schema({
data: [[Number]] // array of array of numbers
})
Related
I am creating a stacked column chart, and really just testing highcharts out. I would like to hear how people suggest solving the following case:
In a stacked column chart, I would need the following example code:
series: [
{ name:'seed', data: [12, 8, 9]},
{ name:'predicted', data: [121, 88, 97]}
],
xAxis: {
categories: ['tech', 'sport', 'finance']
},
This means that a single object in my db :
{ category: 'tech', seed: 12, predicted: 121 }
Needs to be split into two arrays which could introduce ordering bugs.
Is there no way to pass objects to highcharts and then manipulate them with some options?
Are you wary of depending solely on the order of elements in the data array for determining which category the elements belong to?
If so, I think the xAxis.type option might interest you:
xAxis: {
type: 'category'
},
series: [{
name: 'tech',
data: [{name:"seed", y:12}, {name:"predicted", y:121}]
}, {
name: 'sport',
data: [{name:"seed", y:8}, {name:"predicted", y:88}]
}, {
name: 'finance',
data: [{name:"predicted", y:97}, {name:"seed", y:9}]
}
]
Example: https://jsfiddle.net/ub2gwq61/
From Highcharts API Reference
In a category axis, the point of the chart's series are used for
categories, if not a categories array is defined.
I have implemented a Sankey diagram in JavaScript using Highcharts.js. I am currently trying to implement the same diagram in R using Highcharter (a wrapper of Highcharts for R).
My problem is that I am not able to set sankey.series.nodes like I did in JavaScript. The code for this in JS looks like the following:
series: [{
pointPlacement: 'on',
keys: ['from', 'to', 'weight', 'trx'],
data: data.data,
type: 'sankey',
name: 'Sankey Series',
nodes: nodes
}]
where nodes is an array of objects with the following format:
id: product.id,
name: product.product,
trx: product.trx,
color: nodeColor,
However, when I do this in R nothing happens ..
hc_add_series(pointPlacement = 'on',
data = productData,
type = 'sankey',
nodes = nodes,
name = 'Sankey Series')
I am quite lost at the moment and any help would be highly appreciated!
i want to make graph of stock quotes (downloaded from yahoo finance as csv and changed to json array), but date is in standard format(mm/dd/yyyy) but highstocks works only in unix timestamp (i guess). please give me the whole code on how to change the time's format. i know about date.parse() but i don't know how to apply this to whole data.
please help me with the code please
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: [ // Y: [Open, High ,Low, Close]
/* May 2006 */
[Date.parse("8/2/2012"), 602.84, 610.69, 600.25, 607.79, 83039600],
[Date.parse("8/3/2012"), 613.63, 617.98, 611.56, 615.7, 86230200],
[Date.parse("8/6/2012"), 617.29, 624.87, 615.26, 622.55, 75525800],
[Date.parse("8/7/2012"), 622.77, 625, 618.04, 620.91, 72611700]
["8/7/2012", 622.77, 625, 618.04, 620.91, 72611700],
["8/6/2012", 617.29, 624.87, 615.26, 622.55, 75525800],
["8/3/2012", 613.63, 617.98, 611.56, 615.7, 86230200],
["8/2/2012", 602.84, 610.69, 600.25, 607.79, 83039600],
["8/1/2012", 615.91, 616.4, 603, 606.81, 96125400]
],
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
}
}]
});
});
});
i'm inputting the data manually,still i don't know the use of sample data
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
When you get data from json, you need to use map your dates to timestamps, in the preprocessing. Use any loop / condition to prepare new array with series, including correct values.
Can someone please take a look at this example? It works when I use a smaller data set, but when I use a larger historical data set, it stops working and the data series does not render. Please help.
Small data set example - http://jsfiddle.net/Yrygy/250/
Large data set example (SERIES DOES NOT RENDER) - http://jsfiddle.net/Yrygy/249
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 120
},
navigator: {
series: {
data: chartData
}
},
series: [{
data: [null],
markers: {
enabled:true
}
}]
});
You need to have your data sorted in ascending time order. Currently your "large" data set is not.
There is a couple of problems. First of all, as said #wergeld, you need to sort your data:
chartData.sort(function(a,b) { return a[0] - b[0]; });
Then the problem is with setting option for navigator:
navigator: {
series: [{
name: 'MSFT',
data: chartData
}]
},
When should be an object, not an array:
navigator: {
series: {
name: 'MSFT',
data: chartData
}
},
And the last one, do you really need to set xAxis.min/max ? Escpecially to values 2 and 4. when you have timestamps like
Working demo: http://jsfiddle.net/Yrygy/253/
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data