I am trying to create one highchart with lots of data. Below is the code i have written to create it. But somehow on the X-Axis not all the categories are being shown. Attached is the Fiddle
JsFiddle Link
$(function() {
Highcharts.chart('containerSDRangeDOJ', {
chart: {
type: 'bar',
marginLeft: 150,
marginBotton: 50
},
legend: {
y: -20
},
title: {
text: "Top Source-Destination",
align: "center"
},
subtitle: {
text: 'Some link to download this data'
},
xAxis: {
type: 'category',
title: {
text: null
},
min: 1,
max: 15,
scrollbar: {
enabled: true
},
tickLength: 1,
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Oops Count',
align: 'middle'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Count',
data: [
["Bangalore to Chennai", 40],
["Bangalore to Madurai", 55],
["Bangalore to Chennai", 40],
["Bangalore to Chennai", 40],
["Bangalore to Chennai", 40]
]
}]
});
})
Point which are mentioned by #jlbriggs are the problems
I added a hack for the second point (unique name) to show correct labels in xAxis
fiddle
Try using chart load events to check each names in data. If current name is matching to previous then add a space to it (name length changes from the previous one and it becomes a different name but looks the same) and form new array and update the chart series with this array.
chart: {
type: 'bar',
marginLeft: 150,
marginBotton: 50,
events: {
load: function() {
var series_data = this.series[0].data;
var current_item;
var spaces=""
var datas=[]
for (var i = 0; i < series_data.length; i++) {
current_item=series_data[i].name
if(current_item==series_data[i].name){
spaces+=" ";
var sName=series_data[i].name+spaces
datas.push([sName,series_data[i].y])
}else{
spaces=""
datas.push([series_data[i].name,series_data[i].y])
}
}
this.update({
series: {
data: datas
},
});
}
}
},
personally I think you should use this example Fiddle
There are two different things going on that are affecting this.
1) You are setting the x axis min to 1. The first category starts at 0, so you are telling the chart to skip it.
2) Your 3rd, 4th, and 5th data points are all listed as the same category, so it is associating them all with the same category on the axis. It won't repeat categories - they need to be unique if you are specifying them in the data point like that.
For example:
xAxis: {
type: 'category',
min: 0,
max: 14
},
series: [{
name: 'Count',
data: [
["Bangalore to Chennai", 40],
["Bangalore to Madurai", 55],
["Bangalore to Chennai2", 40],
["Bangalore to Chennai3", 40],
["Bangalore to Chennai4", 40]
]
}]
Updated fiddle with x axis min set to 0, and category names edited:
https://jsfiddle.net/jlbriggs/78yesztL/20/
Related
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});
The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max
Hi I'm trying to update my piechart LIVE without redrawing the piechart, any advice?
this is the function that is being called
var i = 0;
setInterval(function(){
piecharts(i, 1, 2, 3, 4, 5);
i++;
},5000);
function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: false,
alpha: 45,
beta: 0
}
},
title: {
text: 'Number of person in each sector'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Avg number of person in this sector over the total of ',
colorByPoint: true,
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
}]
});
}
For every 5 second, my i will increase by 1 and my pie-chart will be drawn, this works fine but it kept redrawing my chart. any advice? thanks. also, i'm using v4.1.8 of highchart
You should use the update() method for this. Init your chart on the DOM ready event and just call a function in order to update data :
Demo
function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
var chart = $('#container').highcharts();
chart.series[0].update({
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
})
}
The reason for the re-render is that you create a new chart every five seconds instead of updating its data.
You need to call the update method for your y point on your chart series data:
chart.series[0].data[0].update(y);
Here is a simple example on how to update the data: Update pie data jsfiddle
Or have a look at the documentation for live data
I have two y-axis.
using primary y-axis I have created column chart but when I am trying to create line chart using secondary y-axis with negative percentage data values my line chart is going down from x-axis I don't want that so do anyone know about this please help me as soon as possible ?
$(function () {
$('#container').highcharts({
colors: [ '#24CBE5','#FF9655'],
chart: {
type: 'column'
},
title: {
text: 'combine chart'
},
plotOptions: {
series: {
pointPadding:0,
groupPadding:0.3,
borderWidth: 1,
//shadow: false
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['Oct 15', 'Nov 15', 'Dec 15', 'Jan 15', 'Feb 15','March 15'],
},
yAxis: [{ // Primary yAxis
min: 0,
max: 4,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
formatter: function () {
return this.value + '$';
}
},
title: {
text: 'Million',
}
}, { // Secondary yAxis
tickInterval:5, //set ticks to 20
min: -30,
max: 10,
column :{
stacking:'percent'
},
title: {
text: '% Percantage',
},
labels: {
formatter: function () {
return this.value + '%';
}
},
opposite: true
}],
series: [
{
type: 'column',
name: 'AB',
data: [3, 3.5, 3.3, 3.6, 2.5,2]
}, {
type: 'column',
name: 'BC',
data: [3.3, 2, 3.3, 3.4, 2.9,3]
}, {
// USE THIS CODE TO GENERATE LINE CHART (I HAVE USED ONLY MILION AND CREATED LINE CHART BUT INSTEAD I WANT TO USE percentage )
type: 'line',
name: '% Percantage',
data: [0.5, 2, 0, 4, 3.7,2.6],
color: '#000000',
//border: 1,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
});
You need to set alignTicks as false.
chart:{
alignTicks: false
}
I am using Highstock to visualize some data for my web application.
The data is displayed as steps (that is one value is held until a new one takes over), however the navigator of Highstock seems to use the spline algorithm on the data. I would rather like it to display as "blocks" like the main chart.
I have tried adding step: "true" to navigator.series in the options, but it does not seem to matter.
Does anyone know a way to do this with the Highstock API? I have been digging into the documentation for a while without any luck.
Code used to initialize highstock chart:
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: true,
selected: 0,
buttons: [{
type: 'day',
count: 1,
text: 'Day'
}, {
type: 'week',
count: 1,
text: 'Week'
}]
},
series: [{
name: 'Light level',
data: data,
type: 'area',
step: true,
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "#fff800"],
[1, Highcharts.Color("#fff800").setOpacity(0).get('rgba')]
]
}
}],
yAxis: {
labels: {
formatter: function () {
if (this.value > 0) return "" + this.value + "%";
return "";
}
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '0%',
align: "right"
}
}, {
value: 100,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '100%',
align: "right"
}
}],
tickPositions: [0, 25, 50, 75, 100]
},
credits: {
enabled: false
},
navigator: {
//enabled: false
}
});
I have also created a jsfiddle with example data.
http://jsfiddle.net/EJZ5x/
According to docs - step option isn't supported.
However, when you set directly type for navigator, it works! See: http://jsfiddle.net/EJZ5x/1/
navigator: {
series: {
type: 'area',
step: 'left'
}
}