Dashboard > Developers > Macro Guide > Macro SheetObject
Developers
Macro SheetObject
Added by Dave Schmierer , last edited by Chi-Ming To on Oct 27, 2008  (view change)
Labels: 
(None)

Introduction

You can define a sheet object in Macro as an extension of EditGrid's native sheet object using the following code snippet:

//this example is called "FusionChart"
FusionChart = function () {
  //add any properties here (e.g. this.url = someUrl;)
};

//our sheet object inherits from editgrid's native sheet object
FusionChart.prototype = new editgrid.sheetobject.AbstractSheetObject();

The custom sheet object should override the following methods:

FusionChart.prototype.doCreate = function () {
//called when a sheet object is created, such as when a user navigates to the sheet to which the object belongs
};

FusionChart.prototype.doUpdate = function () {
//called when a sheet object updates, such as when its dependent data changes
};

Once the sheet object and its methods have been defined you can add it to the grid with the following code:

grid.addSheetObject('FusionChart', { width: 600, height: 400 }, { data: "=C2:C100" });

SheetObject properties

In addition to the doCreate and doUpdate methods mentioned above, each sheetObject has a number of properties you'll need to access within these methods.

FusionChart.prototype.doCreate = function () {

  this.doc; //references the document object of the sheetObject window

  this.root; //references the document.body object of the sheetObject window

  this.root.innerHTML; //sets the innerHTML of the document body

  this.data.data; //references the value passed to data when the sheetObject is created
                  //in the example above this value would be "=C2:C100"

  this.rdata.data; //references the actual data array underlying the referenced cells
                   //you'll use this to add data points to your object

  this.setHeader('Fusion Chart');  //a method to set the header string on your object

};

SheetObject methods

In addition to the doCreate and doUpdate methods mentioned above, you can add a custom context menu item with getContextMenuItems and perform an action when a sheetObject is released with release (for example, when a user navigates away from the sheet with the sheetObject or the user deletes the sheetObject it will be released).

//add "Edit" menu option, which appears when the header bar is right-clicked
//"Delete" is always present
Visualization.prototype.getContextMenuItems = function () {
  var id = this.id;
  return [
    { name: 'Edit', func: function () { Toolbox.load(id); } }
  ];
};

Visualization.prototype.release = function(){
  alert("I've been released.");
}

Example: FusionChart

//define the sheetObject with a flashUrl property
FusionChart = function () {
  this.flashUrl = 'http://beta.tnc.hk/~cmto/FusionChartsFree/Charts/FCF_MSLine.swf';
};

//inherit methods from editgrid's native sheet object
FusionChart.prototype = new editgrid.sheetobject.AbstractSheetObject();

//define a custom function for building the xml that underlies the fusion chart
FusionChart.prototype.buildXml = function (attrs, names, categories, data, colors) {
  var xml = [];
  xml.push("<graph ");
  xml.push(" caption='" + attrs.caption + "'");
  xml.push(" subcaption='" + attrs.subcaption + "'");
  xml.push(" rotateNames='" + attrs.rotateNames + "'");
  xml.push(" showValues='0'");
  xml.push(" showLegend='" + attrs.showLegend + "'");
  xml.push(" xAxisName='" + attrs.xAxisName + "'");
  xml.push(" yAxisName='" + attrs.yAxisName + "'");
  xml.push(">");

  xml.push("<categories font='Arial' fontColor='000000'>");

  if (categories) {
    for (var i = 0; i < categories.length; i++) {
      xml.push("<category ");
      xml.push(" showName='" + (i % interval == 0 ? 1 : 0) + "'");
      xml.push(" name='" + categories[i] + "'");
      xml.push("/>");
    }
  } else {
    for (var i = 0; i < data.length; i++) {
      xml.push("<category ");
      xml.push(" showName='" + (i % interval == 0 ? 1 : 0) + "'");
      xml.push(" name='" + i + "'");
      xml.push("/>");
    }
  }

  xml.push("</categories>");

  for (var i = 0; i < data[0].length; i++) {
    xml.push("<dataset ");
    xml.push(" seriesName='" + names[i] + "'");
    xml.push(" showAnchors='1'");
    xml.push(" showAreaBorder='0'");
    xml.push(" areaAlpha='50'");
    xml.push(" color='" + colors[i] + "'");
    xml.push(">");
    for (var j = 0; j < data.length; j++) {
      var num = parseFloat(data[j][i]);
      xml.push("<set value='" + (!isNaN(num) ? num : 0) + "' />");
    }
    xml.push("</dataset>");
  }

  xml.push("</graph>");

  return xml.join('');
};

//define the doCreate method
FusionChart.prototype.doCreate = function () {
  var document = this.doc;

  //this.rdata.data contains the data values
  var xml = this.buildXml({}, ["A", "B"], null, this.rdata.data, {});

  //set some html in the sheetObject window
  this.root.innerHTML = [
    '<embed ',
    ' width="600"',
    ' height="400"',
    ' wmode="opaque"',
    ' swliveconnect="false"',
    ' allowscriptaccess="always"',
    ' quality="high"',
    ' src="' + this.flashUrl + '"',
    ' type="application/x-shockwave-flash"',
    ' flashvars="chartWidth=600&chartHeight=400&dataXML=' + xml + '"',
    '/>'
  ].join('');

  //set the header
  this.setHeader('Fusion Chart');
};

//define the doUpdate method, here it simply calls doCreate again
FusionChart.prototype.doUpdate = function () {
  this.doCreate();
};

//add the sheetObject
if (!grid.getSessionInfo().readOnly) {
  toolbar['addChart'] = function () {
    grid.addSheetObject('FusionChart', { width: 600, height: 400 }, { data: "=C2:C100" });
  };
}

Notes

When creating a sheetObject you should provide a data attribute in the form of a string formula (such as "=C2:C100" above). It should begin with "=" to reference a cell range and should not include the sheet name since each sheetObject is already associated with a specific sheet.

You may also add custom sheetObject properties when you create a new sheetObject by adding the property to the final argument of grid.addSheetObject()

grid.addSheetObject('FusionChart', { width: 600, height: 400 }, { data: "=C2:C100", title: "some Title"});

FusionChart.prototype.doCreate = function () {
  this.data.title; //equals "some Title"
};
Powered by Atlassian Confluence 2.7, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators