2

I want to add tool tip on JQuery Knob Arcs.

This is what I have achieved till now:

$(document).tooltip({
    track: true
});
$('.knob').val(5).trigger('change');

$(".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);
    },
    draw: function () {

    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.11/jquery.knob.min.js"></script>
<div class="demo" style="height:420px;width:100%">
    <p></p>
    <div style="position:relative;width:350px;margin:auto" title="1300">
        <div style="position:absolute;left:10px;top:10px">
            <input class="knob hour" data-min="0" data-max="24" data-bgColor="#E0E0E0" data-fgColor="#F9A61B" data-displayInput=false data-width="300" data-height="300" data-thickness=".1">
        </div>
        <div style="position:absolute;left:27px;top:27px" title="1200">
            <input class="knob minute" data-min="0" data-max="60" data-bgColor="transparent" data-fgcolor="#2E2E8A" data-displayInput=false data-width="265" data-height="265" data-thickness=".1">
        </div>
        <div style="position:absolute;left:43px;top:43px" title="1100">
            <input class="knob second" data-min="0" data-max="100" data-bgColor="transparent" data-fgColor="#E62E00" data-displayInput=false data-width="233" data-height="233" data-thickness=".10">
        </div>
    </div>
</div>

I have done this using D3JS and AMChart, have a look at D3JS fiddle and AMCharts fiddle and I also want to know which would be the better library for Multi-level Donut charts, and if there is any other alternative(open source) charting library like these please let me know.

Ishan Gidwani
  • 33
  • 6
  • 1
    this [fiddle](http://jsfiddle.net/ishangidwani/ywdLzwo0/5/) is working perfectly, I don't know why here its not working.... – Ishan Gidwani Sep 04 '15 at 10:19
  • 2
    Have you tried http://roundsliderui.com ? Is this suitable for you ? – Soundar Sep 04 '15 at 17:48
  • 1
    Can I overlap the pie's with proper Tooltip on it???? Have you seen this fiddles [D3JS Overlapped Pie Chart](http://jsfiddle.net/ishangidwani/ehzgk3nt) and [AMChart Overalpped Pie Chart](http://jsfiddle.net/ishangidwani/5gp455ko/). Because I don't think it'll work in [Roundsliderui](http://roundsliderui.com/). – Ishan Gidwani Sep 05 '15 at 05:56

0 Answers0