Embedding High-Charts in Helical Insight

Posted on by By admin, in Helical Insight, Open Source Business Intelligence | 0

                                                                               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:


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 Helical Insight reports.




Best Open Source Business Intelligence Software Helical Insight is Here


A Business Intelligence Framework

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments