D3 Candle-Stick chart Integration with HDI (Helical Dashboard Insights)

D3 Candle-Stick chart Integration with HDI (Helical Dashboard Insights)

What is HDI:-

HDI allows the developer to create Dynamic chart, Dashboard .It is too much user friendly and developer friendly by the point of customization.

What is D3 Candle-Stick Chart:-

A  Candle-Stick concisely encodes several dimensions of data into a simple glyph.

Required Result set:-

-> Label Which you want to show

-> Actual value which you want to show in your graph( point showing in below picture )

-> Open and close value which will decide the range of your box

-> Deviation value , on which chart calculate the box size.

How to Start Integration:-

To start integration of chart we have to change four files in HDI.

-> EFW file: – In this XML file we have to specify the path of HTML file which we are going to use.

-> EFWD file:- In this file we have to specify two things , first a valid connection detail and second the query which we want to plot in Candle chart.(If you want some parameter then you have to specify the parameter also)

-> EFWVF file:- In this file we have to put our Chart-Script within <Chart> – <prop> (property) tag.(In this File we have to do the change which I will tell later.)

-> HTML file:- In this file we have to specify which EFWVF file we are going to use and what is the chart ID in that EFWVF file in the <Script> tag then we have to add this component in Dashboard-init-function .after that we have to only put the ID , wherever we want in our HTML-file.

Points to be Noted:-

Next to convert Vertical Chart to Horizontal we have to change in script of EFWVF file,

-> First we have to change the axis (Y -> X and X -> Y).

-> Next whisker range. (It will decide the range of box)

-> Then we have to change median.(plotting y1->y2 instead of x1->x2)


-> Then legend axis

-> Update Inner quartile box.


 im1 im2 im3


Final Output:-



Creating Candlestick Chart in iReport / Jaspersoft / Jasper Report

This blog will talk about how to create candlestick chart in Jaspersoft.


  • Jaspersoft(any version)
  • iReport tool(design)
  • d/b softwares (eg.MySql)
  • JAVA
  • Eclipse(if require)



The candlestick techniques we use today originated in the style of technical charting used by the Japanese for over 100 years before the West developed the bar and point-and-figure analysis systems. In the 1700s, a Japanese man named Homma, a trader in the futures market, discovered that, although there was a link between price and the supply and demand of rice, the markets were strongly influenced by the emotions of traders.



In order to create a candlestick chart, you must have a data set that contains open, high, low and close values for each time period you want to display. The hollow or filled portion of the candlestick is called “the body” (also referred to as “the real body”). The long thin lines above and below the body represent the high/low range and are called “shadows” (also referred to as “wicks” and “tails”). The high is marked by the top of the upper shadow and the low by the bottom of the lower shadow.

Candlestick chart Jaspersoft iReport



1.      Create report in i-report designer,  select Blank A4 size report from ireport designer.
File > New > Blank A4
(here eg.DemoOfCandlestickchart->NEXT->FINISH)

2.    Delete all band except summary band

3.    Goto-> Palette window tool->Select chart->Select MultiAxis chart->Select TimeSeries chart->Ok

4.    Right Click on Multiaxis chart->Select Add Exist Chart->Select Candlestick chart->Ok
(add two candlestick chart into multiaxis chart)

While writing query  keep in mind following things:
•    For input values to Candlestick chart  we require 5  values for each chart
High value

Low value
Open value
Close value
Volume value





avg(0) as  avg,

MAX(0) as max,

MIN(0) as min,

STDDEV(0) as std_dev,

“dummy” as _lable,

 1-1-1111   as _date,

as  abc  from dual


· Add  new Dataset ->Write query->add it

· Goto -> Report Inspector->Summary band-> Select candlestick chart (first)

->Right click on it ->Select chart data->goto chart data

Note:-  Generally creating single candlestick chart  first candlestick High-close value  are same and second chart Low-close value are same

Candlestick chart Jaspersoft iReport 2


5. Similarly as mentioned above instruction  set data for another chart .

Candlestick chart Jaspersoft iReport 3