admin管理员组文章数量:1387360
Problem in having a dynamic drilldown. Can't figure the the code for getting those dynamic drilldown data for this chart using highcharts. Please help
<script type="text/javascript">//<![CDATA[
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
lang: {
drillUpText: '<< Terug naar {series.name}'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
"drilldown": true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
inside my series i already have a json data there for the name, y and for the value of the drilldown. having really hard time when it es to the drilldown data inside 'Animals':{ name: 'Animals', data: ['Cows',2], ['Sheep', 3]]} .
i need dynamic data for these please help help
Problem in having a dynamic drilldown. Can't figure the the code for getting those dynamic drilldown data for this chart using highcharts. Please help
<script type="text/javascript">//<![CDATA[
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
lang: {
drillUpText: '<< Terug naar {series.name}'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
"drilldown": true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
inside my series i already have a json data there for the name, y and for the value of the drilldown. having really hard time when it es to the drilldown data inside 'Animals':{ name: 'Animals', data: ['Cows',2], ['Sheep', 3]]} .
i need dynamic data for these please help help
-
What is the core of the problem? From what I understand you'd just need an Ajax call instead of the
drilldowns2d-array, followed by the loading procedure which is already there, but as a success callback instead. – Halvor Holsten Strand Commented Mar 10, 2015 at 19:19 - json array for this part 'Fruits': { name: 'Fruits', data: [ ['Apples', 5], ['Oranges', 7], ['Bananas', 2] ] }, – Nb12se Commented Mar 10, 2015 at 21:54
2 Answers
Reset to default 3This part:
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
Is just an easy example of adding drilldowns dynamically. You can use AJAX calls, as suggestion in the ment:
if (!e.seriesOptions) {
var chart = this,
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Loading...');
$.get('/my/url', e.point.name, function(data) {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data);
// where data is for example:
// { name: 'Cars', data: [ ['Toyota', 1], ['Volkswagen', 2], ['Opel', 5] ] }
});
}
Hope this helps anyone else. You could if you wanted to, although this doesn't solve your problem, but this method works, separate the data/json and call in the data using ajax.
var chartSeriesData = [];
var chartDrilldownData = [];
$.ajax({
type: 'GET',
url: 'db/jsondata.json',
success: function(data) {
var agentJson = data;
for (var i = 0;i <agentJson.agentinfo.length; i++)
{
var series_name = agentJson.agentinfo[i].name;
var drill_id = agentJson.agentinfo[i].drilldown;
var series_data = agentJson.agentinfo[i].y;
var drill_data = agentJson.agentinfo[i].data;
chartSeriesData.push({
name: series_name,
y: parseFloat(series_data),
drilldown : drill_id
});
chartDrilldownData.push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// END FOR LOOP
$('#agentInfo').highcharts({
credits: {
enabled: false
},
colors: ['#4B2572', '#8E227D', '#7904e0', '#b726b5', '#64E572', '#ed9cdf', '#f704ce', '#780a84', '#8e4696', '#cd92d3', '#551c5b'],
chart: {
type: 'pie',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'Human Resources'
},
subtitle: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '12px',
textShadow: "0px #ffffff"
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Types',
colorByPoint: true,
data: chartSeriesData
}],
drilldown: {
series: chartDrilldownData
}
});
}
});
And the json data would be structured like this:
{
"agentinfo": [
{
"name": "Attendance",
"y": 86.32,
"drilldown": "Attendance",
"data": [
["January", 80.13],
["Febuary", 99.2],
["March", 78.11],
["April", 89.33]
]
},
{
"name": "Absence",
"y": 4.03,
"drilldown": "Absence",
"data": [
["January", 1.3],
["Febuary", 5.7],
["March", 9.6],
["April", 8.5]
]
},
{
"name": "Holidays",
"y": 10.38,
"drilldown" : "Holidays",
"data": [
["January", 5],
["Febuary", 4.32],
["March", 3.68],
["April", 2.96]
]
}
]
}
本文标签： javascriptHighcharts Dynamic Drilldown using jsonStack Overflow
版权声明：本文标题：javascript - Highcharts Dynamic Drilldown using json - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744565943a2613046.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论