It is currently Thu Oct 23, 2014 12:19 am Advanced search

Column Drill down chart to Nth level

Technical support, bug reports and more.

Column Drill down chart to Nth level

Postby Unix Guy » Wed Mar 14, 2012 1:25 am

References:
http://jsfiddle.net/hfrntt/NULTY/3/
http://www.highcharts.com/demo/column-drilldown

I am trying to create a dynamic Nth level column drilldown chat. I do understand that I need then Nth nested level of datas - which I would generate in xml format. In such a term I was modifying an existing demo code to create another level drill down:

Existing:
Code: Select all
      data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               data: [{
                   y: 33.06,
                   drilldown: {
                       name: 'drilldown next level',
                       categories: ['a', 'b', 'c'],
                       data: [23,54,47],
                       color: colors[0]
                   }
               }, 10.85, 7.35, 2.41],
               color: colors[0]
            }
         }



Modified:

Code: Select all
      data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               data: [{
                   y: 33.06,
                   color: colors[0],
                   drilldown: {
                       name: 'drilldown next next level',
                       categories: ['a', 'b', 'c'],
                       color: colors[0],
                       data: [{
                               y: 33.06,
                               color: colors[0],
                               drilldown: {
                                       name: 'drilldown next next next level',
                                       categories: ['a', 'b', 'c'],
                                       data: [23,54,47],
                                       color: colors[0]
                                }
                        },10.85, 7.35],
                       }
                        },2.41,7.35,10.85],
                   }
               color: colors[0]
         }


But after modification the chart is not at all coming up. I am not sure where the mistake is. Also if I have to read data for Nth level from an XML file - each level what details I need to have like y, color, name etc - if possible please let me know the XML structure format. I am trying to map as per existing example given above. Next how to read and create a dynamic chart data via Javascript.


Since I did not want to postreply to my topic itself, I was able to resolve the chart not getting displayed properly for level 3:

Code: Select all
      level = 0,
      data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
               level: 1,
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               color: colors[0],
               data: [{
                   y: 33.06,
                   drilldown: {
                       level: 2,
                       name: 'drilldown next next level',
                       categories: ['a', 'b', 'c'],
                       color: colors[0],
                       data: [{
                               y: 33.06,
                               color: colors[0],
                               drilldown: {
                                       level: 3,
                                       name: 'drilldown next next next level',
                                       categories: ['a', 'b', 'c'],
                                       data: [23,54,47],
                                       color: colors[0]
                                }
                        },10.85, 7.35],
                       }
                        },2.41,7.35,10.85],
                   }
         }


But please answer my other concern - how an XML file be organized (by tags) and read all chart properties to any level?
Say the XML file will be generated by a script and evaluates that 6th level of drilldown is required and at some time more or less?
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Fusher » Wed Mar 14, 2012 4:57 pm

I think it depends only on you how would you organize your XML. After all you will be parsing that data.. Check this how-to: http://www.highcharts.com/documentation ... processing also some examples: http://www.highcharts.com/studies/data-from-xml.htm
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7373
Joined: Mon Jan 30, 2012 12:16 pm

Re: Column Drill down chart to Nth level

Postby Unix Guy » Fri Mar 16, 2012 12:32 am

Thanks for the link Fusher. I do understand that XML schema would be based upon my XML parsing but Column DrillDown chart has required set of data / parameters to be presented in specified format. The worst the XML schema I have more the coding, effort and energy would be wasted resulting in no valid output.

Below is a XML schema that I have thought off for graph available at : http://jsfiddle.net/hfrntt/NULTY/3/ . The graph is column drilldown sample at the link. Please provide your opinion / comments such that XML schema would be proficient enough to be used for column drilldown graph.

Code: Select all
<Highcharts>
<name>'Browser Brands'</name>
<level>0</level>
<data>
<categories>
       <name>'MSIE'</name>
       <y>55.11</y>
       <color>colors[0]</color>
       <drilldown>
             <level>1</level>
             <name>'MSIE versions'</name>
             <color>color[0]</color>
             <categories>
                 <name>'MSIE 8.0'</name>
                 <data>
                       <y>33.06</y>
                       <drilldown>
                           <level>2</level>
                           <name>'drilldown next level'</name>
                           <categories>
                               <name>'a'</name>
                               <data>23</data>
                            </categories>
                           <categories>
                               <name>'b'</name>
                               <data>54</data>
                            </categories>
                           <categories>
                               <name>'c'</name>
                               <data>47</data>
                            </categories>
                       </drilldown>
                 </data>
             </categories>
             <categories>
                 <name>'MSIE 6.0'</name>
                  <y>10.85</y>
             </categories>
             <categories>
                 <name>'MSIE 7.0'</name>
                  <y>7.35</y>
             </categories>
             <categories>
                 <name>'MSIE 9.0'</name>
                  <y>2.41</y>
             </categories>
       </drilldown>
</categories>
<categories>
       <name>'Firefox'</name>
        <y>21.63</y>
        <color>colors[1]</color>
        <drilldown>
            <level>1</level>
            <name>'Firefox versions'</name>
            <categories>
                <name>'Firefox 3.6'</name>
                <data>13.52</data>
            </categories>
            <categories>
                <name>'Firefox 4.0'</name>
                <data>5.43</data>
            </categories>
            <categories>
                <name>'Firefox 3.5'</name>
                <data>1.58</data>
            </categories>
            <categories>
                <name>'Firefox 3.0'</name>
                <data>0.83</data>
            </categories>
            <categories>
                <name>'Firefox 2.0'</name>
                <data>0.20</data>
            </categories>
        </drilldown>
