900_040_drillDown.js

Previous Chapter          Previous Page          Next Page          Table of content

drillDown

Within ChartNew.js, it is not really difficult to create a drillDown chart. A specific Add-In has been defined for it, but you could easely define your own drilldown functions.

This document describes how to create a drillDown chart using the drillDown.js Add-In.

Example : see Samples/drillDown.html

How to achieve such a result ?

• Include the "Add-ins\drillDown.js" module.

  <SCRIPT src='../Add-ins/drillDown.js'></script>
  

• create one data part for each drillDown sequence.

In each dataset section, you have to add a drillDownData subsection. Set it to "null" if there is no more drillDown level; otherwise, put the next drillDown data variable.

If you want, you can also define a drillDownConfig subsection if you want to associate a new option variable to the drillDown section. If the drillDownConfig subsection is not defined, the drillDown will keep the options of the previous level.

      var mydata0_0_0 = {
          labels : ["Value"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [40],
		          drillDownData : null,
		          title : "First data - January - first third of the month"
	          }
          ]
      }
      var mydata0_0_1 = {
          labels : ["Value"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [15],
		          drillDownData : null,
		          title : "First data - January - second third of the month"
	          }
          ]
      }
      var mydata0_0_2 = {
          labels : ["Value"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [10],
		          drillDownData : null,
		          title : "First data - January - first third of the month"
	          }
          ]
      }
      var mydata0_0 = {
          labels : ["First Third of the month","second Third of the month","last third of the month"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [40,15,10],
		          drillDownData : [mydata0_0_0,mydata0_0_1,mydata0_0_2],
		          drillDownConfig : [newoptspos,newoptspos,newoptspos],
		          title : "First data - January"
	          }
          ]
      }
      var mydata0_1 = {
          labels : ["first half of the month","second half of the month"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [-10,-49],
		          drillDownData : null,
		          title : "First data - February"
	          }
          ]
      }
      var mydata1_0 = {
          labels : ["first half of the month","second half of the month"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [10,18],
		          drillDownData : null,
		          title : "Second data - January"
	          }
          ]
      }
      var mydata1_1 = {
          labels : ["first half of the month","second half of the month"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [-12,60],
		          drillDownData : null,
		          title : "Second data - February"
	          }
          ]
      }
      var mydata = {
          labels : ["January","February"],
          datasets : [
	          {
		          fillColor : "rgba(220,220,220,0.5)",
		          strokeColor : "rgba(220,220,220,1)",
		          pointColor : "rgba(220,220,220,1)",
		          pointStrokeColor : "#fff",
		          data : [65,-59],
		          drillDownData : [mydata0_0,mydata0_1],
		          drillDownConfig : [newoptspos,newoptsneg],
		          title : "First data"
	          },
	          {
		          fillColor : "rgba(151,187,205,0.5)",
		          strokeColor : "rgba(151,187,205,1)",
		          pointColor : "rgba(151,187,205,1)",
		          pointStrokeColor : "#fff",
		          data : [28,48],
		          drillDownData : [mydata1_0,mydata1_1],
		          drillDownConfig : [newoptspos,newopts],
  			          title : "Second data"
	          }
          ]
      }

A sample can be found in the Samples folder : Samples\drillDown.html"

Previous Chapter          Previous Page          Next Page          Top of Page