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.