</categories>
<categories>
       <name>'Chrome'</name>
        <y>11.94</y>
        <color>colors[2]</color>
        <drilldown>
            <level>1</level>
            <name>'Chrome versions'</name>
            <categories>
                <name>'Firefox 10.0'</name>
                <data>13.52</data>
            </categories>
            <categories>
                <name>'Chrome 11.0'</name>
                <data>5.43</data>
            </categories>
            <categories>
                <name>'Chrome 8.0'</name>
                <data>1.58</data>
            </categories>
            <categories>
                <name>'Chrome 9.0'</name>
                <data>0.83</data>
            </categories>
            <categories>
                <name>'Chrome 12.0'</name>
                <data>0.20</data>
            </categories>
            <categories>
                <name>'Chrome 6.0'</name>
                <data>0.20</data>
            </categories>
            <categories>
                <name>'Chrome 5.0'</name>
                <data>0.20</data>
            </categories>
            <categories>
                <name>'Chrome 7.0'</name>
                <data>0.20</data>
            </categories>
       </drilldown>
</categories>
<categories>
       <name>'Safari versions'</name>
       <y>7.15</y>
       <color>color[3]</color>
       <drilldown>
            <level>1</level>
            <categories>
                <name>'Safari 5.0'</name>
                <data>4.55</data>
            </categories>
            <categories>
                <name>'Safari 4.0'</name>
                <data>1.42</data>
            </categories>
            <categories>
                <name>'Safari Win 5.0'</name>
                <data>0.23</data>
            </categories>
            <categories>
                <name>'Safari 4.1'</name>
                <data>0.21</data>
            </categories>
            <categories>
                <name>'Safari/Maxthon'</name>
                <data>0.20</data>
            </categories>
            <categories>
                <name>'Safari 3.1'</name>
                <data>0.19</data>
            </categories>
            <categories>
                <name>'Safari 41'</name>
                <data>0.14</data>
            </categories>
       </drilldown>
</categories>
<categories>
       <name>'Opera'</name>
       <y>2.14</y>
       <color>colors[4]</color>
       <drilldown>
             <level>1</level>
             <name>'Opera versions'</name>
            <categories>
                <name>'Opera 11.x'</name>
                <data>1.65</data>
            </categories>
            <categories>
                <name>'Opera 10.x'</name>
                <data>0.37</data>
            </categories>
            <categories>
                <name>'Opera 9.x'</name>
                <data>0.12</data>
            </categories>
       </drilldown>
</categories>
</data>
</Highcharts>
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Unix Guy » Fri Mar 16, 2012 5:22 am

Well I am a novice user both in UI and JS side. So if anyone can provide me XML layout and JS code to implement the 'Column Drill down chart to Nth level' it would be very helpful - such that I can make use of same in our website. I basically do coding in C/C++ and have very basic knowledge in JS. The drill down graph is of really best one I have found and best tool to represent data as in birdÔÇÖs eye view.

Thanks in advance.
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Unix Guy » Fri Mar 16, 2012 8:28 am

Is this XML tags is better? Can anyone proide me with the JS code to create thhe column drop ?

Code: Select all
<chart>
     <categories>
        <name>'MSIE'</name>
        <name>'Firefox'</name>
        <name>'Chrome'</name>
        <name>'Safari'</name>
        <name>'Opera'</name>
      </categories>
      <name>'Browser Brands'</name>
      <data>
             <series>
               <y>55.11</y>
               <drilldown>
                  <name>'MSIE versions'</name>
                  <categories>
                      <name>'MSIE 8.0'</name>
                      <name>'MSIE 6.0'</name>
                      <name>'MSIE 7.0'</name>
                      <name>'MSIE 9.0'</name>
                  </categories>
                 <data>
                     <series>
                       <y>33.06</y>
                       <drilldown>
                           <name>'drilldown next level'</name>
                            <categories>
                              <name>'a'</name>
                              <name>'b'</name>
                              <name>'c'</name>
                            </categories>
                            <data>
                              <point>23</point>
                              <point>54</point>
                              <point>47</point>
                             </data>
                       </drilldown>
                     </series>
                   <point>10.85</point>
                   <point>7.35</point>
                   <point>2.41</point>
                 </data>
               </drilldown>
             </series>
             <series>
               <y>21.63</y>
                <drilldown>
                <name>'Firefox versions'</name>
                <categories>
                    <name>'Firefox 3.6'</name>
                    <name>'Firefox 4.0'</name>
                    <name>'Firefox 3.5'</name>
                    <name>'Firefox 3.0'</name>
                    <name>'Firefox 2.0'</name>
                </categories>
                 <data>
                    <point>13.52</point>
                    <point>5.43</point>
                    <point>1.58</point>
                    <point>0.83</point>
                    <point>0.20</point>
                 </data>
               </drilldown>
             </series>
             <series>
               <y>11.94</y>
               <drilldown>
                <name>'Chrome versions'</name>
                <categories>
                   <name>'Chrome 10.0'</name>
                   <name>'Chrome 11.0'</name>
                   <name>'Chrome 8.0'</name>
                   <name>'Chrome 9.0'</name>
                   <name>'Chrome 12.0'</name>
                   <name>'Chrome 6.0'</name>
                   <name>'Chrome 5.0'</name>
                   <name>'Chrome 7.0'</name>
                </categories>
                <data>
                   <point>9.91</point>
                   <point>0.50</point>
                   <point>0.36</point>
                   <point>0.32</point>
                   <point>0.22</point>
                   <point>0.19</point>
                   <point>0.12</point>
                   <point>0.12</point>
               </data>
               </drilldown>
               </series>
               <series>
               <y>7.15</y>
               <drilldown>
               <name>'Safari versions'</name>
               <categories>
                   <name>'Safari 5.0'</name>
                   <name>'Safari 4.0'</name>
                   <name>'Safari Win 5.0'</name>
                   <name>'Safari 9.0'</name>
                   <name>'Safari 12.0'</name>
                   <name>'Safari 6.0'</name>
                   <name>'Safari 5.0'</name>
               </categories>
               <data>
                   <point>9.91</point>
                   <point>0.50</point>
                   <point>0.36</point>
                   <point>0.32</point>
                   <point>0.22</point>
                   <point>0.19</point>
                   <point>0.12</point>
               </data>
            </drilldown>
           </series>
           <series>
              <y>2.14</y>
               <drilldown>
               <name>'Opera versions'</name>
               <categories>
                  <name>'Opera 11.x'</name>
                  <name>'Opera 10.x'</name>
                  <name>'Opera 9.x'</name>
               </categories>
                <data>
                   <point>1.65</point>
                   <point>0.37</point>
                   <point>0.12</point>
                 </data>
                </drilldown>
            </series>
        </data>
