Quite often you may be in a situation where you would like to display some some of chart or graphic on an Aware IM Form or in a Visual Perspective. There is a range of out of the box options as well as solutions involving charting tools such as Anycharts, HighCharts or Fusion Charts. All of them can work and involve various levels of complexity.
However, what if you want something a little different? So graphical representation that can not be achieved via any normal type of chart.
Enter d3.js.
d3.js is not a charting tool per se. It is a data visualisation framework based on a js.
This is a truly extraordinary tool and to master it’s capability means you are only limited by your imagination.
Have a look here.
In this Tip & Trick I will not delve into the d3.js structure or language but just want to demonstrate how to make a trivial d3.js visualisation work in Aware IM.
For this example, I will only use a trivial Pie Chart. See screenshot below.
Let’s start by downloading the d3.js library from here.
Unzip the package and copy the two files…. d3.js and d3.min.js to your C:\AwareIM\Tomcat\webapps\AwareIM\Custom\JS folder. If you have not got that folder then create it.
Additionally, download the d3pie.js zip file below. Unzip it and also place that in the same Custom\JS folder as above.
Now download the bsv for the demo below. Create a new BS called… say, d3demo and import the bsv.
Open the Visual Perspective for Administrator and study the two panels under Main.
The first panel is People and contains a query displaying data from the People BO
The second panel is where our d3 Pie Chart will go.
If you study the Content of this Panel you will see that it contains very little. It is just a place holder for where the chart will be displayed
<div id=”GenderPieChart”></div>
Now go the Advance (V7) or Scripts property for this panel and look in the Render Script.
This is where the magic happens. See the code below.
You can see that we have some real flexibility here when it comes to getting the data into the code from Aware IM.
We can use Aware Tags to basically inject anything you want and in the example below we can even use aggregate functions to calculate values on the fly. See the two lines…
{“label”: “Male”,”value”: <<COUNT People WHERE (People.Gender=’Male’) >>,”color”: “#4a99e9”},
And
{“label”: “Female”,”value”: <<COUNT People WHERE (People.Gender=’Female’) >>,”color”:”#ee98e3″}
Put the app under Test and add some people. As you add people and change genders you will see the Pie Chart to the right adjusting itself to display the latest representation of the data.
Note: Make sure you check out the Auto-Refresh properties for the Chart to make sure it updates itself when you change anything… If you have a look you can see that the refresh is set to execute whenever the People BO is changed OR whenever the DeletePeople or UpdateGenderTotals Processes are executed.
Hope this helps
Enjoy.
AwareIM Version: all_versions
Dependencies: d3.js library
Where: Aware IM Forms and or Visual Perspectives
Script: var pie = new d3pie(“#GenderPieChart”, { “header”: { “content”: [ “misc”: {
“title”: {“text”: “Employees “,”color”: “#272626″,”fontSize”: 24},
“subtitle”: {“text”: “By Gender”,”color”: “#272626”},
“titleSubtitlePadding”: 3},
“footer”: {“text”: “”,”fontSize”: 10,”font”: “open sans”,”location”: “bottom-left”},
“size”: {“canvasHeight”: 450,”canvasWidth”: 450,”pieInnerRadius”: “45%”,”pieOuterRadius”: “80%”},
“data”: {“sortOrder”: “label-desc”,
{“label”: “Male”,”value”: <<COUNT People WHERE (People.Gender=’Male’) >>,”color”: “#4a99e9”},
{“label”: “Female”,”value”: <<COUNT People WHERE (People.Gender=’Female’) >>,”color”: “#ee98e3”}
]},
“labels”: {
“outer”: {“format”: “label-value1″,”hideWhenLessThanPercentage”: 1,”pieDistance”: 9},
“mainLabel”: {“color”: “#222222″,”fontSize”: 11},
“percentage”: {“color”: “#ffffff”,”fontSize”: 11,”decimalPlaces”: 1 },
“value”: {“color”: “#222222″,”font”: “verdana”},
“lines”: {“enabled”: true},
“truncation”: {“enabled”: true}
},
“effects”: {
“pullOutSegmentOnClick”: {“effect”: “linear”,”speed”: 400,”size”: 8}
},
“colors”: {“background”: “#ffffff”,”segmentStroke”: “#5f4f4f”},
“gradient”: {“enabled”: true,”percentage”: 100,”color”: “#ff0000”},
“pieCenterOffset”: {“y”: 15,”x”: 15}
}
});