ایجاد نمودار Drill Down با استفاده از FusionCharts
شنبه 8 اسفند 1394در این مقاله می خواهیم با استفاده از توابع جاوا اسکریپت یک سری نمودار با اطلاعات را نمایش دهیم، زمانی که بخواهید اطلاعاتی را نمایش دهید و و داده ها را برای یک تصمیم گیری و نتیجه ی کلی محسابه نمایید از نمودار استفاده می کنیم.
FusionCharts یک سری توابع javascript است که به کاربر اجازه می دهد تا بتواند نمودار های مورد نیاز خود را فراهم نماید.
FusionCharts که تعدادی زیادی تابع javascript دارد که این توابع به ما اجازه ی ایجاد نمودارهایی که به صورت Drill-Down هستند را می دهند.
FusionCharts دو نوع drill-down را پشتیبانی می نماید:
1-Simple Links
این نوع اجازه می دهد به کاربر که یک URL ساده را باز نمایید، یا صفحات را به صورت زیر باز می نماید:
1-باز کردن لینک در صفحه ی جدید
2-باز کردن لینک در همان صفحه
3-باز کردن لینک در فریم
4-باز کردن لینک به صورت pop-up window
5-درست کردن نمودار به صورت hotspot
2-Chart Links:
این نوع از نمودار به گونه ای است که زمانی که روی آن کلیک نمایید شما را به نمودار مربوط به خودش می برد و یا به اصطلاح نمودار قبلی نمودار می برد.
نموداری که در همان صفحه باز شود که ما یک لینک جدید با ویژگی های مربوط به خودش را اضافه می نماییم، که برای هر ویژگی صفت مربوط به خودش وجود دارد.
نمونه کدی که زمانی که روی نمودار بزنیم آدرسی که به هر شاخه از نمودار دادیم داخل همان صفحه باز شود:
<html>
<head>
<title>مرجع تخصصی برنامه نویسان</title>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function () {
var simpleLinkChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subCaption": "برنامه نویسان",
"xAxisName": "ماه ها",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "فروردین",
"value": "520000",
//custom link: opens in same page
"link": "http://gagansikri.in"
},
{
"label": "اردیبهشت",
"value": "710000",
"link": "http://c-sharpcorner.com"
},
{
"label": "خرداد",
"value": "780000",
"link": "http://fusioncharts.com"
},
{
"label": "تیر",
"value": "650000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "مرداد",
"value": "930000",
"link": "http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "شهریور",
"value": "530000",
"link": "http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html#defining-simple-links-that-open-in-the-same-page"
},
{
"label": "مهر",
"value": "920000",
"link": "http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "آبان",
"value": "580000",
"link": "http://fusioncharts.com"
},
{
"label": "آذر",
"value": "820000",
"link": "http://twitter.com/sikrigagan"
},
{
"label": "دی",
"value": "510000",
"link": "http://gagansikri.in"
},
{
"label": "بهمن",
"value": "730000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "اسفند",
"value": "620000",
"link": "http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">برنامه نویسی را از برنامه نویسان حرفه ای بیاموزید!</div>
</body>
</html>
زمانی که کاربر بخواهد با زدن روی شاخه ی نمودار یک صفحه ی جدید باز شود باید از کد زیر استفاده نماید:
داخل صفحه ی html به جای زدن link از n-link استفاده می کنیم:
<html>
<head>
<title>FusionCharts - Creating Simple Links: New Page</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Tom's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "n-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "n-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "n-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "n-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "n-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "n-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "n-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "n-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "n-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "n-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "n-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "n-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">Awesome Chart on its way!</div>
</body>
</html>
pop-up window:
زمانی که بخواهید یک صفحه ی دیگر باز نمایید همان پردازش است ولی به جای link از P-popupWin استفاده می کنیم، به صورت popup صفحه ی مورد نظر باز می شود.
<html>
<head>
<title>مرجع تخصصی برنامه نویسان</title>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Hardy's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "Jan",
"value": "520000",
//custom link: opens in new page
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"
},
{
"label": "Feb",
"value": "710000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com"
},
{
"label": "Mar",
"value": "780000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
},
{
"label": "Apr",
"value": "650000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"
},
{
"label": "May",
"value": "930000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "Jun",
"value": "530000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html"
},
{
"label": "Jul",
"value": "920000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "Aug",
"value": "580000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
},
{
"label": "Sep",
"value": "820000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://twitter.com/sikrigagan"
},
{
"label": "Oct",
"value": "510000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://gagansikri.in"
},
{
"label": "Nov",
"value": "730000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://docs.fusioncharts.com"
},
{
"label": "Dec",
"value": "620000",
"link": "P-popupWin,width=500,height=400,toolbar=no,scrollbars=yes, resizable=yes-http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">برنامه نویسی را از برنامه نویسان حرفه ای بیاموزید</div>
</body>
</html>
نوع دیگر یک صفحه ی جدید باز می نماید مثل پردازش های دیگر است ولی با این تفاوت به جای لینک از F-drill-(frame_name(optional))-link استفاده می نماییم.
کد به صورت زیر خواهد بود:
<html>
<head>
<title>مرجع تخصصی برنامه نویسان</title>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Mark's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [
{
"label": "فروردین",
"value": "520000",
//custom link: opens in same page
"link": "http://gagansikri.in"
},
{
"label": "اردیبهشت",
"value": "710000",
"link": "http://c-sharpcorner.com"
},
{
"label": "خرداد",
"value": "780000",
"link": "http://fusioncharts.com"
},
{
"label": "تیر",
"value": "650000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "مرداد",
"value": "930000",
"link": "http://www.fusioncharts.com/javascript-chart-fiddles/"
},
{
"label": "شهریور",
"value": "530000",
"link": "http://www.fusioncharts.com/dev/advanced-chart-configurations/drill-down/simple-drill-down.html#defining-simple-links-that-open-in-the-same-page"
},
{
"label": "مهر",
"value": "920000",
"link": "http://c-sharpcorner.com/members/gagan-sikri"
},
{
"label": "آبان",
"value": "580000",
"link": "http://fusioncharts.com"
},
{
"label": "آذر",
"value": "820000",
"link": "http://twitter.com/sikrigagan"
},
{
"label": "دی",
"value": "510000",
"link": "http://gagansikri.in"
},
{
"label": "بهمن",
"value": "730000",
"link": "http://docs.fusioncharts.com"
},
{
"label": "اسفند",
"value": "620000",
"link": "http://fusioncharts.com"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">برنامه نویسی را از برنامه نویسان حرفه ای بیاموزید!</div>
</body>
</html>
hotspot:
زمانی که کاربر یک صفحه ی جدیدی را باز نماید و یا به یک آدرس جدید به صورت مستقیم redirect شود از کد زیر استفاده می شود.
<html>
<head>
<title>مرجع تخصصی برنامه نویسان</title>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function() {
var simpleLinkChart=new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '650',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for 2015",
"subCaption": "Dean's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
//adding ClickURL: to make chart a hotspot
"clickURL": "n-http://gagansikri.in"
},
"data": [
{
"label": "فروردین",
"value": "520000"
},
{
"label": "اردیبهشت",
"value": "710000"
},
{
"label": "خرداد",
"value": "780000"
},
{
"label": "تیر",
"value": "650000"
},
{
"label": "مرداد",
"value": "930000"
},
{
"label": "شهریور",
"value": "530000"
},
{
"label": "مهر",
"value": "920000"
},
{
"label": "آبان",
"value": "580000"
},
{
"label": "آذر",
"value": "820000"
},
{
"label": "دی",
"value": "510000"
},
{
"label": "بهمن",
"value": "730000"
},
{
"label": "اسفند",
"value": "620000"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">برنامه نویسی را از برنامه نویسان حرفه ای بیاموزید!</div>
</body>
</html>
Chart Links
این نمودارها به گونه ای هستند که زمانی که شما بر روی هر کدام از شاخه ها کلیک نمایید اطلاعات قبلی نمودار را که قبلا داده ها وارد کرده اید نمایش می دهد.
1-Gather Parent Data
این داده ها به صورت یک فایل json و یا xml است.
2-Append Data
اضافه کردن نمودار ها برای تمام نمودار هایی که به عنوان والد هستند، فرزندانشان با یک id اضافه می شوند.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>مرجع تخصصی برنامه نویسان</title>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<!-- Location of JavaScript files depends upon user -->
<script type="text/javascript">
FusionCharts.ready(function () {
var simpleLinkChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '450',
height: '280',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "مرجع تخصصی برنامه نویسان",
"subCaption": "",
"xAxisName": "ماه های سال",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "Q1",
"value": "520000",
"link": "newchart-json-q1"
}, {
"label": "Q2",
"value": "710000",
"link": "newchart-json-q2"
}, {
"label": "Q3",
"value": "780000",
"link": "newchart-json-q3"
}, {
"label": "Q4",
"value": "650000",
"link": "newchart-json-q4"
}],
"linkeddata": [{
"id": "q1",
"linkedchart": {
"chart": {
"caption": "Monthly Sales - Q1",
"subcaption": "2015",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "April",
"value": "156000"
}, {
"label": "May",
"value": "234000"
}, {
"label": "June",
"value": "130000"
}]
}
}, {
"id": "q2",
"linkedchart": {
"chart": {
"caption": "Monthly Sales - Q2",
"subcaption": "2015",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "July",
"value": "284000"
}, {
"label": "August",
"value": "248500"
}, {
"label": "September",
"value": "177500"
}]
}
}, {
"id": "q3",
"linkedchart": {
"chart": {
"caption": "Monthly Sales - Q3",
"subcaption": "2015",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "October",
"value": "156000"
}, {
"label": "November",
"value": "312000"
}, {
"label": "December",
"value": "312000"
}]
}
}, {
"id": "q4",
"linkedchart": {
"chart": {
"caption": "Monthly Sales - Q4",
"subcaption": "2015",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "January",
"value": "162500"
}, {
"label": "February",
"value": "162500"
}, {
"label": "March",
"value": "325000"
}]
}
}]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">برنامه نویسی را از برنامه نویسان حرف های بیاموزید</div>
</body>
</html>
این نمودارها بیشتر در داشبورد های کسب و کار استفاده می شود، و از این توابع بیشتر در نمودارها و نقشه ها استفاده می شود.
خروجی کار برای هر کدام یکسان است مثلا الان اگر بخواهیم که لینک مربوط به نمودار به صورت popup window باز شود به صورت زیر خواهد بود:
- Java Script
- 2k بازدید
- 3 تشکر