Fusion chart
I want to use the drill-down option inside scroll bar chart
I searched a lot and I found that the drill-down option is applicable only for the stacked bar chart.
Please advise me on how can i build the scroll bar chart with drill down chart option.
On
Scroll bar support the drill down functionality, To know more about Drill-Down functionality please refer to the link
You can configure the target URL to:
Open in the same window
Open in a new window
Open in another frame
Open in a new popup window
FusionCharts.ready(function() {
var topStores = new FusionCharts({
type: 'scrollbar2d',
renderAt: 'container',
width: '600',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Top 25 NPM Packages for Node.js Developers",
//"numVisiblePlot": "6",
"subCaption": "March 2019 ",
plottooltext: "$datavalue Downloads",
"YAxisname": "Number of Downloads",
"XAxisname": "Packages",
},
"categories": [{
"category": [{
"label": "Commander.js"
},
{
"label": "Async.js"
},
{
"label": "Request – Simplified HTTP Client"
},
{
"label": "Express"
},
{
"label": "WebPack"
},
{
"label": "Underscore"
},
{
"label": "React"
},
{
"label": "JSDom"
},
{
"label": "Cheerio"
},
{
"label": "Mocha"
},
{
"label": "Marked"
},
{
"label": "LESS"
},
{
"label": "Morgan"
},
{
"label": "Karma"
},
{
"label": "MongoDB Node.JS Driver"
},
{
"label": "Nodemailer"
},
{
"label": "Passport"
},
{
"label": "Browserify"
},
{
"label": "Grunt"
},
{
"label": "JSHint"
},
{
"label": "Angular"
},
{
"label": "Bower"
},
{
"label": "Pug"
},
{
"label": "PM2"
},
{
"label": "Hapi"
}
]
}],
"dataset": [{
"data": [{
"value": "97294205",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "95482197",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "60224172",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "33018247",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "31615028",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "28984878",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "25391784",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "23581733",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "12321215",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "10838161",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "7808888",
"link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-https://www.fusioncharts.com/"
},
{
"value": "7127519",
"link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-https://www.fusioncharts.com/"
},
{
"value": "6659395",
"link": "n-https://www.fusioncharts.com/"
},
{
"value": "5731933"
},
{
"value": "4843888"
},
{
"value": "3264090"
},
{
"value": "2755188"
},
{
"value": "2661761"
},
{
"value": "2371272"
},
{
"value": "2201511"
},
{
"value": "1821149"
},
{
"value": "1683996"
},
{
"value": "1602832"
},
{
"value": "1267422"
},
{
"value": "1042206"
},
]
}]
}
})
.render();
});
The proper answer to this question is this - you need to give the linkeddata also for the link you create for drill down charts. If you want to show in new tab add n- in front . if in a popup add p- in front and more check official docs for the other options.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'scrollColumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subcaption": "2016 - 2017",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "1",
"numberprefix": "$",
"numVisiblePlot": "12",
"scrollheight": "10",
"flatScrollBars": "1",
"scrollShowButtons": "0",
"scrollColor": "#cccccc",
"showHoverEffect": "1"
},
"categories": [{
"category": [{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}],
"dataset": [{
"data": [{
"value": "27400",
"link": "newchart-json-1"
},
{
"value": "29800",
"link": "newchart-json-1"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
},
{
"value": "26300"
},
{
"value": "31800"
},
{
"value": "30900"
},
{
"value": "33000"
},
{
"value": "36200"
},
{
"value": "32100"
},
{
"value": "37500"
},
{
"value": "38500"
},
{
"value": "35400"
},
{
"value": "38200"
},
{
"value": "33300"
},
{
"value": "38300"
}
]
}],
"linkeddata": [{
"id": "1",
"linkedchart": {
"chart": {
"caption": "Apple Juice - Quarterly Sales",
"subcaption": "Last year",
"numberprefix": "$",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78",
"canvasbgalpha": "0",
"canvasborderalpha": "0",
"numVisiblePlot":"2",
"useplotgradientcolor": "0",
"showplotborder": "0",
"captionpadding": "20",
"showborder": "1",
"showshadow": "0",
"use3dlighting": "0",
"bgalpha": "0",
"animation": "0",
"plottooltext": "$label, $dataValue, $percentValue"
},
"categories": [{
"category":[{
"label": "Q1",
},{
"label": "Q2",
},{
"label": "Q3",
},{
"label": "Q4",
} ]
}],
"dataset":[{
"data":[ {
"value": "157000",
"link":"newchart-json-new"
}, {
"value": "172000"
}, {
"value": "206000"
}, {
"value": "275000"}
]
}],
"linkeddata":[{
"id": "new",
"linkedchart": {
"chart": {
"caption": "Apple Juice - Quarterly Sales",
"subcaption": "Last year",
"numberprefix": "$",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78",
"canvasbgalpha": "0",
"canvasborderalpha": "0",
"numVisiblePlot":"2",
"useplotgradientcolor": "0",
"showplotborder": "0",
"captionpadding": "20",
"showborder": "1",
"showshadow": "0",
"use3dlighting": "0",
"bgalpha": "0",
"animation": "0",
"plottooltext": "$label, $dataValue, $percentValue"
},
"categories": [{
"category":[{
"label": "Q1",
},{
"label": "Q2",
},{
"label": "Q3",
},{
"label": "Q4",
} ]
}],
"dataset":[{
"data":[ {
"value": "157000",
}, {
"value": "172000"
}, {
"value": "206000"
}, {
"value": "275000"}
]
}]
}
}]
}
}]
}
});
revenueChart.configureLink (
{
type : "scrollcolumn2d",
overlayButton:
{
message: 'back',
fontColor : '880000',
bgColor:'FFEEEE',
borderColor: '660000'
}
}, 0);
revenueChart.render()
}
);
Scroll Column 2D chart of FusionCharts XT supports drill down feature. Using the drilldown functionality, you can easily produce charts that enact "drilldown" capabilities. Moreover, you can make the whole chart as a hot-spot for drilldown.
You need to use "link" attribute of set element to define the link on columns.You can define links that open in same window, new window, pop-up window or frames.
For more information, refer : http://docs.fusioncharts.com/charts/contents/index.html?DrillDown/Simple.html