</chart>
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Fusher » Fri Mar 16, 2012 4:14 pm

I think second is better, just check again how to parse this XML in my post above (there is example).
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7373
Joined: Mon Jan 30, 2012 12:16 pm

Re: Column Drill down chart to Nth level

Postby Unix Guy » Sat Mar 17, 2012 1:33 am

Thanks but still I need some clarification at least on the 'Facts' and traversing approach to be taken for considerations keeping in mind that I am new to Chart and JS world:

Code: Select all
      data = [{
      }] = empty series
      data = [{
      y: 21
      }] = one series
   ..........
   data = [{
       y:21,
       drilldown : {
         name, categories, data
      }
      }] = one series->drilldown
   ...........


There are 3 main branch node = Series(y), DrillDown(name,categories,data), Data(series/point)

Facts =
A series will never have values leaf node other than property y
A series is represented as a {..<property : values>..}
A series might have one drilldown and a drilldown will have either data or series beanch in repetition
A series will always have a proerty y or a drilldown
A drilldown will have name leaf node,categories branch and either series or data branch
A category branch will always have a name leaf node
A data branch (end node) will always have values leaf node and no Series branch further

Data for graph would probably be in some XML repetitive format like mentioned below:

Code: Select all
chart [root node]
   categories [branch node]
      name [leaf node]
   name [leaf node]
   series
      y [leaf node]
      drilldown [branch node]
         name [leaf node]
         categories [branch node]
            name [leaf node]
         series [branch node]
            y [leaf node]
            drilldown [branch node]
               name [leaf node]
               categories [branch node]
                  name [leaf node]
               data [branch name]
                  values [leaf node]
            /drilldown
            values [leaf node]
         /series
      /drilldown
   /series
/chart


So node Repetition = series->drilldown->data->series->drilldown->data.......(data node having points value)
drilldown->categories
drilldown->data
data->series / points(finally)


Code: Select all
Traversing path approach to be taken =
loop
{
          for (mainseries)
          {
              get y
              for(series->drilldown)
              {
                 get name, categories(names), data(points)
                 for(drilldown->series)
                 {
                        mainseries = currentseries
                 }
              }
         }
}


Also I am not able to complete the JS code. In the XML tree response I need to traverse for each Series->for each DrillDown->for each Data->if series is there then traverse for repetitive Series->for each DrillDown->for each Data->lastly set Data points

Can anyone please help is completing the same - below is my code:

I tried drafting the code based upon the XML tree structure mentioned above but I get only the title 'Browse Market Share,April,2011' while everything else is blank. Please see the HTML file I wrote (to read, parse and create column drill down chart) based upon XML tree structure mentioned above in the thread:

Note the code at line 127 and 128 - I was not able to find a method to set the chart initial series name and level method. Can anyone please help me out in completing my project? I am completely stuck with the issue:

