Combine two data fields in highcharts - highcharts

My char is like that. I want to combine above On Air Target 2G and Actual 2G as 2G and other two fields On Ait Target 3G and Actual 3G as 3G.
Before combing it display like this.enter image description here
After adding new 2G and 3G It should display like that.enter image description here
When I press 2G tha 2G , On Ait Target 2G and Actual 2G should be hidden. and above function....
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "barchartloadmunthlydatachart",
type: "column"
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Grouped categories <span class="chart-subtitle">plugin by </span></span>'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
{
name: "On Air Target 2G",
data: [1, 3, 5, 5, 6, 7, 14, 15, 18],
stack: 'target'
},
{
name: "Actual 2G",
data: [3, 5, 10, 15, 16, 18, 18, 18, 19],
stack: 'actual'
},
{
name: "On Air Target 3G",
data: [1, 3, 5, 5, 6, 7, 14, 15, 18],
stack: 'target'
},
{
name: "Actual 3G",
data: [3, 5, 10, 15, 16, 18, 18, 18, 19],
stack: 'actual'
}
],
xAxis: {
categories: [{
name: "2016-05",
categories: ["1st wk", "2nd wk", "3dr wk"]
}, {
name: "2016-06",
categories: ["1st wk", "2nd wk", "3rd wk"]
}, {
name: "2016-07",
categories: ["1st wk", "2nd wk", "3rd wk"]
}]
}
});
});

Add the two fake series (with unique ID) for printing symbol in the legend and catch legendItemClick event. Inside the function, define the condition which checks G2 / G3 and call series.update() on particular series.
events: {
legendItemClick: function() {
var chart = this.chart,
series = chart.series,
visible;
if (this.name === '2G') {
visible = series[0].visible;
series[0].update({
visible: !visible
}, false);
series[1].update({
visible: !visible
}, true);
return false;
}
if (this.name === '3G') {
visible = series[2].visible;
series[2].update({
visible: !visible
}, false);
series[3].update({
visible: !visible
}, true);
return false;
}
}
}
Example:
http://jsfiddle.net/o8py1ahc/

Related

How to Increase minimum point value and the color of series in advanced accessible charts in Highcharts by making it traverse

I need to change the series color to uniformly be green and when the data range is high ,say I have data from Oct 2018 to Sep 2021 for one data point and the other data is Aug 20 2021 to Aug 22 2021,
the latter looks very small and barely noticeable . At this instance I want to set the minimum width and shape to the smallest data point in advanced accessible graph. How do I do that.
Any suggestion is appreciated
Image1
Image2
Code:function DrawRemoteRequestPSRChart(seriesData, yAxisCategories) {
// Define custom series type for displaying low/med/high values using boxplot as a base
Highcharts.seriesType('lowmedhigh', 'boxplot', {
keys: ['low', 'high'],
tooltip: {
}
}, {
// Change point shape to a line with three crossing lines for low/median/high
// Stroke width is hardcoded to 1 for simplicity
drawPoints: function () {
var series = this;
this.points.forEach(function (point) {
var graphic = point.graphic,
verb = graphic ? 'animate' : 'attr',
shapeArgs = point.shapeArgs,
width = 0,
left = Math.floor(shapeArgs.x) + 0.5,
right = left + width,
crispX = left + Math.round(width / 2) + 0.5,
highPlot = Math.floor(point.highPlot) + 0.5,
// Sneakily draw low marker even if 0
lowPlot = Math.floor(point.lowPlot) +
0.5 - (point.low === 0 ? 1 : 0);
if (point.isNull) {
return;
}
if (!graphic) {
point.graphic = graphic = series.chart.renderer
.path('point')
.add(series.group);
}
graphic.attr({
stroke: point.color || series.color,
"stroke-width": 4
});
graphic[verb]({
d: [
'M', left, highPlot,
'H', right,
'M', left, lowPlot,
'H', right,
'M', crispX, highPlot,
'V', lowPlot
]
});
});
}
});
// Create chart
var chart = Highcharts.chart('container', {
chart: {
type: 'lowmedhigh',
inverted: true
},
credits: {
enabled: false
}, legend: {
enabled: false
},
title: {
text: 'Daily company fruit consumption 2019'
},
tooltip: {
shared: false, formatter: function () {
return this.point.category + ', ' + new Date(this.point.options.low).toGMTString() +
' to ' + new Date(this.point.options.high).toGMTString() + '.';
}
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
category = point.category,
from = new Date(point.low),
to = new Date(point.high);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
},
typeDescription: 'Low, high. Each data point has a low and high value, depicted vertically as small ticks.' // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
},
xAxis: [{
accessibility: {
description: 'Months of the year'
},
categories: ['January', 'February'],
crosshair: true
}],
yAxis: {
type: 'datetime'
},
responsive: {
rules: [{
condition: {
minWidth: 550
},
chartOptions: {
xAxis: {
categories: ['Jan', 'Feb']
}
}
}]
},
plotOptions: {
series: {
stickyTracking: true,
whiskerWidth: 5
}
},
series: [{
name: 'Plums', color: 'lime',
data: [
[1416528000000,
1417478400000
],
[
Date.UTC(2014, 10, 1, 10, 16, 58),
Date.UTC(2014, 12, 2, 10, 16, 58)
]]
}, {
name: 'Bananas',
color: 'blue',
data: [
[Date.UTC(2014, 10, 21, 10, 16, 58),
Date.UTC(2014, 11, 22, 10, 16, 58)
],
[
Date.UTC(2014, 10, 15, 10, 16, 58),
Date.UTC(2014, 12, 12, 10, 16, 58)
]
]
}, {
name: 'Apples',
color: 'red',
type: 'scatter',
marker: { symbol: 'diamond' },
data: [
[Date.UTC(2014, 10, 20, 10, 16, 58),
Date.UTC(2014, 11, 27, 10, 16, 58)
],
[
Date.UTC(2014, 10, 24, 10, 16, 58),
Date.UTC(2014, 10, 24, 12, 17, 58)
]
]
}]
});
// Remove click events on container to avoid having "clickable" announced by AT
// These events are needed for custom click events, drag to zoom, and navigator
// support.
chart.container.onmousedown = null;
chart.container.onclick = null;
//Highcharts.chart('GraphHere', {
// chart: {
// type: 'xrange'
// },
// credits: {
// enabled: false
// },
// legend: {
// enabled: false
// },
// tooltip: {
// pointFormat: ''
// },
// title: {
// text: 'Mass Remote Request PSR'
// },
// xAxis: {
// type: 'datetime'
// },
// yAxis: {
// title: {
// text: ''
// },
// categories: yAxisCategories,
// min: 0,
// max: 5,
// scrollbar: {
// enabled: true
// },
// reversed: true
// },
// series: seriesData
//});
}
It would be best to add a point there using a scatter series, disable or hide the point you want to otherwise show in chart.event.load and redraw the chart.
chart: {
events: {
load: function() {
var chart = this;
chart.series[0].update({
borderColor: 'green',
pointWidth: 0,
}, false);
chart.redraw();
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/sx2u0epw/
API References:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.scatter

Highcharts combine chart types

I am using Highcharts and would like to combine 2 types of chart.
I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.
I can't find any example of doing this so I don't even know if this is possible.
I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.
If what I'm trying to do possible?
Column with negative values
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Bar with negative stack
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
Thanks to #Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
colors: Highcharts.getOptions().colors.splice(0, 3),
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: true
}
},
series: [{
stack: 'john',
name: 'John',
data: [5, 3, 14, 7, 2]
}, {
stack: 'jane',
name: 'Jane',
data: [2, 12, 3, 2, 1]
}, {
stack: 'joe',
name: 'Joe',
data: [3, 4, 4, 2, 5]
}, {
showInLegend: false,
stack: 'john',
name: 'John',
data: [-5, -3, -4, -7, -2]
}, {
showInLegend: false,
stack: 'jane',
name: 'Jane',
data: [-2, -2, -3, -2, -1]
}, {
showInLegend: false,
stack: 'joe',
name: 'Joe',
data: [-3, -4, -4, -2, -5]
}]
});

