Embedding High-Charts in HDI
We can embed highcharts(http://www.highcharts.com/) in Helical INsight(Helical Insight) for the EFW method and not for ADhoc module. Please refer to the other blog for understanding how to integrate new charts into the adhoc module as well.
To use highcharts, download latest version of highcharts. You can download from below mentioned link:
http://www.highcharts.com/download
Here, I am embedding a simple highcharts. You can find highcharts example on http://www.highcharts.com/demo/
1) EFW file:- Create one EFW extension file. EFW contain the Title, author, description, Template name, visibility of the Dashboard.
2) HTML file: Create one html extension file. HTML file contains html code and HDI components such as SELECT, CUSTOM SCRIPT, DATE PICKER etc. We are going to use custom component:
Html file will look like this:
// Highcharts SRC scripts url
<script src=”http://code.highcharts.com/highcharts.js”></script>
<script src=”http://code.highcharts.com/highcharts-more.js”></script>
<script src=”http://code.highcharts.com/modules/exporting.js”></script>
// Dummy htmlobject for scutom script (runScript)
<div id=”chartContainer”></div>
// htmlobject for rendering the highcharts
<div id=”realtimeGraph” style=”height: 300px;”></div>
//Now we write script and define components
<script>
dashboard = Dashboard;
var runScript = {
name: “runScript”,
type: “custom”,
requestParameters :{
“m_name” : “m_name”,
“sDate” : “sDate”,
“eDate” : “eDate”,
“org_id” : “org_id”,
“timeZone”: “timeZone”,
“clmname”:”clmname”,
“param”:”param”
},
listeners: [“m_name”,”sDate”,”eDate”],
htmlElementId: “#chartContainer”,
customScript: function(a,b){
$.getJSON(‘http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?’, function (chartdata) {
$(‘#realtimeGraph’).highcharts({
chart: {
type: ‘arearange’,
zoomType: ‘x’
},
title: {
text: ‘Temperature variation by day’
},
xAxis: {
type: ‘datetime’
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ‘°C’
},
legend: {
enabled: false
},
series: [{
name: ‘Temperatures’,
data: chartdata
}]
});
});
},
executeAtStart: true
};
// Now create one array of initialized components:
var components = [runScript];
// Now initialize defined components.
dashboard.init(components);
#realtimeGraph: It is a div ID where highcarts will be renderd.
Here we go. You can see highcharts in your Helical Insight reports.
Thanks
Sharad
Best Open Source Business Intelligence Software Helical Insight is Here
