Embedding highcarts in HDI

                                                                               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:


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


dashboard = Dashboard;

var runScript = {

name: “runScript”,

type: “custom”,

requestParameters :{

“m_name” : “m_name”,

“sDate” : “sDate”,

“eDate” : “eDate”,

“org_id” : “org_id”,

“timeZone”: “timeZone”,




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) {


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.


#realtimeGraph: It is a div ID where highcarts will be renderd.

Here we go. You can see highcharts in your HDI reports.