How to Adjust and Display a Pie Chart Using Mouse Cursor or Numeric Input【jquery.knob.js】

It’s useful to have interactive pie charts on websites and dashboards. Especially when users can not only input values manually but also intuitively adjust them using the mouse, usability improves significantly.
In this article, we’ll explain how to use the jQuery plugin jquery.knob.js to adjust pie charts in real-time via mouse drag or numeric input. We’ve also prepared a demo page, so try it out as you follow along.

CSS for Adjusting and Displaying Pie Chart via Mouse or Numeric Input

*This is the CSS for the pie chart area (div.demo). Please modify as needed.

<style type="text/css">
body{
  font-size: 16px;
  line-height: 1.4em;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.4em;
}
div.demo{
  text-align:center;
  width: 280px;
  display: inline-block;
}
</style>

JavaScript for Adjusting and Displaying Pie Chart via Mouse or Numeric Input

*Includes jquery-1.11.0.min.js and jquery.knob.js.
Use $(pie chart area).knob({options}) to apply interaction options to the chart area (.knob).

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.knob.js"></script>
        <script>
            $(function($) {
                $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);
                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    },
                    /*format : function (value) {
                        return value + '%';
                    },*/
                    draw : function () {
                        if(this.$.data('skin') == 'tron') {
                            this.cursorExt = 0.3;
                            var a = this.arc(this.cv),
                                pa,
                                r = 1;
                            this.g.lineWidth = this.lineWidth;
                            if (this.o.displayPrevious) {
                                pa = this.arc(this.v);
                                this.g.beginPath();
                                this.g.strokeStyle = this.pColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                                this.g.stroke();
                            }
                            this.g.beginPath();
                            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                            this.g.stroke();
                            this.g.lineWidth = 2;
                            this.g.beginPath();
                            this.g.strokeStyle = this.o.fgColor;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                            this.g.stroke();
                            return false;
                        }
                    }
                });
            });
        </script>

HTML for Adjusting and Displaying Pie Chart via Mouse or Numeric Input

*The following reuses demo code from “Source: jQuery Knob” to show 6 types of pie charts. Modify as needed.

  <h1>You can adjust the pie chart by clicking with the mouse or entering a number.<br>Try clicking the chart with your mouse or changing the value manually.</h1>

<div align="center">

    <div class="demo">
        <p>&#215; Disable display input</p>
        <div>
data-width="100"
data-displayInput=false
        </div>
        <input class="knob" data-width="100" data-displayInput=false value="35">
    </div>

    <div class="demo">
        <p>&#215; 'cursor' mode</p>
        <div>
data-width="150"
data-cursor=true
data-thickness=.3
data-fgColor="#222222"
        </div>
        <input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
    </div>

    <div class="demo" >
        <p>&#215; Display previous value</p>
        <div>
data-displayPrevious=true
data-min="-100"
        </div>
        <input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
    </div>

    <div style="clear:both"></div>

    <div class="demo">
        <p>&#215; Angle offset</p>
        <div>
data-angleOffset=90
data-linecap=round
        </div>
        <input class="knob" data-angleOffset=90 data-linecap=round value="35">
    </div>

    <div class="demo">
        <p>&#215; Angle offset and arc</p>
        <div>
data-fgColor="#66CC66"
data-angleOffset=-125
data-angleArc=250
data-rotation=anticlockwise
        </div>
        <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" data-rotation="anticlockwise" value="35">
    </div>

    <div class="demo" >
        <p>&#215; 4-digit, step 0.1</p>
        <div>
data-step=".1"
data-min="-10000"
data-max="10000"
value="0"
data-displayPrevious=true
        </div>
        <input class="knob" data-min="-10000" data-displayPrevious=true data-max="10000" data-step=".1" value="0">
    </div>

</div>

Demo Page: Adjusting Pie Chart Using Mouse or Numeric Input with jquery.knob.js

Demo page: Adjusting Pie Charts with Mouse or Input Using jquery.knob.js

Source: jQuery Knob

Summary

In this article, we introduced how to use jquery.knob.js to freely adjust pie charts with mouse interaction or numeric input.

Key Points Recap

• Set up CSS to format the pie chart display area
• Write HTML to insert interactive pie charts
• Implement JavaScript to allow updates via mouse or input

By applying this customization, you can enhance the user experience in dashboards and data visualization tools.
Be sure to try it in your own web projects!

*Use at your own risk if reusing this content.
Do not reuse the Google Analytics tag inside the demo page’s head tag.