Baby Steps – Creating an HTML5 Chart Wrapper with Design Studio 1.2 SDK

I decided to see how easy it would be to create an HTML5 Chart Wrapper component Addon using the new Design Studio SDK.

I have a pretty good background on writing several Xcelsius addons both in Flex 2 and Flex 3.1 APIs, and it was a very painful experience due to how juggling PropertySheet values from one SWF to another SWF behaved.  I had high hopes that this was much improved in DS, and have not been disappointed.

I picked ChartJS (http://chartjs.devexpress.com/) but any other HTML5 charting API such as FusionCharts etc would work, I suppose.  This was a proof-of-concept so you’d also want to consider 3rd party chart engine licensing for production usages of course, but that was beyond the scope of my small test.

The first thing I did was attend the ASUG webinar hosted yesterday (11/26/2013) which gave an excellent overview of some sample addons and how to get started.  Everything I needed was also in the Developer Guide and SDK Templates located at http://help.sap.com/boad on SAP Help.

My goal was simply to see a chart show up and make a few chart configuration properties made available and evaluate how feasible it would be at that point, and then at a later stage, bind real data to the chart, based on results.  I may post a subsequent blog post later with those results, but probably most people familiar with JSON will find this a trivial exercise.

I began with the ColoredBox template project available on SAP Help’s site (http://help.sap.com/boad) and imported into Eclipse.  Next, I downloaded the ChartJS files and copied the JS files into this project.  In order to have DS pull those in, I had to modify contribution.xml by adding a few extra jsInclude entries:

<jsInclude>res/js/component.js</jsInclude>

<jsInclude>res/js/dx.chartjs.js</jsInclude>

<jsInclude>res/js/knockout-2.2.1.js</jsInclude>

<jsInclude>res/js/globalize.min.js</jsInclude>

I also included a few new properties, as again, I was curious to see this work better than in Xcelsius days of addon SDK work:

<property id=”title” type=”String” title=”Chart Title” group=”Display” />

<property id=”rotated” type=”boolean” title=”Rotate Chart” group=”Display” />

<property id=”animated” type=”boolean” title=”Animated” group=”Display” />

<property id=”legendVisible” type=”boolean” title=”Legend Visible” group=”Display” />

Finally, the meat of the code to pass the parameters from the component to the underlying sample chart occurred in component.js:

sap.designstudio.sdk.Component.subclass(“com.ipaper.sample.charts.StackedBar”, function() {

  var that = this;

  var _title = “Example Chart”;

  var _chart = null;

  this.animated = function(value){

  if(value!=undefined){

  var c = this.$().dxChart(“instance”);

  c.option({

  animation : {enabled : value}

  });

  }

  return this;

  };

  this.legendVisible = function(value){

  if(value!=undefined){

  var c = this.$().dxChart(“instance”);

  c.option({

  legend : {visible : value}

  });

  }

  return this;

  };

  this.rotated = function(value){

  if(value!=undefined){

  var c = this.$().dxChart(“instance”);

  c.option({

  rotated : value

  });

  }

  return this;

  };

  this.title = function(value) {

  if(value!=undefined) {

  _title = value;

  var c = this.$().dxChart(“instance”);

  c.beginUpdate();

  c.option({title : _title});

  c.render({

  animate : false

  });

  c.endUpdate();

  }

  return this;

  };

    this.afterUpdate = function() {

    // alert(“after update”);

    };

  this.init = function() {

  // alert(“init”);

  var dataSource = [

                   { state: “Germany”, young: 6.7, middle: 28.6, older: 5.1 },

                   { state: “Japan”, young: 9.6, middle: 43.4, older: 9},

                   { state: “Russia”, young: 13.5, middle: 49, older: 5.8 },

                   { state: “USA”, young: 30, middle: 90.3, older: 14.5 }

                   ];

  this.$().dxChart({

     dataSource: dataSource,

     commonSeriesSettings: {

         argumentField: “state”,

         type: “stackedBar”

     },

     series: [

         { valueField: “young”, name: “0-14” },

         { valueField: “middle”, name: “15-64” },

         { valueField: “older”, name: “65 and older” }

     ],

     legend: {

         verticalAlignment: “bottom”,

         horizontalAlignment: “center”

     },

     valueAxis: {

         title: {

             text: “millions”

         },

         position: “right”

     },

     title: _title,

     tooltip: {

         enabled: true,

         customizeText: function () {

             return this.seriesName + ” years: ” + this.valueText;

         }

     }

  });

  };

  this.color = function(value) {

  if (value === undefined) {

  return this.$().css(“background-color”);

  } else {

  this.$().css(“background-color”, value);

  return this;

  }

  };

});

Again, I didn’t worry too much about the data binding from a datasource perspective (baby steps!), however the final product was a configurable Stacked Bar chart with a few properties that just worked!

My impression is that this is really easy!

The hardest thing for me was to figure out enough jQuery syntax to make things work, as I’m more of a pure JavaScript DOM manipulation guy, so that was really the toughest part of any of this probably will be super easy for jQuery gurus.  I can see charting API gurus flocking to this SDK!  I foresee some really awesome addons coming from the community in the near future!