![](\"https:\/\/mindfusion.dev\/samples\/javascript\/chart\/value_gauge.png\" "\\"JavaScript")
<\/a><\/p>\nThe gauge is done with MindFusion Charts and Gauges for JavaScript library<\/a>. You can download the sample together with all needed libraries from this link.<\/a><\/p>\n I. Project Setup<\/strong><\/p>\n We will build the gauge using the OvalGauge<\/a> library from MindFusion JS Charts and Gauges control. We add two references, needed for the control to work properly:<\/p>\n We have placed those files in a Scripts folder. We will write the JavaScript code for the gauge in a separate file, which we call ValueGauge.js. This file is at the same directory where the web page is. We add a reference to it as well:<\/p>\n The web page with our sample contains a table. We use the table to place the control together with a text box. The text box is not needed, but we will use it to give the user the option to set the value of the gauge by typing it not only by dragging the pointer.<\/p>\n The gauge will be rendered through an HTML Canvas element. The location and size of the Canvas determine the location and the size of the gauge. It is important that we add an id the Canvas – this way we can reference it in the JavaScript code page, which will be necessary.<\/p>\n II. The Control<\/strong><\/p>\n Now we start editing the ValueGauge.js file and there we first add mappings to the namespaces of Mindusion.Gauges.js that we will use:<\/p>\n The first line is a reference to the Intellisense file that allows us to use code completion of the API members, if supported by our JavaScript IDE.<\/p>\n Now we need to get the DOM Element that corresponds to the gauge Canvas and use it to create an instance of the OvalGauge<\/a> class:<\/p>\n III. Gauge Scales<\/strong><\/p>\n Gauge scales depend on the type of the gauge. For oval gauges we use OvalScale<\/a> The OvalScale<\/a> needs to be associated with a gauge and here is how we create it:<\/p>\n The OvalScale<\/a> class offers the full set of properties needed to customize the scale. We use the setMinValue<\/a> and setMaxValue<\/a> methods to specify the value range o the gauge. The setStartAngle<\/a> and setEndAngle<\/a> specify the arc of the gauge and we set them to 120 and 420 respectively. You see that the arc is 300 degrees, which is less than a full circle – exactly how we want it to be.<\/p>\n We continue our customization by setting the fill and stroke of the scale. We actually do not want the default scale to be rendered at all, so we use setFill<\/a> and setStroke<\/a> to specify transparent colors:<\/p>\n Now we can continue with the ticks. Each gauge can have major, middle and minor ticks. Those ticks are not rendered by default.<\/p>\n We start the customization with the majorTickSettings They will render labels and want to have one tick with a tep of 20. So, we use setStep<\/a> to specify 20 as an interval and use setTickWidth<\/a> and setTickHeight<\/a> to set the size of the ticks. Those properties can be set to an absolute or relative value – see the LengthType<\/a> enumeration. We also need to change the default shape of the pointer – we use TickShape<\/a> rest of the settings are intuitive – setFill and setStroke<\/a> specify how the ticks are colored. We also use setLabelAlignment<\/a> to position the labels outside the ticks. setTickAlignment<\/a> is also an important property -it allows us to change the alignment of the ticks, so they can be drawn inside the scale.<\/p>\n The TickSettings<\/a> object is similar to MajorTickSettings<\/a><\/p>\n We should note here that setShowLabels<\/a> is false because we want the labels to appear only at intervals of 20. We also use setCount<\/a> to specify how many ticks we want between each two adjacent major ticks. The rest of the settings are the same as for MajorTickSettings<\/a>.<\/p>\n IV. Custom Painting<\/strong><\/p>\n The painting of the colored sections at the edge of the gauge is custom code. The gauges library provides various events that allow the developer to replace the default gauge drawing with custom drawing – see the Events<\/a> section of the OvalGauge<\/a> class.<\/p>\n In our sample we will handle two events:<\/p>\n prepaintBackground is raised before the background is painted. We can cancel the default painting or add some custom drawing to it. The same is true for prepaintForeground<\/a><\/p>\n In the prepaintBackground<\/a> event handler we first get the handler to the CanvasRenderingContext2D instance. Then we get the bounds of the painted element. This is the inside of the gauge. Each o the colored segments is pained as an arc. We do not create a path figure to fill – instead we set a very thick lineWidth of the stroke:<\/p>\n We go on painting this way all colored sections of the gauge, only changing the start and end angles. When we are ready we paint the inside of the gauge. We do it with a full arc:<\/p>\n The complete drawing is done inside the prepaintBackground<\/a> event handler. So, in the prepaintForeground<\/a> handler we only need to cancel the default painting:<\/p>\n V. The Gauge Pointer<\/strong><\/p>\n We need to add a Pointer<\/a> to the OvalScale<\/a> of the gauge instance if we want to show one:<\/p>\n The size of the pointer is also set in LengthType<\/a> units. This allows us to have the same pointer size relative to the size of the gauge even if we change the size of the Canvas. We use the PointerShape<\/a> enumeration to specify the type of pointer we want and then we make it interactive with setIsInteractive<\/a> As an addition to the default needle of the pointer we want to render a circle at the base of the pointer. We do it with custom drawing:<\/p>\n First we need to handle the prepaintPointer<\/a> event. In the event handling code we do the drawing:<\/p>\n Note that in this case we do not cancel the default painting – we will add to it, rather than replace it. Then we get the CanvasRenderingContext2D and size of the rendered element. What is new here is the transform of the CanvasRenderingContext2D object to the center of the gauge. Then we get the Brush that is used to paint the rest of the pointer and use it to fill the custom part as well. We can set the brush directly, but we prefer to take it from the base element – the Pointer<\/a> This way if we change settings of the Pointer<\/a> the color of the custom drawn circle will change automatically as well.<\/p>\n VI. Data Binding<\/strong><\/p>\n What we would like to do now is bind a change in the text field to the value of the gauge scale. We add a method that does it:<\/p>\n When we call the valueChanged method with the instance of the OvalGauge<\/a> as an argument, we can get its pointer and set its value to the value of ‘this’. We call the valueChanged in such way, that the ‘this’ reference will be the text field:<\/p>\n Now when the value changes, the event handler takes the pointer and set its value to the value the user has types.<\/p>\n That is the end of this tutorial. You can download the source code of the sample, together with all MindFusion libraries used from the following link:<\/p>\n Download Value Gauge in JavaScript Source Code<\/a><\/p>\n You can use the discussion forum<\/a> to post your questions, comments and recommendations about the sample or MindFusion charts and gauges.<\/p>\n About MindFusion JavaScript Gauges: A set of two gauge controls: oval and rectangular, with the option to add unlimited nuber of scales and gauges. All gauge elements support complete customization of their appearance. Custom drawing is also possible, where you can replace the default rendering of the gauge element or add to it. The gauge controls include a variety of samples that offer beautiful implementations of the most popular applications of gauges: thermometer, car dashboard, functions, compass, clock, cost meter and more. In this post we will look at the steps we need to make if we want to create this beautiful gauge below: The gauge is done with MindFusion Charts and Gauges for JavaScript library. You can download the sample together … Continue reading <script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Common.js<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Gauges.js<\/a>\"><\/script<\/span>><\/pre>\n<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"ValueGauge.js<\/a>\"><\/script<\/span>><\/pre>\n<table<\/span> cellpadding<\/span>=\"10<\/a>\">\n<\/span> <tbody<\/span>>\n<\/span> <tr<\/span>>\n<\/span> <td<\/span>>Project Cost (in thousands)<\/td<\/span>>\n<\/span> <\/tr<\/span>>\n<\/span> <tr<\/span>>\n<\/span> <td<\/span>><canvas<\/span> id<\/span>=\"value_meter<\/a>\" width<\/span>=\"300<\/a>\" height<\/span>=\"300<\/a>\"><\/canvas<\/span>><\/td<\/span>>\n<\/span> <\/tr<\/span>>\n<\/span> <tr<\/span>>\n<\/span> <td<\/span>>Cost <input<\/span> id<\/span>=\"cost<\/a>\" style<\/span>=\"width: 80px<\/a>\"><\/td<\/span>>\n<\/span> <\/tr<\/span>>\n<\/span> <\/tbody<\/span>>\n<\/span><\/table<\/span>><\/pre>\n\/\/\/ \nvar Gauges = MindFusion.Gauges;\n\nvar d = MindFusion.Drawing;\nvar OvalScale = Gauges.OvalScale;\nvar Length = Gauges.Length;\nvar LengthType = Gauges.LengthType;\nvar Thickness = Gauges.Thickness;\nvar Alignment = Gauges.Alignment;\nvar LabelRotation = Gauges.LabelRotation;\nvar TickShape = Gauges.TickShape;\nvar PointerShape = Gauges.PointerShape;<\/pre>\n
var value_meter = Gauges.OvalGauge.create(document.getElementById('value_meter'), false);<\/pre>\nvar valueScale = new Gauges.OvalScale(value_meter);\nvalueScale.setMinValue(0);\nvalueScale.setMaxValue(100);\nvalueScale.setStartAngle(120);\nvalueScale.setEndAngle(420);<\/pre>\n
valueScale.setFill('Transparent');\nvalueScale.setStroke('Transparent');\nvalueScale.setMargin(new Gauges.Thickness(0.075, 0.075, 0.075, 0.075, true));<\/pre>\nvar majorSettings = valueScale.majorTickSettings;\nmajorSettings.setTickShape(Gauges.TickShape.Line);\nmajorSettings.setTickWidth(new Gauges.Length(10, Gauges.LengthType.Relative));\nmajorSettings.setTickHeight(new Gauges.Length(10, Gauges.LengthType.Relative));\nmajorSettings.setFontSize(new Length(14, LengthType.Relative));\nmajorSettings.setNumberPrecision(0);\nmajorSettings.setFill('rgb(46, 52, 66)');\nmajorSettings.setStroke('rgb(46, 52, 66)');\nmajorSettings.setLabelForeground('rgb(175, 175, 175)');\nmajorSettings.setLabelAlignment(Alignment.InnerCenter);\nmajorSettings.setLabelRotation(LabelRotation.Auto);\nmajorSettings.setLabelOffset(new Length(6, LengthType.Relative));\nmajorSettings.setStep(20);\nmajorSettings.setTickAlignment (Alignment.OuterOutside);<\/pre>\nvar middleSettings = valueScale.middleTickSettings;\nmiddleSettings.setTickShape(TickShape.Line);\nmiddleSettings.setTickWidth(new Gauges.Length(10, Gauges.LengthType.Relative));\nmiddleSettings.setTickHeight(new Gauges.Length(10, Gauges.LengthType.Relative));\nmiddleSettings.setTickAlignment (Alignment.OuterOutside);\nmiddleSettings.setShowTicks(true);\nmiddleSettings.setShowLabels(false);\nmiddleSettings.setFill('rgb(46, 52, 66)');\nmiddleSettings.setStroke('rgb(46, 52, 66)');\nmiddleSettings.setCount(5);<\/pre>\nvalue_meter.addEventListener(Gauges.Events.prepaintBackground, onPrepaintBackground.bind(this));\nvalue_meter.addEventListener(Gauges.Events.prepaintForeground, onPrepaintForeground.bind(this));<\/pre>\n
function onPrepaintBackground(sender, args)\n{\n\targs.setCancelDefaultPainting(true);\n\n\tvar context = args.getContext();\n\tvar element = args.getElement();\n\tvar bounds = new d.Rect(0, 0, element.getRenderSize().width, element.getRenderSize().height);\n ..................................\n}<\/pre>\ncontext.lineWidth = 25;\nvar correction = context.lineWidth \/ 2;\n\t\n\/\/light green segment\ncontext.beginPath();\ncontext.strokeStyle = 'rgb(0, 205, 154)';\ncontext.arc(bounds.center().x, bounds.center().y, bounds.width \/ 2-correction, 0.665*Math.PI, 1*Math.PI, false);\t\ncontext.stroke();<\/pre>\n
context.beginPath();\nbounds.x += 25;\nbounds.y += 25;\nbounds.width -= 50;\nbounds.height -= 50;\ncontext.fillStyle = '#2e3442';\n\ncontext.arc(bounds.center().x, bounds.center().y, bounds.width \/ 2, 0*Math.PI, 2*Math.PI, false);\ncontext.fill();<\/pre>\n
function onPrepaintForeground(sender, args)\n{\n args.setCancelDefaultPainting(true);\n\n};<\/pre>\nvar pointer = new Gauges.Pointer();\npointer.setFill('white');\npointer.setStroke(\"#333333\");\n\npointer.setPointerWidth(new Gauges.Length(90, Gauges.LengthType.Relative));\npointer.setPointerHeight(new Gauges.Length(20, Gauges.LengthType.Relative));\n\npointer.setShape(Gauges.PointerShape.Needle2);\npointer.setIsInteractive(true);\n\nvalueScale.addPointer(pointer);<\/pre>\nvalue_meter.addEventListener(Gauges.Events.prepaintPointer, onPrepaintPointer.bind(this));<\/pre>\n
function onPrepaintPointer(sender, args)\n{\t\n\t\/\/args.setCancelDefaultPainting(true);\n\n\tvar context = args.getContext();\n\tvar element = args.getElement();\n\tvar size = element.getRenderSize();\n\tvar psize = new d.Size(0.2 * size.width, size.height);\n\n\tcontext.save();\n\tcontext.transform.apply(context, element.transform.matrix());\n\n\tcontext.beginPath();\n\tcontext.arc(psize.width \/ 2, psize.height \/ 2, psize.height*0.75, 0, 2 * Math.PI, false);\n\tvar fill = element.getFill();\n\tcontext.fillStyle = Gauges.Utils.getBrush(context, fill, new d.Rect(0, 0, size.width, size.height), false);\n\tcontext.fill();\n\tcontext.strokeStyle = '#333333';\n\tcontext.stroke();\n\n\tcontext.restore();\n};<\/pre>\nfunction valueChanged(id)\n{\n\tif (isNaN(this.value)) return;\n\tvar gauge = Gauges.OvalGauge.find(id);\n\tvar pointer = gauge.scales[0].pointers[0];\n\tpointer.setValue(+this.value);\n};<\/pre>\nvar cost = document.getElementById('cost');\ncost.onchange = valueChanged.bind(cost, ['value_meter']);<\/pre>\n
\nGauges for JavaScript is part of MindFusion charts and Dashboards for JavaScript. Details at https:\/\/mindfusion.dev\/javascript-chart.html<\/a>.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"