Code: Select all

     1  <html>
     2          <head>
     3                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     4                  <title>Highcharts Example</title>


     5                  <!-- 1. Add these JavaScript inclusions in the head of your page -->
     6                  <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script-->
     7                  <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
     8                  <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js"></script>
     9                  <script type="text/javascript" src="highcharts/js/highcharts.js"></script>

    10  <script type="text/javascript">
    11  var chart;
    12  $(document).ready(function() {
    13     var colors = Highcharts.getOptions().colors;
    14     var index=0;
    15     var options = ({
    16        chart: {
    17           renderTo: 'container',
    18           type: 'column'
    19        },
    20        title: {
    21           text: 'Browser market share, April, 2011'
    22        },
    23        subtitle: {
    24           text: 'Click the columns to view versions. Click again to view brands.'
    25        },
    26        xAxis: {
    27           categories: []
    28        },
    29        yAxis: {
    30           title: {
    31              text: 'Total percent market share'
    32           }
    33        },
    34        plotOptions: {
    35           column: {
    36              cursor: 'pointer',
    37              point: {
    38                 events: {
    39                    click: function() {

    40                       var drilldown = this.drilldown;
    41                       if (drilldown) { // drill down
    42
    43                           this.series.chart.setTitle({
    44                               text: drilldown.name
    45                           });
    46
    47                          setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
    48                       } else { // restore
    49                          this.series.chart.setTitle({
    50                                  text: chart.name
    51                           });
    52                          setChart(name, categories, data);
    53                       }
    54                    }
    55                 }
    56              },
    57              dataLabels: {
    58                 enabled: true,
    59                 color: colors[0],
    60                 style: {
    61                    fontWeight: 'bold'
    62                 },
    63                 formatter: function() {
    64                    return this.y +'%';
    65                 }
    66              }
    67           }
    68        },
    69        tooltip: {
    70           formatter: function() {
    71              var point = this.point,
    72                 s = this.x +':<b>'+ this.y +'% market share</b><br/>';
    73              if (point.drilldown) {
    74                 s += 'Click to view '+ point.category +' versions';
    75              } else {
    76                 s += 'Click to return to browser brands';
    77              }
    78              return s;
    79           }
    80        },
    81        series: [],
    82        exporting: {
    83           enabled: false
    84        }
    85     });
    86

    87  $.get('ex.xml', function(xml) {
    88                  var $xml = $(xml);
    89                  $('chart', $xml).children('categories').each(function() {
    90                          options.xAxis.categories.push($(this).find('name').text());
    91                  });
    92                                          var seriesDownSearch = function(){
    93                                                  var seriesOptions = {
    94                                                          y: parseFloat($(this).find('y').text()).toFixed(2),
    95                                                          color: colors[index],
    96                                                          level : index + 1,
    97                                                          drilldown : []
    98                                                          };
    99                                                          $(this).children('drilldown').each(function(){
   100                                                          var drilldown = {
   101                                                                  name : $(this).children('name').text(),
   102                                                                  level : index + 1,
   103                                                                  color: colors[index],
   104                                                                  categories : [],
   105                                                                  data : []
   106                                                          };
   107                                                          $(this).children('categories').each(function() {
   108                                                                  drilldown.categories.push($(this).find('name').text());
   109                                                          });
   110                                                          $(this).children('data').each(function() {
   111                                                                  $(this).children('series').each(seriesDownSearch);
   112                                                                  var data = {
   113                                                                  point: []
   114                                                                  };
   115                                                                  $(this).children('point').each(function() {
   116                                                                          data.point.push(parseFloat($(this).text()).toFixed(2));
   117                                                                  });
   118                                                                  drilldown.data.push(data);
   119                                                                  seriesOptions.drilldown.push(drilldown);
   120                                                                  options.series.push(seriesOptions);
   121                                                                  });
   122                                                          });
   123                                                          index = index + 1;
   124                                                  };
   125                                                  $xml.find('chart > data').children('series').each(seriesDownSearch);
   126                  chart = new Highcharts.Chart(options);
   127                  chart.series.name = $('chart', $xml).children('name').text();
   128                  chart.series.level = 0;
   129  });

   130     function setChart(name, categories, data, color) {
   131        chart.xAxis[0].setCategories(categories);
   132        chart.series[0].remove();
   133        chart.addSeries({
   134           name: name,
   135           data: data,
   136           color: color || 'white'
   137        });
   138     }
   139  });
   140                  </script>

   141          </head>
   142          <body>

   143                  <!-- 3. Add the container -->
   144                  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


   145          </body>
   146  </html>


Finally how to set this chart options to the Chart?

The issue with setting the options to chart is that I cannot find a proper way to construct the set the chart options. Since my function is recursive I am not sure how to create and properly set the chart options as processed from the XML tree?

Please help and re-confirm my understanding.
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Unix Guy » Mon Mar 19, 2012 4:18 pm

Please help to resolve this issue .. I am completely blocked due to this issue in using HighChatrs?
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Fusher » Tue Mar 20, 2012 3:12 pm

Hi,
some corrections:
1)
Code: Select all
$('chart', $xml).children('categories').children('name').each(function() {
                    options.xAxis.categories.push($(this).text());
              });

In your example you have only one category with all names.
2)Remove all '.toFixed(2)' -> this funtion returns string, when data for points should be number.
3)
Code: Select all
var seriesOptions = {
                    data: [parseFloat($(this).find('y').text())],
                    color: colors[index],
                    level : index + 1,
                    drilldown : []
                 };

Data for series should be in array data, not 'y'.
4) In example with 3rd drilldown level are some global variables - if you want similar working example, you have to create this to.
5) The last and I think the most important - in example with 3rd drilldown you have ONE series which contains every one drilldown:
Code: Select all
series: [{
    name: 'xxx',
    data: [{
          // first object
    },{
         // second object
    },{
         // third etc.
    }]
}]

When in your example is:
Code: Select all
series: [{
    data: [{
          // first object
    }]
},{
    data: [{
          // second object
    }]
},{
    data: [{
          // third etc
    }]
}]
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7373
Joined: Mon Jan 30, 2012 12:16 pm

Re: Column Drill down chart to Nth level

Postby Unix Guy » Wed Mar 21, 2012 2:55 am

Thanks Fusher. But till now I did some code and it works somewhat fine based upon the example XML tree structure I have earlier posted in this thread. Since I am almost near to completion [self-try it your side], I would first finish it and then incorporate your comments, which is completely justifiable and valuable. I am not sure whatÔÇÖs wrong part I am doing in my code currently [when migrating to Nth depth] and travelling upwards. Note my findings via Firebug yields that data construct for chart is completely fine, maybe I am just missing an inch to completion:

Code: Select all
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Highcharts Example Not Working</title>


                <!-- 1. Add these JavaScript inclusions in the head of your page -->
                <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js"></script-->
                <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
                <script type="text/javascript" src="highcharts/js/highcharts.js"></script>

<script type="text/javascript">
var chart;
var seriesOpts =[];
var dlevel = 0;
var index = 0;
$(document).ready(function() {
   var colors = Highcharts.getOptions().colors;
   var index = 0;
   var chartdata = {
                        name :'',
                        color:0,
                        level:0,
                        data:[]
                };
   var options = ({
      chart: {
         renderTo: 'container',
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: []
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                     } else { // restore
                        this.series.chart.setTitle({
                                text: chart.name
                         });
                        setChart(name, categories, data);
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }
         }
      },
      tooltip: {
         formatter: function() {
            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;
         }
      },
      series: [],
      exporting: {
         enabled: false
      }
   });


