I have a problem with highchart, this is my code:
categories = ['Position', 'Ages', 'Salary'],
data = [{
y: 120,
color: colors[0],
drilldown: {
name: 'Position',
categories: dataemp,
data: percent,
color: colors[1]
}
}, {
y: 120,
color: colors[4],
drilldown: {
name: 'Ages',
categories: ['10-20', '20-30', '30-40', '40-50', '50-60'],
data: [parseFloat(age[0]['percentA']), parseFloat(age[0]['percentB']), parseFloat(age[0]['percentC']), parseFloat(age[0]['percentD']), parseFloat(age[0]['percentE'])],
color: colors[2]
}
}
I want to show parent name, when I click the child, example the child name is 10-20 .And the output that i need is like:
This 10-20 has parent : Ages
Help me thanks.
series: [{
name: 'Items',
colorByPoint: true,
data: [{
name: 'Position',
y: 5,
drilldown: 'position'
}, {
name: 'Ages',
y: 2,
drilldown: 'ages'
}, {
name: 'Salary',
y: 4,
drilldown: 'salary'
}]
}],
drilldown: {
series: [{
id: 'position',
data: [
['position1', 50],
['position2', 60],
['position3', 25]
]
}, {
id: 'ages',
data: [
['10-20', 20],
['20-30', 30],
['30-40', 50],
['40-50', 60],
['50-60', 25]
]
}, {
id: 'salary',
data: [
['salary1', 50000],
['salary2', 20000],
['salary3',10000]
]
}]
check this fiddle, http://jsfiddle.net/6fLhxy00/
Related
I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
Hi I am currently developing a column high chart with a 3 level drill down however I am having bother naming the legend, I would like to have the legend displaying the data name however it is only displaying the series name at the moment.
Also I was having bother with the legend changing to the appropriately as it goes down through the different levels.
http://jsfiddle.net/amccormack10/tdy2x4dp/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of Students Enrolled & Withdrawn'
},
subtitle: {
text: 'Click the Columns to see Totals for each Level'
},
xAxis: {
type: 'category',
title: {
text: 'Students'
}
},
yAxis: {
title: {
text: 'Total Number of Students'
}
},
legend: {
enabled: true
//backgroundColor: '#FFFFFF',
//layout: 'vertical',
//floating: true,
//align: 'left',
//verticalAlign: 'top',
//x: 90,
//y: 60,
//shadow: true
},
series: [{
name: 'Overall Total of Students',
colorByPoint: true,
data: [{
name: 'Enrolled',
y: 44,
drilldown: 'LevelEnrolled'
}, {
name: 'Withdrawn',
y: 55,
drilldown: 'LevelWithdrawn'
}]
}],
drilldown: {
series: [{
name: 'Enrolled by Level',
colorByPoint: true,
id: 'LevelEnrolled',
data: [{
name: 'Level 1',
y: 23,
drilldown: 'Level1Enrolled'
}, {
name: 'Level 2',
y: 24,
drilldown: 'Level2Enrolled'
}, {
name: 'Level 3',
y: 11,
drilldown: 'Level3Enrolled'
}]
}, {
name: 'Withdrawn by Level',
colorByPoint: true,
id: 'LevelWithdrawn',
data: [{
name: 'Level 1',
y: 12,
drilldown: 'Level1Withdrawn'
}, {
name: 'Level 2',
y: 33,
drilldown: 'Level2Withdrawn'
}, {
name: 'Level 3',
y: 33,
drilldown: 'Level3Withdrawn'
}]
}, {
id: 'Level1Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 11],
['GD', 33],
['SD', 12],
['BIT', 34]
]
}, {
id: 'Level2Enrolled',
colorByPoint: true,
data: [
['CIT', 43],
['CS', 22],
['GD', 33],
['SD', 22],
['BIT', 22]
]
}, {
id: 'Level3Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 22],
['GD', 12],
['SD', 11],
['BIT', 23]
]
}, {
id: 'Level1Withdrawn',
colorByPoint: true,
data: [
['CIT', 23],
['CS', 11],
['GD', 2],
['SD', 1]
]
}, {
id: 'Level2Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 2],
['GD', 4],
['SD', 7]
]
}, {
id: 'Level3Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 4],
['GD', 5],
['SD', 8]
]
}]
}
});
});
Any help would be greatly appreciated.
Thanks
I'm looking for a way to show a info text in Highcharts when using drilldowns. I want a text that tells my visitors that another chart has been showed up. A title for example:
"New chart - more about Animals"
http://jsfiddle.net/6zYmJ/
Do you have any ideas how to do that?
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
});
For example using drilldown and drillup events (API), a couple of variables and Chart.setTitle (API). Like this:
var defaultTitle = "Basic drilldown";
var drilldownTitle = "More about ";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
}
}
},
title: {
text: defaultTitle
},
// ... more options
});
See this JSFiddle demonstration.
$(function () {
var data = {
animal: [2, 3, 1, 6],
vehicle: [03, 15, 14],
fruits: [20, 50, 100]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
bar: {
point: {
events: {
click: secondChart
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 34,
name: 'vehicle'
}, {
y: 67,
name: 'fruits'
}]
}]
});
function secondChart(e) {
var point = this;
$("#detail").highcharts({
chart: {
type: 'column'
},
plotOptions: {
series: {
point: {
events: {
click: thirdChart
}
}
}
},
title: {
text: point.name + ':' + point.y
},
series: [{
name: 'Chart 2',
data: data[point.name]
}]
});
}
function thirdChart(e) {
var data = {
animal: [1, 6, 3, 5],
vehicle: [01, 19, 24],
fruits: [30, 80, 100],
birds: [20, 40, 80]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'sub_detail',
type: 'column'
},
plotOptions: {
bar: {
point: {
events: {
click: function () {
alert('Category: ');
}
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
});
}
});
When I click the second bar I want different graph values to populate the third graph. I can't get figure out the problem. On clicking the second graph I am getting the same values on third graph.
I have three divs:
div id container
div id detail
div id sub_detail
This is how you add data for a second chart:
series: [{
name: 'Chart 2',
data: data[point.name]
}]
And this is code for third chart:
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
I hope, that you can see the difference?
Should be:
series: [{
name: 'Chart 3',
data: data[this.name]
}]
I am creating pie chart with multiple data in one pie chart. In my case (don't know why) I have a problems with each series line height. My code looks that (http://jsfiddle.net/yATYL/):
$('#container2').highcharts({
chart: {
type: 'pie',
center : [50, 50]
},
title: {
text: 'Bla bla bla',
},
series: [
{
name: 'optionzz1',
innerSize: '40%',
startAngle: -120,
data: [
{
name: 'optionzz 1',
y: 25,
color: '#f26522'
},{
name: '',
y: 75,
color: 'white'
}
]
},{
name: 'optionzz2',
innerSize: '60%',
startAngle: -120,
data: [
{
name: 'optionzz 2',
y: 15,
color: '#2babe2'
},{
name: '',
y: 85,
color: 'white'
}
]
},{
name: 'optionz3',
innerSize: '80%',
startAngle: -120,
data: [
{
name: 'optionzz 3',
y: 60,
color: '#bedbf3'
},{
name: '',
y: 40,
color: 'white'
}]
}]
});