Gauge Chart reuable code using d3.js
Generate reusable code for creating Gauge charts.
- Below is the details of javascript code which is used for creating gauge chart. It is a reusable code with few parameters which can be customized.
Let us start with creating a class GaugeChart and a constructor which accepts parameters to build gauge.
· ChartColor : The default color of the chart when animation doesnot occur(when chart not updated with value)
· innerRadius : The innerRadius of the arc
· outerRadius : The outerRadius of the arc
· NeedleColor : The color of the Needle
· Margin : margin for the chart , if any space required around the chart. By default 1px space will be considered
· NeedleHeight : If the user needs any specific height for the needle can be specified, else the needle will span to the outerRadius of the arc
· ColorPerPercent : is a dictionary value which contains values in the form
“<<ColorCode>>” : {“start”:<<startPercent>>,”end”:<<endPercent>>}
“ColorCode” : is the color of the arc to be displayed when the needle points between percent “startPercent” and “endPercent”
· Id : Id of the element inside which the chart will be created
- Next lets try to create a gauge chart with the parameters obtained above.
Let us evaluate the chart height and width eliminating the margin. And set the id for chart starting with Gauge_ and appending the element id passed as parameter. The code this.id.replace(/\s+/g,””) removes any space in the id passed as parameter.
Firstly create an svg element with the id,height and width evaluated
Move the chart such that it aligns as per the margin provided, so is to the center.
To draw the arc and needle from the center of the chart let us have the cursor to the middle of the chart.
Create and arc with the innerradius and outerradius
Since we will need to create upper half arc, the start angle should be set to Math.PI/2
and endangle to –Math.PI/2
Append the arc to the chart with the default chart color and border.
Stroke-width is the border for the arc.
Next let us evaluate the angle for the needle to start. Let us consider 0deg for extreme left and 180deg for extreme right.
0deg is equal to 0%
90deg is equal to 50%
180deg is equal to 100%
The below code converts percent to radians for the needle to be positioned.
For now lets consider 0deg.CenterX and CenterY are with value of 0.
Now calculate the X and Y positions to draw the needle.
Now draw the Needle with needle pointing to 0deg (0%). The position of the needle should be center.
Draw the small circle at the bottom of the needle. The circle is 2px greater than the radius of the needle.
Result : The above code creates the below graph.
Now let us include the html code for creating gauge chart with the below input parameters.
Now let us move to include the update functionality
In this case needle is created for each degree angle and color of the arc modified as per where the needle points to at that instance.
selectColor() function is the color of the arc based on the position of the needle. This is set as per the inputs provided with accordance with start and end percentage and colors for each.
chart.updateGaugeChart(0.63);
with above code will move the needle to 63% and set the color of the arc from blue →green →red as the needle moves along the path.
Result :
Please find complete code in git repository :
