Embedding highcarts in HDI


 

We can embed highcharts(http://www.highcharts.com/) in HDI (Helical Dashboard Insight).

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 HDI reports.

Thanks

Sharad

Leave a Reply