$.get('ex.xml', function(xml) {
                var $xml = $(xml);
                $('chart', $xml).children('categories').children('name').each(function() {
                        options.xAxis.categories.push($(this).text());
                });
                                        var seriesDownSearch = function(){
                                                var seriesOptions = {
                                                        y : +parseFloat($(this).find('y').text()).toFixed(2),
                                                        color: colors[index],
                                                        level : dlevel
                                                        };
                                                        $(this).children('drilldown').each(function(){
                                                        drilldown = {
                                                                name : $(this).children('name').text(),
                                                                level : dlevel + 1,
                                                                color: colors[index]
                                                        };
                                                        var categories = [];
                                                        var data = [];
                                                        $(this).children('categories').find('name').each(function() {
                                                                categories.push($(this).text());
                                                        });
                                                        $(this).children('data').each(function() {
                                                                if($(this).children('series').length > 0)
                                                                {
                                                                        if(dlevel == 0)
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                seriesOpts.push($.extend(true, {}, seriesOptions));
                                                                        }
                                                                        else
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                var seriestemp = seriesOpts.pop();
                                                                                seriestemp.drilldown['data'] = $.extend(true, {}, seriesOptions);
                                                                                seriesOpts.push($.extend(true, {}, seriestemp));
                                                                        }
                                                                        dlevel = dlevel + 1;
                                                                        $(this).children('series').each(seriesDownSearch);
                                                                }
                                                                $(this).children('point').each(function() {
                                                                        data.push(+parseFloat($(this).text()).toFixed(2));
                                                                });
                                                                if(dlevel >= 1)
                                                                {
                                                                        drilldown['categories'] = categories;
                                                                        drilldown['data'] = data.slice();
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        var seriestemp = seriesOpts.pop();
                                                                        seriestemp.drilldown['data']= ($.extend(true, {}, seriesOptions));
                                                                        seriesOpts.push($.extend(true, {}, seriestemp));
                                                                }
                                                        });
                                                        if(dlevel == 0)
                                                        {
                                                                drilldown['categories'] = categories;
                                                                var seriestemp = seriesOpts.pop();
                                                                if(typeof seriestemp == 'undefined')
                                                                {
                                                                        drilldown['data'] = [];
                                                                        drilldown.data.push(data.slice());
                                                                        seriesOptions['drilldown'] = $.extend(true, {}, drilldown);
                                                                }
                                                                else
                                                                {
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        seriesOptions['data'] = [];
                                                                        seriesOptions.data.push($.extend(true, {}, seriestemp));
                                                                        seriesOptions.data.push(data);
                                                                }
                                                                seriesOpts.push($.extend(true, {}, seriesOptions));
                                                        }
                                                });
                                                if(dlevel > 0)
                                                {
                                                        dlevel = dlevel - 1;
                                                        return;
                                                }
                                                dlevel = 0;
                                                if(seriesOpts.length >= 1)
                                                {
                                                        for(it = 0; it < seriesOpts.length;it++)
                                                                chartdata.data.push(seriesOpts[it]);
                                                }
                                                else
                                                {
                                                        chartdata.data.push(seriesOpts);
                                                }
                                                seriesOpts.splice(0, seriesOpts.length);
                                                index = index + 1;
                                        };
                $xml.find('chart > data').children('series').each(seriesDownSearch);
                chartdata.name = $('chart', $xml).children('name').text();
                chartdata.level = 0;
                chartdata.color = 'white';
                options.series.push(chartdata);
                chart = new Highcharts.Chart(options);
});

function setChart(name, categories, data, color) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();
      chart.addSeries({
         name: name,
         data: data,
         color: color || 'white'
      });
   }
});
                </script>

        </head>
        <body>

                <!-- 3. Add the container -->
                <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


        </body>
</html>

Last edited by Unix Guy on Wed Mar 21, 2012 11:14 pm, edited 1 time in total.
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Unix Guy » Wed Mar 21, 2012 11:14 pm

Below is my working code, but 2 things I need to mention and 2 things for clarification:

Note:
a) I have an alert in my code to dump the chardata in JSON format which comes out as per data mentioned in your example for refernce: http://jsfiddle.net/hfrntt/NULTY/3/ . But traversing upwards is having issue

c)The code has some hardcoding of steps but that does not do any hard - its just for setting the chart data options correctly

Queries:

a) How the data should be represented? Fusher the seriesOptions object construct you have provided has drilldown defined outside of data array and 'data of y' values for all series in one data array? What is the right way to have it defined as I understand drilldown should be under each data series?
b) What are the other settings that we should do for Column drill down Highchart?

ChartData as dumped in JSON format:

