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!
Thanks Mike! very interesting post!
Thanks Mike, very useful!
thanks Mike,
nice post!
Jeroen
Thanks Mike! Very interesting post!
hi Mike, thank you for that great post. Could you please share the source on github?
thank you,
daniel
Hi Mike,
thank you for posting that sample.
I was also playing around with the sdk and tried to rebuild your example but I was getting an error.
Here is the error message I got:
It's german and it says that the function or method dxChart is unknown.
What I have done so far is I copy/paste your code into the "clock" project delivered by sap into component.js file.
I also added the jsinclude line's to the contribution.xml file.
Seems like in the init-method the method call "this.$().dxChart" is not doing well...
...
var dataSource = [
this.$().dxChart({
...
I did all the steps mentioned in the developer guide for configuration purpose.
do you have any idea what could be wrong?
Best Regards,
Peter,
Did you download the JS file needed from the ChartJS link and then also reference it in your contributions.xml?
Hi Michael,
thank you for your answer, yes I did.
I downloaded the ChartJS Files and imported them into the js-Folder and referenced them in the contribution.xml file.
Here is the part from my contribution.xml-file:
I don't know what Iam missing, but it seems like the component.js-file is ignoring my jsinclude's?!
Best Regards
Peter,
It must be something very simple to fix, but I think it's definitely related to dxChart's JS libs not getting loaded correctly at runtime/designtime for some reason.
Someone else E-Mailed me with a question related to this example, so I think I'm going to just post this one as a Github repository so you can just pull down the whole project. Perhaps I've left out a detail on something I did.
FYI, the version that I'm going to post will actually use real data from a Datasource, so it'll actually be more complete of a sample. I'll try to get it out later today or early next week.
Hi Michael!
Your lesson is very helpfull and useful. But creating my own SDK I faced some errors with importing Charts JS.
Could you please share this project on Github?
Very nice post
Can you please tell me which version of Charts JS have you used? Also which version of JQuery do you have in Design Studio ?
Thank you!
Hi Michael.
I have the same problem as peter i think.
Indeed i have updated contribution.xml correctly. Next i have filled component.js with your code. Finally i launch my program. SAP design studio is open and i have my component available in Custom Component folder, but when i drag and drop this component on the dashboard nothing appear. No chart is display.
For information i work fromColoredBox template project.
Do you have an idea why my chart doesn't work?
Is there any other modification or other file to update except contribution.xml or component.js?
Hello,
@Vincent, @Peter - did you found anything new on the subject?
I'm still receiving this error:
!MESSAGE Error message: Object doesn't support property or method 'dxChart'
on this piece of code:
this.$().dxChart
I've tried to put some DIV first and then call $("#chart").dxChart() on this but with the same result. It seems like Design Studio does not see
<jsInclude>res/js/dx.chartjs.js</jsInclude>
@Michael I've looked into your source code on GitHub but still have not clue what might be wrong...Maybe you have some new thoughts about that issue? I would really appreciate 🙂
Great work Michael anyway!
regards,
Pawel
Guys this was a very old example. Check some of my later blogs with better examples.
Michael, thanks for the quick reply!
Sorry for refreshing this old thread 🙂
So far I've figured out that it is probably about version 1.7.1 of jQuery used in Design Studio... I use dx.chartjs.js (14.1.4 or 13.2.5) and it is not working with jquery 1.7.1. I've made a quick html snipped outside Design Studio and it is also not working with 1.7.1 but with 1.8.1 it is OK! (chart shows up). I expect it is about how jQuery is registering objects in 1.7.1..
Anyway is it possible to upgrade jQuery version used in DS? I've noticed that it is inside com.sap.ui5.core_1.12.7.jar in DS installation, maybe I should switch jquery inside this jar? not sure if this is the right thing to do thought
I think it might be a good idea to post it on the new thread..
regards,
Pawel
I've finally made it!! 😆
just used :
<jsInclude>http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js</jsInclude>
in component.xml
again sorry for waking up this thread but I thought it would be good to write the solution for other people searching..
Thanks Michael for the great blogs, now I can follow them further 🙂
regards,
Pawel
Pawel,
I'm glad to hear you got this working!
I've gotten the answer from SAP that updating any of the delivered libraries, (D3, SAPUI5/OpenUI5, and jQuery) is not supported and dangerous. Having said that, you may want to live on the wild side and include an AMD loader such as require.js and encapsulate a version of jQuery that does not impact the 1.7.1 version that other components depend on. You'll really need to know what you are doing and know that future versions of Design Studio may update these libraries as well as include AMD loaders such as require.js.
I've had some success using an AMD loader for D3 for a similar reason in that the DS version delivered is d3.v2 however I needed d3.v3. (Is it possible to include d3 v3 into Design Studio SDK Component?)
Hope this helps.
Follow your step  I  get the problem  why ?
Could you please share this project on Github?