Hi I need to customize each column in highcharts stacked column
like this image
I this implementation i have given like this
{
categories:["6-7","7-8"]
series: [{
name: 'pass',
data: [5, 3, 4, 7, 2]
}, {
name: 'Fail',
data: [2, 2, 3, 2, 1]
}]
}
But now I need to change this implementation and i have to customize each column and add categories
how do i achieve this i'm having a array like this
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]
i wanted like this
|percentage|
------------
| pass |
| fail |
-----------------
category
You need to preprocess your data to create series structure required by Highcharts. The 'category' label is achievable by using name property and 'percentage' by stack-labels formatter:
var data = [{
"pass": 2,
"fail": 3,
"category": "6-7",
"percentage": "20%"
}, {
"pass": 5,
"fail": 0,
"category": "7-8",
"percentage": "10%"
}];
var series = [{
name: 'Pass',
data: []
}, {
name: 'Fail',
data: []
}];
data.forEach(function(dataObj) {
series[0].data.push({
y: dataObj.pass,
name: dataObj.category,
percentage: dataObj.percentage
});
series[1].data.push({
y: dataObj.fail,
name: dataObj.category
});
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return this.axis.series[0].options.data[this.x].percentage;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/nfbq2soe/
API Reference: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
I have created a areaspline chart using highcharts library and making it animated with play/pause button transition between weeks of data
Ref. https://www.highcharts.com/blog/tutorials/176-charts-in-motion/
jsfiddle Ref. https://jsfiddle.net/larsac07/wkev75nL/?utm_source=website&utm_medium=embed&utm_campaign=wkev75nL
in the above example, we are animating the chart week wise
dataSet used :
dataSequence = [
{
name: 'Week 1',
data: [1, 2, 2, 1, 1, 2, 2]
}, {
name: 'Week 2',
data: [6, 12, 2, 3, 3, 2, 2]
}, {
name: 'Week 3',
data: [4, 5, 6, 5, 5, 4, 9]
}, {
name: 'Week 4',
data: [5, 5, 6, 6, 5, 6, 6]
}, {
name: 'Week 5',
data: [6, 7, 7, 6, 6, 6, 7]
}, {
name: 'Week 6',
data: [8, 9, 9, 8, 8, 8, 9]
}, {
name: 'Week 7',
data: [9, 10, 4, 10, 9, 9, 9]
}, {
name: 'Week 8',
data: [1, 10, 10, 10, 10, 11, 11]
}, {
name: 'Week 9',
data: [11, 11, 12, 12, 12, 11, 11]
}
]
I don't want change chart
on play button click I want animate the data points 11 data point for week1 to same data point but different value on y axis for week2
xAxis = ["week1", "Week2", ..... ],
yAxis = [[1,2,3,4,5,6,7,8,9,10,11], [3,5,7,8,2,1,5,7,6,1,10], ....]
on the play button it would transit between week1 then will go to week 2 and so till last week number available.
Trying to have something like this Ref. https://aatishb.com/covidtrends/
this chart is plotted using this dataset for series
Highcharts.chart("container", {
chart: {
type: "areaspline"
},
tooltip: {
shared: true,
valueSuffix: " units"
},
xAxis: {
categories: [
"Week 1",
"Week 2",
"Week 3",
"Week 4",
"Week 5",
"Week 6",
"Week 7"
]
},
yAxis: {
title: {
text: "Index"
}
},
legend: {
layout: "horizontal",
align: "right",
verticalAlign: "top",
x: 50,
y: 50,
floating: true,
borderWidth: 1,
backgroundColor:
(Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
"#FFFFFF"
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [
{
name: "By week",
data: dataSequence[value].data.slice()
},
{
type: "spline",
name: "Topic 1",
data: [3, 2, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 2",
data: [1, 5, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 3",
data: [3, 7, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 4",
data: [5, 1, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 5",
data: [7, 3, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 6",
data: [9, 2, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 7",
data: [11, 8, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 8",
data: [13, 11, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 9",
data: [15, 7, 1, 3, 4, 7, 8]
},
{
type: "spline",
name: "Topic 10",
data: [7, 5, 1, 3, 4, 7, 8]
}
],
title: {
text: ""
},
subtitle: {
text: "Efficiency Index of Topics"
}
});
this my update function in react
update(increment) {
var input = $("#play-range")[0];
var output = $("#play-output")[0];
if (increment) {
input.value = parseInt(input.value) + increment;
}
output.innerHTML = this.state.dataSequence[input.value].name;
this.setState({
value: input.value
});
if (input.value >= input.max) {
// Auto-pause
this.pause();
this.setState(
{
value: 0
},
() => {
output.innerHTML = this.state.dataSequence[0].name;
}
);
}
}
the whole chart is plotted at once, I need something that it should transit
first, it plots all data points for week1 then week 2 after that week 3 when I click on the play button
You need to start with an empty data and use addPoint method in the update function:
function update(increment) {
var input = $('#play-range')[0],
output = $('#play-output')[0],
increment;
chart.series[0].addPoint(dataSequence[input.value].data[actualPointIndex]);
actualPointIndex += increment;
if (actualPointIndex === 6) {
actualPointIndex = 0;
input.value = parseInt(input.value) + increment;
}
output.innerHTML = dataSequence[input.value].name; // Output value
if (input.value >= input.max) { // Auto-pause
pause($('#play-pause-button')[0]);
}
}
Live demo: https://jsfiddle.net/BlackLabel/stpxyfca/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
I want to display data from my database into highcharts (bars).
I tried using HashMap to pass values from controller to javascript.
MyController.java:
#GetMapping("/Hist")
public String barGraph(Model model) {
ApplicationContext context =
new ClassPathXmlApplicationContext("Spring-Module.xml");
PTS_POINTS_HISTORY_DAO ptsHistDAO = (PTS_POINTS_HISTORY_DAO) context.getBean("PtsPointsHistoryDAO");
model.addAttribute("surveyMap", ptsHistDAO.barGraph());
//ptsHistDAO.barGraph() returns Map<String, Integer>
return "Hist";
}
hist.jsp:
<div id="containerx" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('containerx', {
chart: {
type: 'column'
},
title: {
text: 'Total Redeem'
},
xAxis: {
categories: ['${surveyMap.keySet()}']
},
yAxis: {
max: 10000,
min:0,
title: {
text: 'Numbre of Loylaty Points Redeemed'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'permillion'
}},
series: [{
name: 'Fulfilled',
data: [9667, 0, 5694, 2752, 200]
}, {
name: 'Cancelled',
data: [500, 3000, 300, 2, 1]
}, {
name: 'Pending',
data: [3, 500, 400, 2, 50]
}]
});
</script>
I expected that each key will be represented by their value in bar graph, but actually all the keys represents only the first value in graph.
expected :
x1:20151514 y1: 9667 cancelled, 500 fullfilled, 3 pending
what i get:
x1: [20151514,20151513,20151512..] y1: 9667 cancelled, 500 fullfilled, 3 pending
Highcharts requires categories property to be an array of strings. Your result was a string, which required to use JSON.parse method:
var str = "[0013-05-08, 2010-11-17, 0015-05-09, 0024-01-01, 0021-01-01]"
var res = str.replace(/,\s/g, '","');
var res2 = res.replace('[', '["');
var res3 = res2.replace(']', '"]')
Highcharts.chart('container', {
xAxis: {
categories: JSON.parse(res3)
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/k4L3whu5/
API Reference: https://api.highcharts.com/highcharts/xAxis.categories
I'm using highCharts with angularJs and I want to limit the number of xAxis to 5; so the highchart shows only 5 xAxis there is my code:
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50
},
yAxis: {
title: {
text: ''
}
},
tickAmount cannot be used with Datetime, logarithmic or category axes as mentioned here.
tickPositions can be used to achieve this.
xAxis: {
type: 'datetime',
categories: ['2016-01-01', '2016-01-02', '2016-01-03', '2016-02-01', '2016-02-02', '2016-03-01', '2016-03-02', '2016-04-01', '2016-04-02'],
tickPositions: [0, 2, 4, 6, 8]
}
The values in the tickPositions array are the index positions.
Here is the fiddle.
I am trying to render 3 flags (experimenting with flags) in a candlestick chart in Highchart, but the flag {x: Date.UTC(2012, 7, 6),title: 'On series'}
Is not getting rendered. Why?
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'}
];
arrflag.push([
{x: Date.UTC(2012, 7, 6),title: 'On series'}
]);
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
id: 'AAPLX',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
},{
type: 'flags',
name: 'Flags on series',
data: arrflag,
onSeries: 'AAPLX',
shape: 'squarepin'
}]
});
});
});
Live DEMO
You array of flags has the following value:
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'}
];
When you push the other flag you add it to another array, which isn't the expected. So the result will be.
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'},
[{x: Date.UTC(2012, 7, 6),title: 'On series'}]
];
Remove [ and ] from the following code.
arrflag.push([
{x: Date.UTC(2012, 7, 6),title: 'On series'}
]);