Code: Select all
ChartData : {
    "name": "Browser Brands",
    "color": "white",
    "level": 0,
    "data": [
        {
            "y": 55.11,
            "color": "#4572A7",
            "level": 0,
            "drilldown": {
                "name": "MSIE versions",
                "level": 1,
                "color": "#4572A7",
                "categories": [
                    "MSIE 8.0",
                    "MSIE 6.0",
                    "MSIE 7.0",
                    "MSIE 9.0"
                ],
                "data": [
                    {
                        "y": 33.06,
                        "color": "#4572A7",
                        "level": 1,
                        "drilldown": {
                            "name": "drilldown next level",
                            "level": 2,
                            "color": "#4572A7",
                            "categories": [
                                "a",
                                "b",
                                "c"
                            ],
                            "data": [
                                23,
                                54,
                                47
                            ]
                        }
                    },
                    10.85,
                    7.35,
                    2.41
                ]
            }
        },
        {
            "y": 21.63,
            "color": "#AA4643",
            "level": 0,
            "drilldown": {
                "name": "Firefox versions",
                "level": 1,
                "color": "#AA4643",
                "categories": [
                    "Firefox 3.6",
                    "Firefox 4.0",
                    "Firefox 3.5",
                    "Firefox 3.0",
                    "Firefox 2.0"
                ],
                "data": [
                    13.52,
                    5.43,
                    1.58,
                    0.83,
                    0.2
                ]
            }
        },
        {
            "y": 11.94,
            "color": "#89A54E",
            "level": 0,
            "drilldown": {
                "name": "Chrome versions",
                "level": 1,
                "color": "#89A54E",
                "categories": [
                    "Chrome 10.0",
                    "Chrome 11.0",
                    "Chrome 8.0",
                    "Chrome 9.0",
                    "Chrome 12.0",
                    "Chrome 6.0",
                    "Chrome 5.0",
                    "Chrome 7.0"
                ],
                "data": [
                    9.91,
                    0.5,
                    0.36,
                    0.32,
                    0.22,
                    0.19,
                    0.12,
                    0.12
                ]
            }
        },
        {
            "y": 7.15,
            "color": "#80699B",
            "level": 0,
            "drilldown": {
                "name": "Safari versions",
                "level": 1,
                "color": "#80699B",
                "categories": [
                    "Safari 5.0",
                    "Safari 4.0",
                    "Safari Win 5.0",
                    "Safari 4.1",
                    "Safari/Maxthon",
                    "Safari 3.1",
                    "Safari 41"
                ],
                "data": [
                    4.55,
                    1.42,
                    0.23,
                    0.21,
                    0.2,
                    0.19,
                    0.14
                ]
            }
        },
        {
            "y": 2.14,
            "color": "#3D96AE",
            "level": 0,
            "drilldown": {
                "name": "Opera versions",
                "level": 1,
                "color": "#3D96AE",
                "categories": [
                    "Opera 11.x",
                    "Opera 10.x",
                    "Opera 9.x"
                ],
                "data": [
                    1.65,
                    0.37,
                    0.12
                ]
            }
        }
    ]
}


HTML code



Code: Select all
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Highcharts Example Not Working</title>


                <!-- 1. Add these JavaScript inclusions in the head of your page -->
                <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js"></script-->
                <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
                <script type="text/javascript" src="highcharts/js/highcharts.js"></script>

<script type="text/javascript">

var chart;
var seriesOpts =[];
var dlevel = 0;
var index = 0;
$(document).ready(function() {
function setChart(name, categories, data, color) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();
      chart.addSeries({
         name: name,
         data: data,
         color: color || 'white'
      });
}
   var colors = Highcharts.getOptions().colors;
   var index = 0;
   var chartdata = {
                        name :'',
                        color:0,
                        level:0,
                        data:[]
                };
   var options = ({
      chart: {
         renderTo: 'container',
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: []
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                     } else { // restore
                        this.series.chart.setTitle({
                                text: chart.name
                         });
                        setChart(name, categories, data);
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }
         }
      },
      tooltip: {
         formatter: function() {
            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;
         }
      },
      series: [],
      exporting: {
         enabled: false
      }
   });


$.get('ex.xml', function(xml) {
                var $xml = $(xml);
                $('chart', $xml).children('categories').children('name').each(function() {
                        options.xAxis.categories.push($(this).text());
                });
                                        var seriesDownSearch = function(){
                                                var seriesOptions = {
                                                        y : +parseFloat($(this).find('y').text()).toFixed(2),
                                                        color: colors[index],
                                                        level : dlevel
                                                        };
                                                        $(this).children('drilldown').each(function(){
                                                        drilldown = {
                                                                name : $(this).children('name').text(),
                                                                level : dlevel + 1,
                                                                color: colors[index]
                                                        };
                                                        var categories = [];
                                                        var data = [];
                                                        $(this).children('categories').find('name').each(function() {
                                                                categories.push($(this).text());
                                                        });
                                                        $(this).children('data').each(function() {
                                                                if($(this).children('series').length > 0)
                                                                {
                                                                        if(dlevel == 0)
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                seriesOpts.push($.extend(true, {}, seriesOptions));
                                                                        }
                                                                        else
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                var seriestemp = seriesOpts.pop();
                                                                                seriestemp.drilldown['data'] = [];
                                                                                seriestemp.drilldown.data.push($.extend(true, {}, seriesOptions));
                                                                                seriesOpts.push($.extend(true, {}, seriestemp));
                                                                        }
                                                                        dlevel = dlevel + 1;
                                                                        $(this).children('series').each(seriesDownSearch);
                                                                }
                                                                $(this).children('point').each(function() {
                                                                        data.push(+parseFloat($(this).text()).toFixed(2));
                                                                });
                                                                if(dlevel >= 1)
                                                                {
                                                                        drilldown['categories'] = categories;
                                                                        drilldown['data'] = data.slice();
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        var seriestemp = seriesOpts.pop();
                                                                        seriestemp.drilldown['data']= [];
                                                                        seriestemp.drilldown['data'].push(($.extend(true, {}, seriesOptions)));
                                                                        seriesOpts.push($.extend(true, {}, seriestemp));
                                                                }
                                                        });
                                                        if(dlevel == 0)
                                                        {
                                                                var seriestemp = seriesOpts.pop();
                                                                if(typeof seriestemp != 'undefined')
                                                                {
                                                                        for(it=0;it<data.length; it++)
                                                                                seriestemp.drilldown.data.push(data[it]);
                                                                        seriesOpts.push($.extend(true, {}, seriestemp));
                                                                }
                                                                else
                                                                {
                                                                        drilldown['categories'] = categories;
                                                                        drilldown['data'] = [];
                                                                        for(it=0;it<data.length; it++)
                                                                                drilldown.data.push(data[it]);
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        seriesOpts.push($.extend(true, {}, seriesOptions));
                                                                }
                                                        }
                                                });
                                                if(dlevel > 0)
                                                {
                                                        dlevel = dlevel - 1;
                                                        return;
                                                }
                                                dlevel = 0;
                                                if(seriesOpts.length >= 1)
                                                {
                                                        for(it = 0; it < seriesOpts.length;it++)
                                                                chartdata.data.push(seriesOpts[it]);
                                                }
                                                else
                                                {
                                                        chartdata.data.push(seriesOpts);
                                                }
                                                seriesOpts.splice(0, seriesOpts.length);
                                                index = index + 1;
                                        };
                $xml.find('chart > data').children('series').each(seriesDownSearch);
                chartdata.name = $('chart', $xml).children('name').text();
                chartdata.level = 0;
                chartdata.color = 'white';
                alert('ChartData : ' + JSON.stringify(chartdata, null, 4));
                options.series.push(chartdata);
                chart = new Highcharts.Chart(options);
});

});
                </script>

        </head>
        <body>

                <!-- 3. Add the container -->
                <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


        </body>
