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)

“center.enter().append(“line”)”

-> Then legend axis

-> Update Inner quartile box.

“box.enter().append(“rect”)”

 im1 im2 im3

 

Final Output:-

pic4