This project is read-only.

How to create DrillDown functionality

Mar 15, 2012 at 6:44 AM

Can anyone give an example code to create the chart with drilldown functionality?

Mar 16, 2012 at 7:57 PM

You can find example code in "Column with drilldown" demo at the sample project (DotNet.Highcharts.Samples.zip (ASP.NET MVC3)). 

And here is the code:

            string[] categories = new[] { "MSIE", "Firefox", "Chrome", "Safari", "Opera" };
            const string NAME = "Browser brands";
            Data data = new Data(new[]
                                 {
                                     new Point
                                     {
                                         Y = 55.11,
                                         Color = Color.FromName("colors[0]"),
                                         Drilldown = new Drilldown
                                                     {
                                                         Name = "MSIE versions",
                                                         Categories = new[] { "MSIE 6.0", "MSIE 7.0", "MSIE 8.0", "MSIE 9.0" },
                                                         Data = new Data(new object[] { 10.85, 7.35, 33.06, 2.81 }),
                                                         Color = Color.FromName("colors[0]")
                                                     }
                                     },
                                     new Point
                                     {
                                         Y = 21.63,
                                         Color = Color.FromName("colors[1]"),
                                         Drilldown = new Drilldown
                                                     {
                                                         Name = "Firefox versions",
                                                         Categories = new[] { "Firefox 2.0", "Firefox 3.0", "Firefox 3.5", "Firefox 3.6", "Firefox 4.0" },
                                                         Data = new Data(new object[] { 0.20, 0.83, 1.58, 13.12, 5.43 }),
                                                         Color = Color.FromName("colors[1]")
                                                     }
                                     },
                                     new Point
                                     {
                                         Y = 11.94,
                                         Color = Color.FromName("colors[2]"),
                                         Drilldown = new Drilldown
                                                     {
                                                         Name = "Chrome versions",
                                                         Categories = new[] { "Chrome 5.0", "Chrome 6.0", "Chrome 7.0", "Chrome 8.0", "Chrome 9.0", "Chrome 10.0", "Chrome 11.0", "Chrome 12.0" },
                                                         Data = new Data(new object[] { 0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22 }),
                                                         Color = Color.FromName("colors[2]")
                                                     }
                                     },
                                     new Point
                                     {
                                         Y = 7.15,
                                         Color = Color.FromName("colors[3]"),
                                         Drilldown = new Drilldown
                                                     {
                                                         Name = "Safari versions",
                                                         Categories = new[] { "Safari 5.0", "Safari 4.0", "Safari Win 5.0", "Safari 4.1", "Safari/Maxthon", "Safari 3.1", "Safari 4.1" },
                                                         Data = new Data(new object[] { 4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14 }),
                                                         Color = Color.FromName("colors[3]")
                                                     }
                                     },
                                     new Point
                                     {
                                         Y = 2.14,
                                         Color = Color.FromName("colors[4]"),
                                         Drilldown = new Drilldown
                                                     {
                                                         Name = "Opera versions",
                                                         Categories = new[] { "Opera 9.x", "Opera 10.x", "Opera 11.x" },
                                                         Data = new Data(new object[] { 0.12, 0.37, 1.65 }),
                                                         Color = Color.FromName("colors[4]")
                                                     }
                                     }
                                 });

            Highcharts chart = new Highcharts("chart")
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
                .SetTitle(new Title { Text = "Browser market share, April, 2011" })
                .SetSubtitle(new Subtitle { Text = "Click the columns to view versions. Click again to view brands." })
                .SetXAxis(new XAxis { Categories = categories })
                .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Total percent market share" } })
                .SetLegend(new Legend { Enabled = false })
                .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" })
                .SetPlotOptions(new PlotOptions
                                {
                                    Column = new PlotOptionsColumn
                                             {
                                                 Cursor = Cursors.Pointer,
                                                 Point = new PlotOptionsColumnPoint { Events = new PlotOptionsColumnPointEvents { Click = "ColumnPointClick" } },
                                                 DataLabels = new PlotOptionsColumnDataLabels
                                                              {
                                                                  Enabled = true,
                                                                  Color = Color.FromName("colors[0]"),
                                                                  Formatter = "function() { return this.y +'%'; }",
                                                                  Style = "fontWeight: 'bold'"
                                                              }
                                             }
                                })
                .SetSeries(new Series
                           {
                               Name = "Browser brands",
                               Data = data,
                               Color = Color.White
                           })
                .SetExporting(new Exporting { Enabled = false })
                .AddJavascripFunction(
                    "TooltipFormatter",
                    @"var point = this.point, s = this.x +':<b>'+ this.y +'% market share</b><br/>';
                      if (point.drilldown) {
                        s += 'Click to view '+ point.category +' versions';
                      } else {
                        s += 'Click to return to browser brands';
                      }
                      return s;"
                )
                .AddJavascripFunction(
                    "ColumnPointClick",
                    @"var drilldown = this.drilldown;
                      if (drilldown) { // drill down
                        setChart(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
                      } else { // restore
                        setChart(name, categories, data.data);
                      }"
                )
                .AddJavascripFunction(
                    "setChart",
                    @"chart.xAxis[0].setCategories(categories);
                      chart.series[0].remove();
                      chart.addSeries({
                         name: name,
                         data: data,
                         color: color || 'white'
                      });",
                    "name", "categories", "data", "color"
                )
                .AddJavascripVariable("colors", "Highcharts.getOptions().colors")
                .AddJavascripVariable("name", "'{0}'".FormatWith(NAME))
                .AddJavascripVariable("categories", JsonSerializer.Serialize(categories))
                .AddJavascripVariable("data", JsonSerializer.Serialize(data));

Mar 21, 2012 at 11:20 AM

Thanks!

How can I make  drill down chart for chart having multiple series. I have two separate column series, both having years (2009, 2010, 2011)  as categories. When I click the column, I would like to drill down to both series having moths (Jan, Feb, Mar,...) as categories.

Apr 30, 2012 at 10:50 AM
Edited Apr 30, 2012 at 10:51 AM

Hi

I have drill-down functionality on my charts, but i too have multiple series.

This is not a problem in filling the data for each drill-down, but... on the setchart javascript function, how do i remove all series (bearing  in mind that my series are created dynamically, and can vary in qty) ?

Also, when in drill-down chart, how can i provide an option to return to previous 'parent' chart ?

Oh, and my drill-downs appear as line chart..how can i set as column charts ?

Many Thanks

Mark