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.
Related
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
})
I have a problem with drawing a highchart like on this fiddle
Sample highchart. But I want chart like this one, but with many series/labels in legend. I want to get 'Jan', 'Feb', 'March', 'April' as a different series to filtering the chart. How can I do that?
When I'm using something like this instead of one series I've got 4 series only for first X value. So it's not a solution.
series: [{
name: 'Series1',
data: [49.9]
}, {
name: 'Series2',
data: [83.6]
}, {
name: 'Sereis3',
data: [48.2]
}, {
name: 'Sereis4',
data: [42.1]
}]
Thanks Sebastian Bochan. Your comment was very helpful.
This is solution of my problem
http://jsfiddle.net/tLjke7fp/6/
I have only added this code to your solution.
plotOptions: {
column: {
stacking: 'normal',
}
},
or
plotOptions: {
column: {
grouping: false,
}
},
I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):
As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/
Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/
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