Develop Reference

How to store highcharts compatible json array data in mongodb

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
})

Highcharts navigator not working with data set

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/

Issue on Setting Up Highchats.js Index of Chart

Can you please take a look at This Demo and let me know how I can get rid of the Series 1" index!
and have actual index for the two columns or if not possible simply remove it from the chart?
I also didn't get the way that YAxis is adding Ticks to chart! Is there any way to specify the number of Ticks and Max, Min Values?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 500
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
});

You can remove the legend by adding this object to the container (right after series)
legend: {
enabled: false
}
You can set the tick interval on the yAxis like so:
yAxis: {
tickInterval: 25
}
It's all documented here: http://api.highcharts.com/highcharts
I encourage you to read it and experiment with the examples in-line.

It looks like that column grafs don't support legend. If you want remove it just write under initialize
$(function () {
$('#container').highcharts({
....
....
....
});
$('.highcharts-legend').remove();
});
It should work. :)

Highchart ticks start point change when categories names are set

I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?

You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/

I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.

Extjs4 chart not plotting correct data

I created a simple line chart in Extjs4 for one of my projects, and the chart is not plotting the right data.
The chart uses the same store as the grid, but not showing the same data. Is there any way to trace the source of the problem, if not fixing it altogether?
The following is the code I use to generate the chart.
{
xtype: 'chart',
animate: true,
shadow: true,
store: 'Dataalls',
legend: {
position: 'top'
},
axes: [{
type: 'Numeric',
position: 'left',
title: 'Wind Speed',
fields: ['windspeed'],
grid: true
}, {
type: 'Category',
position: 'bottom',
title: 'Time',
fields: ['time']
}],
series: [{
type: 'line',
axis: 'left',
xField: ['time'],
yField: ['windspeed']
}]
}
(I tried using type: 'Time' for the x axis but gets the error "date.getFullYear is not a function" )

For the date.getFullYear() I suspect your date string is not parsable into a Date object. Could you post your other supporting code, ideally the full code of the Store and Grid? If you'd like to use the Time Axis you'll need to convert your date String into a date object via something along the lines of:
Ext.define('Your.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'dateString', type: 'string'},
{name: 'date',
convert: function(value, record) {
year = value.substring(0,4);
month = value.substring(5,7).replace(/^[0]+/g,"");
day = value.substring(8,10).replace(/^[0]+/g,"");
hour = value.substring(11,13).replace(/^[0]+/g,"");
// etc for min, sec, millis
return new Date(year, (month - 1), day, hour, 0, 0);
}
}
]
});
For debugging the chart not displaying correctly, I'd place assign your chart object to a var and in Firebug breakpoint after that variable assignment to be able to inspect your chart js object and look at the data inside.

I had a similar problem when using Time. Just fixed it by defining my model field types:
fields: [{name: 'date', type: 'Date'}, {name: 'close',type:'float'}]
As for why your chart is plotting like that, I got that before too, I realised that the json was passing it as a string, so I need to to be defined as a float too. I did a fix for that on the php end, by forcing it as a float first before I passed it over as json.