</html>
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Fusher » Thu Mar 22, 2012 3:24 pm

I think it depends on you which format do you prefer and fits better to your needs. Points 3) and 5) in my last post are the same - just I suggest use the same structure like in example by hfrntt.

Btw, you still have errors - create variables categories and data (for line 74 -> setChart(name, categories, data); ) which will be containers for first level categories and data.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7373
Joined: Mon Jan 30, 2012 12:16 pm

Re: Column Drill down chart to Nth level

Postby Unix Guy » Fri Mar 23, 2012 1:06 am

Thanks Fusher - it helped me. Below is the working code [both traversing down/up] after removing the hard coding stuff also. But I still feel that based upon the example reference http://jsfiddle.net/hfrntt/NULTY/3/ we can have a better XML structure like:

Code: Select all
<chart>
      <data>
           <depth = 'n'/>
           <series0/>
        ...................
           <seriesN>
               <depth='x'/>
                <series0/>
                <seriesx/>
           <seriesN/>
      </data>
<chart/>

It would be very easy to traverse this one as I need not go into recursive mode which becomes very complicated for fair knowledge users. If you can define a proper XML format it would be best for everyone's reference and demo it in the example by hfrntt - column drop down chart is indeed a very very helpful one especially for a birdÔÇÖs eye view.

Code: Select all
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Highcharts Example Not Working</title>


                <!-- 1. Add these JavaScript inclusions in the head of your page -->
                <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js"></script-->
                <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
                <script type="text/javascript" src="highcharts/js/highcharts.js"></script>

<script type="text/javascript">

var chart;
var seriesOpts =[];
var dlevel = 0;
var index = 0;
$(document).ready(function() {
    var categories = [];
    var data = [];
    var name= '';
function setChart(name, categories, data, color) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();
      chart.addSeries({
         name: name,
         data: data,
         color: color || 'white'
      });
}
   var colors = Highcharts.getOptions().colors;
   var index = 0;
   var chartdata = {
                        name :'',
                        color:0,
                        level:0,
                        data:[]
                };
   var options = ({
      chart: {
         renderTo: 'container',
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: []
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });
                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                     } else { // restore
                        this.series.chart.setTitle({
                                text: chart.name
                         });
                        setChart(name, categories, chartdata.data);
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }
         }
      },
      tooltip: {
         formatter: function() {
            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;
         }
      },
      series: [],
      exporting: {
         enabled: false
      }
   });


