wijlineargauge Step 2 of 3: Initializing the Widget

In the previous step, you added markup to add the content that will appear in the linear gauge. In this step, you'll add the jQuery script needed to initialize the widget.

Complete the following step

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlineargauge widget:

<script type="text/javascript">
     $(document).ready(function () {
         $("#gauge1").wijlineargauge({
             width: 400,
             height: 100,
             value: 50,
             max: 100,
             min: 0,
             labels: {
                 style: {
                     fill: "#1E395B",
                     "font-size": "12pt",
                     "font-weight": "800"
                 }
             },            
             tickMajor: {
                 position: "inside",
                 offset: -11,
                 interval: 20,
                 factor: 12,
                 style: {
                     fill: "#1E395B",
                     stroke: "none"
                 }
             },
             tickMinor: {
                 position: "inside",
                 offset: -11,
                 visible: true,
                 interval: 4,
                 factor: 10,
                 style: {
                     fill: "#1E395B",
                     stroke: "none"
                 }
             },
             pointer: {
                 shape: "rect",
                 length: 0.5,
                 style: {
                     fill: "#1E395B",
                     stroke: "#1E395B"
                 }
             },
             face: {
                 style: {
                     fill: "270-#FFFFFF-#D9E3F0",
                     stroke: "#7BA0CC",
                     "stroke-width": "4"
                 }
             },
             ranges: [{
                 startValue: 20,
                 endValue: 80,
                 startDistance: 0.85, //A ratio value determine the location of the range at start value.
                 endDistance: 0.85, //A ratio value determine the location of the range at end value.
                 startWidth: 0.5,
                 endWidth: 0.5,
                 style: {
                     fill: "90-#3DA1D8-#3A6CAC",
                     stroke: "none"
                 }
             }]
         });
     });
</script>

This script will initialize the widget.

You have created an application and added and initialized the wijlineargauge widget. In the next step, in wijlineargauge Step 3 of 3: Running the Project, you'll view the run-time interactions of the widget.