CODEWITHSUNDEEP
javascriptphpmysqlcodeigniteramcharts
Juan Andres Garcia
Juan Andres Garcia

Reputation: 11

Dynamically create multi leveled drilldowns in Amcharts

I need to create a multi leveled that is dynamic because I have to drill down to hundreds or even thousands of data providers that will load from the database. The flow goes like this: I have 1, 2, 3, 4, and 5 years that will drill down to 16 Departments each and will drill down to Courses 10 or more courses. Doing it manually is tedious and I need it to be dynamic. Please help me.

The variables:

var ccs_final_data = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/final_ccs_data");

//VAR CCS AVERAGE_FINAL
var drill_down_to_ccs_courses_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_courses_data_average_final");
var drill_down_to_ccs_sections_BSIT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSIT_average_final");
var drill_down_to_ccs_sections_ACT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_ACT_average_final");
var drill_down_to_ccs_sections_BSCS_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSCS_average_final");

The graph:

    var chart2 = AmCharts.makeChart( "ccs2", {
  "theme": "light",
  type: "serial",
  pathToImages: "http://cdn.amcharts.com/lib/3/images/",
  dataProvider: ccs_final_data,
  categoryField: "category",

  categoryAxis: {
    labelRotation: 0,
    gridPosition: "start"
  },

  valueAxes: [ {
    title: "CCS FINAL TERM - Passing"
  } ],

  graphs: [ {

    valueField: "value",
    colorField: "color",
    type: "column",
    lineAlpha: 100,
    fillAlphas: 1
  } ],

  chartScrollbar: {
    "updateOnReleaseOnly": true
  },

  chartCursor: {
    bulletsEnabled: "enabled",
    bulletSize: 15,
    cursorAlpha: 100,
    cursorColor: "#CC0000",
    zoomable: true,
    categoryBalloonEnabled: true
  },
  export: {
    enabled: true
  }
} );

Here's the drill down stuff:

chart2.addListener("clickGraphItem", function (event) {
if(event.item.category == "Average"){
    event.chart.dataProvider = drill_down_to_ccs_courses_average_final;
    event.chart.validateData();
      chart2.addListener("clickGraphItem", function (event) {
            if(event.item.category == "BSIT"){
                event.chart.dataProvider = drill_down_to_ccs_sections_BSIT_average_final;
                event.chart.validateData();
            }
            else if(event.item.category == "ACT"){
                event.chart.dataProvider = drill_down_to_ccs_sections_ACT_average_final;
                event.chart.validateData();
            }      
            else if(event.item.category == "BSCS"){
                event.chart.dataProvider = drill_down_to_ccs_sections_BSCS_average_final;
                event.chart.validateData();
            }
     });
}

Upvotes: 1

Views: 747

Answers (1)

martynasma
martynasma

Reputation: 8595

I'd say the best way to make it dynamic is to include some custom field for each data point in your data that would be passed in to server-side script so it knows which data to load.

I'm assuming your data looks like this now:

[ {
  "category": "BSIT",
  "value": 100
}, {
  "category": "ACT",
  "value": 200
}, {
  "category": "BSCS",
  "value": 150
} ]

You could easily add a third field to hold the information for drill-down data load:

[ {
  "category": "BSIT",
  "value": 100,
  "drill": "ccs_sections_data_BSIT_average_final"
}, {
  "category": "ACT",
  "value": 200,
  "drill": "ccs_sections_data_ACT_average_final"
}, {
  "category": "BSCS",
  "value": 150,
  "drill": "ccs_sections_data_BSCS_average_final"
} ]

Then, when clickGraphItem event occurs, you could just take that info and pass it to load script dynamically:

chart2.addListener( "clickGraphItem", function( event ) {
  if ( event.item.dataContext.drill !== undefined ) {
    event.chart.dataProvider = AmCharts.loadJSON( "<?php echo base_url();?>index.php/osa/" + event.item.dataContext.drill );
    event.chart.validateData();
  }
} );

This way, you could have any number of drill-down levels, with each level data containing info about where to look for the data for the next level.

Also, I'm not sure as you haven't posted the code for it, so I'm assuming that AmCharts.loadJSON method is synchronous. If it's not (for example if you are using method from Data Loader), you will need to assign the chart's dataProvider after the data is loaded.

Upvotes: 1

Related Questions