$.get('ex.xml', function(xml) {
                var $xml = $(xml);
                $('chart', $xml).children('categories').children('name').each(function() {
                        options.xAxis.categories.push($(this).text());
                        categories.push($(this).text());
                });
                                        var seriesDownSearch = function(){
                                                var seriesOptions = {
                                                        y : +parseFloat($(this).find('y').text()).toFixed(2),
                                                        color: colors[index],
                                                        level : dlevel
                                                        };
                                                        $(this).children('drilldown').each(function(){
                                                        drilldown = {
                                                                name : $(this).children('name').text(),
                                                                level : dlevel + 1,
                                                                color: colors[index]
                                                        };
                                                        var categories = [];
                                                        var data = [];
                                                        $(this).children('categories').find('name').each(function() {
                                                                categories.push($(this).text());
                                                        });
                                                        $(this).children('data').each(function() {
                                                                if($(this).children('series').length > 0)
                                                                {
                                                                        if(dlevel == 0)
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                seriesOpts.push($.extend(true, {}, seriesOptions));
                                                                        }
                                                                        else
                                                                        {
                                                                                drilldown['categories'] = categories;
                                                                                seriesOptions['drilldown'] = drilldown;
                                                                                var seriestemp = seriesOpts.pop();
                                                                                seriestemp.drilldown['data'] = [];
                                                                                seriestemp.drilldown.data.push($.extend(true, {}, seriesOptions));
                                                                                seriesOpts.push($.extend(true, {}, seriestemp));
                                                                        }
                                                                        dlevel = dlevel + 1;
                                                                        $(this).children('series').each(seriesDownSearch);
                                                                }
                                                                $(this).children('point').each(function() {
                                                                        data.push(+parseFloat($(this).text()).toFixed(2));
                                                                });
                                                                if(dlevel >= 1)
                                                                {
                                                                        drilldown['categories'] = categories;
                                                                        drilldown['data'] = data.slice();
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        var seriestemp = seriesOpts.pop();
                                                                        seriestemp.drilldown['data']= [];
                                                                        seriestemp.drilldown['data'].push(($.extend(true, {}, seriesOptions)));
                                                                        seriesOpts.push($.extend(true, {}, seriestemp));
                                                                }
                                                        });
                                                        if(dlevel == 0)
                                                        {
                                                                var seriestemp = seriesOpts.pop();
                                                                if(typeof seriestemp != 'undefined')
                                                                {
                                                                        var datatemp = seriestemp.drilldown;
                                                                        var datatempvar = {};
                                                                        for (;typeof datatemp != 'undefined';)
                                                                        {
                                                                                datatempvar = datatemp;
                                                                                datatemp = datatemp.drilldown;
                                                                        }
                                                                        for(it=0;it<data.length; it++)
                                                                                datatempvar.data.push(data[it]);
                                                                        seriesOpts.push($.extend(true, {}, seriestemp));
                                                                }
                                                                else
                                                                {
                                                                        drilldown['categories'] = categories;
                                                                        drilldown['data'] = [];
                                                                        for(it=0;it<data.length; it++)
                                                                                drilldown.data.push(data[it]);
                                                                        seriesOptions['drilldown'] = drilldown;
                                                                        seriesOpts.push($.extend(true, {}, seriesOptions));
                                                                }
                                                        }
                                                });
                                                if(dlevel > 0)
                                                {
                                                        dlevel = dlevel - 1;
                                                        return;
                                                }
                                                dlevel = 0;
                                                if(seriesOpts.length >= 1)
                                                {
                                                        for(it = 0; it < seriesOpts.length;it++)
                                                                chartdata.data.push(seriesOpts[it]);
                                                }
                                                else
                                                {
                                                        chartdata.data.push(seriesOpts);
                                                }
                                                seriesOpts.splice(0, seriesOpts.length);
                                                index = index + 1;
                                        };
                $xml.find('chart > data').children('series').each(seriesDownSearch);
                chartdata.name = $('chart', $xml).children('name').text();
                name = chartdata.name;
                chartdata.level = 0;
                chartdata.color = 'white';
                options.series.push(chartdata);
                data.push(chartdata[0]);
                chart = new Highcharts.Chart(options);
});

});
                </script>

        </head>
        <body>

                <!-- 3. Add the container -->
                <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


        </body>
</html>
Unix Guy
 
Posts: 9
Joined: Wed Mar 14, 2012 1:13 am

Re: Column Drill down chart to Nth level

Postby Fusher » Fri Mar 23, 2012 1:28 pm

There is an example for retrieving data from XML (posted before: http://www.highcharts.com/studies/data-from-xml.htm ) and I think there's no need to create every possible example for every chart. Just combine example of drilldown and XML, use forum support and you will get what you need ;)
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7373
Joined: Mon Jan 30, 2012 12:16 pm

Re: Column Drill down chart to Nth level

Postby timk » Fri Apr 27, 2012 2:47 pm

Hi everyone!

I would like to do the same thing as Unix Guy described here, create a dynamic down drill chart with XML-data input.
The code discussed here works fine for me! Thanks for that!

But I would like to have a litte modification in the XML/chart. In the XML there's for a serie one <Y> value (with downdrill) and the rest are <point> values (without a downdrill).
I would like to have multiple <Y> values with downdrill in a serie. But I don't get it working properly. I tried several setting in the XML but it doesn't work fine with the chart. Maybe I need to change something in the XML-reader code, but I'm not that good with javascript to figure that out....

Here is my XML with some comments.
Code: Select all
<chart>
   <categories>
      <name>Host 1</name>
      <name>Host 2</name>
   </categories>   
   <data>
      <series>
         <y>5.0</y>
            <drilldown>
               <name>Host 1</name>
                  <categories>
                     <name>DNS</name>
                     <name>Testcat</name>
                  </categories>
                  <data>
                     <series>
                        <y>2.0</y>
                           <drilldown>
                              <name>DNS</name>
                                 <categories>
                                    <name>DNS ok</name>
                                 </categories>
                                 <data>
                                    <point>2.0</point>
                                 </data>
                           </drilldown>
                        </series>
                        <series> //// Problems with this drilldown  he shows the name and value but it's not clickable. tried to create an extra serie but that makes no sense
                     <y>6.0</y>
                        <drilldown>
                           <name>Testcat</name>
                              <categories>
                                 <name>RDP</name>
                                 <name>VNC</name>
                                 <name>Teamviewer</name>
                              </categories>
                                 <data>
                                    <point>3.0</point>
                                    <point>1.0</point>
                                    <point>2.0</point>
                                 </data>
                        </drilldown>
                        </series>
                     </data>
            </drilldown>
         </series>
      <series>  //// This serie work good
      <y>6.0</y>
      <drilldown>
            <name>Testcat</name>
               <categories>
                  <name>RDP</name>
                  <name>VNC</name>
                  <name>Teamviewer</name>
               </categories>
                  <data>
                     <point>3.0</point>
                     <point>1.0</point>
                     <point>2.0</point>
                  </data>
         </drilldown>
      </series>

</data>
</chart>


Does anyone have an idea to fix this problem?
Thank you!
timk
 
Posts: 3
Joined: Fri Apr 27, 2012 2:27 pm

Next

Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 2 guests