Display Stack label Highcharts

Im using the stacked charts from Highcharts but would like to include the stack name below the stacked bar charts.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/
js
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
Iin this chart, I want to show 'MALE' & 'FEMALE' below the stack.
How can I do it using Highcharts
Something like below..Where you display the stack name - "Maintenance", "other" and "peak"
I think that in your case you may use grouped-categories plugin. You may find this plugin on a Highcharts plugins repository:
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5]
}],
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon"]
}]
}
});
});
And here you can find simple example how your chart may work with this plugin: http://jsfiddle.net/TFhd7/943/

Displaying count on bar and percentage on Y-axis of cloumn chart using Highcharts

My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]

Highcharts: structure legend by subtitles

I was playing around with Highcharts the last days.
One thing, I couldn't find out, is if it is possible to include subtitles to the legend to structure the results.
In my example: http://jsfiddle.net/gWEtB/
var allData={
products: ["Product1", "Product2", "Product3", "Product4"]
}
var colors={
'own': ['#3B14AF', '#422C83', '#210672', '#886ED7'],
'comp': ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'],
'new': '#00CC00'}
`$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Product Switching'
},
xAxis: {
categories: allData.products
},
yAxis: {
min: 0,
title: {
text: ''
},
labels:{
format:'{value} %'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
shared: false
},
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: true,
formatter: function(){
return this.percentage.toFixed(2)+' %';
},
color:'#FBF5EF'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
},
series: [{
name: 'Own product1',
data: [5, 3, 4, 7],
color: colors.own[0]
},
{
name: 'Own product2',
data: [5, 3, 4, 7],
color: colors.own[1]
},
{
name: 'Own product3',
data: [5, 3, 4, 7],
color: colors.own[2]
},
{
name: 'Own product4',
data: [5, 3, 4, 7],
color: colors.own[3]
},
{
name: 'Competitor 1',
data: [2, 2, 3, 2],
color: colors.comp[0]
},
{
name: 'Competitor 2',
data: [2, 2, 3, 2],
color: colors.comp[1]
},
{
name: 'Competitor 3',
data: [2, 2, 3, 2],
color: colors.comp[2]
},
{
name: 'Competitor 4',
data: [2, 2, 3, 2],
color: colors.comp[3]
},
{
name: 'Competitor 5',
data: [2, 2, 3, 2],
color: colors.comp[4]
}, {
name: 'Market Potential',
data: [3, 4, 4, 2],
color: colors.new
}]
});
});
I look for a way to add subtitles to the legend in this way:
Cannibalization:
o Own product 1
o Own product 2
o Own product 3
o Own product 4
Competition:
o Competitor 1
o Competitor 2
o ...
I am thankful for all help and information.
thx
You can use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter
Simple example: http://jsfiddle.net/gWEtB/1/
labelFormatter: function() {
switch(this.name)
{
case 'Own product1':
return 'Cannibalization<br/>'+ this.name;
break;
case 'Competitor 1':
return this.name + '<br/>Competition';
break;
case 'Market Potential':
return this.name + '<br/>Market title';
break;
default:
return this.name;
break;
}
}

Resources