Amchart dataLoader иметь детализацию динамически

Question

На основе этого урока https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/, я могу загрузить данные с помощью вызова страницы PHP с помощью dataLoader в этот вид диаграммы https://www.amcharts.com/demos/combined-bullet-column-line-chart/

Мое требование:

Когда нажмите на столбец на диаграмме, ему нужно вызвать другой файл php для извлечения данных с помощью другого запроса, основанного на выборе в диаграмме (который будет использоваться как условие where в запросе).

Я пытался что-то с ниже код, но ничего не работает

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(); 
     }; 

     }); 

Незлая помощь.

С уважением

Answer 1

Вы должны вызвать метод loadData в dataLoader после того, как вы измените URL, чтобы загрузить из нового источника:

chart.addListener("clickGraphItem", function (event) { 
    chart.dataLoader.url = "bed-turnover-drill-province.php"; 
    chart.dataLoader.loadData(); 
};