To add more chart types and directly bind report results without programming effort, also provides developer API. One-time development of API and user can generate endless of data visualization with different view angle and business requirements.

Sample custom chart (Javascript):

IG$.__chartoption.charttype.push(
   {
       label: "Sample Demo",
       charttype: "demo_edu",
       subtype: "demo_edu",
       img: "demo_edu",
       grp: "cartesian"
   }
);

IG$.__chartoption.chartext.demo_edu = function(owner) {
   this.owner = owner;
}

IG$.__chartoption.chartext.demo_edu.prototype = {   
   drawChart: function(owner, results) {
      var tabledata = results._tabledata, // references tabular arrray data
           rowfix = results.rowfix, // references fixed row index
           rowcnt = results.rowcnt, // references fixed row counts
           colfix = results.colfix, // references fixed row index
           colcnt = results.colcnt; // references fixed column index

      // iteration through tabular data
      $.each(tabledata, function(rindex, row) {
           $.each(row, function(cindex, cell) {
              var cell_text = cell.text || cell.code;
              var cell_code = cell.code;

              // implement logic to draw chart data

           });
      });

   },
   updatedisplay: function(owner, w, h) {
      // implement logic to resize chart
   },
   dispose: function() {
      // implement logic to resize chart
   }
};

 

Sample custom chart with dynamic loading (Javascript):

This sample have multiple javascript and loading javascript dynamically at the time first initialize chart type. This requires at least 2 javascript for main class definition and worker class that to be dynamically loaded.

Loader javascript : custom.sample.js

IG$.__chartoption.charttype.push(
   {
       label: "Sample Dynamic Loading Demo",
       charttype: "demo_dynamic_edu",
       subtype: "demo_dynamic_edu",
       img: "demo_dynamic_edu",
       grp: "cartesian"
   }
);

IG$.__chartoption.chartext.demo_dynamic_edu = function(owner) {
   this.owner = owner;
}

IG$.__chartoption.chartext.demo_dynamic_edu.prototype = {   
   drawChart: function(owner, results) {
      // loading worker javascript
      if (!IG$.__chartoption.chartext.demo_dynamic_edu._loaded)
      {
         var me = this,
            js = [
               "./custom/custom.sample.worker.js"
            ];

            IG$.getScriptCache(
               js,
               new IG$.callBackObj(this, function() {
                  IG$.__chartoption.chartext.kpi._loaded = 1;
                  me.drawChart.call(me, owner, results);
               })
            );
      }
   },
   updatedisplay: function(owner, w, h) {
      // implement logic to resize chart
   },
   dispose: function() {
      // implement logic to dispose chart
   }
};

Worker javascript : custom.sample.worker.js (Overrides custom.sample.js with dynamic loading)

IG$.__chartoption.chartext.demo_dynamic_edu.drawChart = function(owner, results) {
   var tabledata = results._tabledata, // references tabular arrray data
        rowfix = results.rowfix, // references fixed row index
        rowcnt = results.rowcnt, // references fixed row counts
        colfix = results.colfix, // references fixed row index
        colcnt = results.colcnt; // references fixed column index

   // iteration through tabular data
   $.each(tabledata, function(rindex, row) {
        $.each(row, function(cindex, cell) {
           var cell_text = cell.text || cell.code;
           var cell_code = cell.code;

           // implement logic to draw chart data

        });
   });
};
IG$.__chartoption.chartext.demo_dynamic_edu.updatedisplay = function(owner, w, h) {
   // implement logic to resize chart
};
IG$.__chartoption.chartext.demo_dynamic_edu.dispose = function() {
   // implement logic to dispose chart
};

Javascript Development break down:

Type

Code

Description

Register on wizard

IG$.__chartoption.charttype.push

 

Create class

IG$.__chartoption.chartext.demo_edu = function(owner) {

 

Define functions

IG$.__chartoption.chartext.demo_edu.prototype = {

 

Function after report results and draw chart

drawChart: function(owner, results) {

 

Function after sheet size changed

updatedisplay: function(owner, w, h) {

 

 

After develop javascript code, need to register on analytics.jsp, viewer.jsp with script tag.

 

Custom chart configuration parameter

To register chart specific configuration parameter, need to add following code structure on javascript and load on JSP files.