Based on this tutorial https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/, I am able to load the data by calling a php page using dataLoader into this kind of chart https://www.amcharts.com/demos/combined-bullet-column-line-chart/
My requirement:
When click on the column in the chart, it needs to call the another php file to fetch data with a different query based on the selection in the chart (that will be used as a where condition in query).
I tried something with the below code, but nothing works
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "MM-YYYY",
"precision": 2,
"valueAxes": [{
"id": "v1",
"title": "Average",
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return Math.round(value) ;
}
}, {
"id": "v2",
"title": "Maximum",
"gridAlpha": 0,
"position": "right",
"autoGridCount": false
}],
"graphs": [{
"id": "g3",
"valueAxis": "v1",
"lineColor": "#e1ede9",
"fillColors": "#e1ede9",
"fillAlphas": 1,
"type": "column",
"title": "Actual Average",
"valueField": "Average",
"clustered": false,
"columnWidth": 12,
"legendValueText": "[[value]]",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g4",
"valueAxis": "v1",
"lineColor": "#62cf73",
"fillColors": "#62cf73",
"fillAlphas": 1,
"type": "column",
"title": "Actual Maximum",
"valueField":"Maximum",
"clustered": false,
"columnWidth":8,
"legendValueText": "[[value]]",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g1",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#20acd4",
"type": "smoothedLine",
"title": "Target Average",
"useLineColorForBulletBorder": true,
"valueField": "Average",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g2",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#e1ede9",
"type": "smoothedLine",
"dashLength": 5,
"title": "Target Maximum",
"useLineColorForBulletBorder": true,
"valueField": "Maximum",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "Month",
"categoryAxis": {
"parseDates": true,
"dashLength":1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": true
},
//"dataProvider":[{"Month":"01-2016","Average":43.63888889,"Maximum":50.06222222,"Province":"Riyadh"},{"Month":"02-2016","Average":46.11888889,"Maximum":52.78222222,"Province":"Eastern Province"},{"Month":"03-2016","Average":48.33740741,"Maximum":49.78555556,"Province":"Eastern Province"},{"Month":"04-2016","Average":39.37629630,"Maximum":41.25111111,"Province":"Eastern Province"},{"Month":"05-2016","Average":43.98481481,"Maximum":54.25000000,"Province":"Eastern Province"},{"Month":"06-2016","Average":49.68888889,"Maximum":71.53777778,"Province":"Riyadh"},{"Month":"07-2016","Average":39.92333333,"Maximum":44.52111111,"Province":"Eastern Province"},{"Month":"08-2016","Average":48.72370370,"Maximum":58.98222222,"Province":"Makkah"},{"Month":"09-2016","Average":34.18370370,"Maximum":43.88111111,"Province":"Makkah"},{"Month":"10-2016","Average":48.77962963,"Maximum":63.22333333,"Province":"Makkah"}]
"dataLoader": {"url": "bed-turnover.php"}
});
chart.addListener("clickGraphItem", function (event) {
// let's look if the clicked graph item had any subdata to drill-down into
// wow it has!
// let's set that as chart's
//chart.dataLoader.loadFile("bed-turnover-drill-province.php");
// event.chart.dataLoader ={"url": "bed-turnover-drill-province.php"};
// event.chart.validateData();
chart.dataLoader = { url: "bed-turnover-drill-province.php"}
//chart.validateData();
};
});
Kindly help.
Regards
You have to call the dataLoader's loadData method after you change the URL to load from the new source:
chart.addListener("clickGraphItem", function (event) {
chart.dataLoader.url = "bed-turnover-drill-province.php";
chart.dataLoader.loadData();
};