I'm trying to use Mult Series in Bubble Chart. What I'm doing at the moment is:
$('#container').highcharts('Map', {
title: {
text: 'Bubble Chart'
},
tooltip: {
pointFormat: '{point.estado}<br>' +
'Ligacoes: {point.ligacoes}'
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
name: 'Test2',
data: data,
maxSize: '12%',
color: '#EE0000'
}]
});
At the moment I don't care if the data comes the same in both series. It's working if I just use one
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
Anyone can try to tell what can I do... I'm trying to understand how to have more than one serie.
Thanks !
Each series is represented as an object in the series-array. You are just re-stating the same name/value-pairs inside the same series object, which only overwrites the values.
In short it should look something like:
// series array
series: [{
// Series object 1
name: 'Basemap',
mapData: map
}, {
// Series object 2
type: 'mapbubble',
name: 'Bubble 1',
data: data
}, {
// Series object 3
type: 'mapbubble',
name: 'Bubble 2',
data: data
}]
Or see this more elaborate JSFiddle for a demonstration.
Related
I want to fill the bullets of highcharts just like the bar of the highchart.
Please help me if anyone has knowledge of highcharts.
This is highchart function which I am using.
I want to make the first colour as the first bar as the second color as the second bar.
If you know any solution then please let me know. Thank you
var chart = new Highcharts.Chart({
chart: {
renderTo:'DimensionsChartfirst',
type:'column'
},
colors: ['#0070C0', '#C00000'],
title: {
text: 'Office data'
},
subtitle: {
text: ''
},
credits:{enabled:false},
legend:{
},
plotOptions: {
series: {
shadow:false,
borderWidth:0
}
},
xAxis:{
categories: [
'Weight',
'Height'
],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'Part Counts'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Office data',
// rotation:90,
margin:10
}
},
series: [{
name: 'MAX',
data: MaxVal,
colors: ['#0070C0'],
type: 'column',
colorByPoint: true
},{
name: 'MIN',
data: MinVal,
colors: ['#C00000'],
type: 'column',
colorByPoint: true
}]
});
You just need to remove colorByPoint: true properties in your series.
jsFiddle: https://jsfiddle.net/4zu28aqk/
API Reference: https://api.highcharts.com/highcharts/series.column.colorByPoint
series: [{
name: 'MAX',
data: MaxVal,
color: '#0070C0'
},{
name: 'MIN',
data: MinVal,
color: '#C00000'
}]
I have been trying to change Highmaps chart to bubble by adding
type: 'mapbubble', as below but failed
Is there any way to do it ? I dont know where went wrong
series: [{
type: 'mapbubble',
data: data,
Appreciate if anyone can help me to do that base on the code below
Link to jsfiddle
mapChart = Highcharts.mapChart('mapchart', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: The World Bank'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
// type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
series: [{
data: data,
mapData: mapData,
joinBy: ['iso-a3', 'code3'],
name: 'Current population',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
Replace point.value with point.z
data.push({
name: countries[code3].name,
code3: code3,
z: value,
year: year
});
Set chart.map prop to mapData:
chart: {
map: mapData
},
Create a new series which will be a background layer for bubbles.
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
},
Set the main series type to mapbubble
{
data: data,
type: 'mapbubble',
...
live example: https://jsfiddle.net/xf4tkec1/
I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});
To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/
Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});
Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]
I am trying to create a Column chart using Highcharts that show multiple series for one point in time only and I would like to show show the name of the series on the x-axis as well as being able to hide and show each series using the legend.
The closest I have been able to get to what I'm trying to achieve is by adding the categories and having multiple series.
xAxis: {
categories: [
'Tokyo',
'New York',
'London',
'Berlin'
]
}
and then adding multiple series with only one data point in each series
series: [{
name: 'Tokyo',
data: [49.9, null,null,null]
}, {
name: 'New York',
data: [null, 83.6,null,null]
}, {
name: 'London',
data: [null, null, 48.9,null]
}, {
name: 'Berlin',
data:[null, null, null, 42.4]
}]
The problem is that while this only shows one series for each point on the x-axis, Highcharts allocates space for each of the other series and when hiding a series only the series will be hidden not the label on the x-axis.
link to jsfiddle is here: http://jsfiddle.net/md2zk/
Set grouping: false in plotOptions, see: http://jsfiddle.net/Fusher/md2zk/5/
it's possible to hide Category along with the column.please go through the link given below . hope this will help.
http://jsfiddle.net/md2zk/633/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
},
},
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function () {
debugger;
if (this.visible) {
this.setData([], false)
}
else {
this.setData([this.chart.series[this.index].userOptions], true);
}
}
},
borderWidth: 0,
dataLabels: {
enabled: true,
//style: {
// color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//},
},
},
},
series: [{
name: 'Tokyo',
data: [{name : 'Tokyo',y:49.9}],
y: 49.9
}, {
name: 'New York',
data: [{name : 'New York',y:83.6}],
y: 83.6
}, {
name: 'London',
data: [{name : 'London',y:48.9}],
y: 48.9
}, {
name: 'Berlin',
data:[{name : 'Berlin',y: 42.4}],
y: 42.4
}],
navigation: {
buttonOptions: {
enabled: true
}
}
});
});
I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.
Here is some of the code I've tried playing with:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.
Any help on this would be greatly appreciated!
Firstly, A js-fiddle example would be highly appreciate to understand your problem.
From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
my fiddled code # http://jsfiddle.net/U2Z2x/1/
Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle update # http://jsfiddle.net/U2Z2x/2/