CODEWITHSUNDEEP
chart.js
Vikram Singh
Vikram Singh

Reputation: 77

Merge Jquery Knob Functionality in Chart Js

I am using Doughnut Chart of ChartJS, and here is my code

<!doctype html>
<html>
    <head>
        <title>Doughnut Chart</title>

        <script src="jquery-1.11.3.min.js"></script>
        <script src="jquery.knob.js"></script>
        <script src="../Chart.js"></script>
        <style>
            body{
                padding: 0;
                margin: 0;
            }
            #canvas-holder{
                width:30%;
            }
        </style>
    </head>
    <body>
        <div id="canvas-holder">
            <canvas id="chart-area" width="250" class="knob" height="250"/>
        </div>
    <script>

        var doughnutData = [
                {
                    value: 200,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 200,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 200,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#4D5360",
                    highlight: "#616774",
                    label: "Dark Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                },
                {
                    value: 200,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "Grey"
                }


            ];

            var options = {
                //Boolean - Whether we should show a stroke on each segment
                segmentShowStroke : true,

                //String - The colour of each segment stroke
                segmentStrokeColor : "#fff",

                //Number - The width of each segment stroke
                segmentStrokeWidth : 0,

                //Number - The percentage of the chart that we cut out of the middle
                percentageInnerCutout : 80, // This is 0 for Pie charts

                //Number - Amount of animation steps
                animationSteps : 100,

                //String - Animation easing effect
                animationEasing : "easeOutBounce",

                //Boolean - Whether we animate the rotation of the Doughnut
                animateRotate : true,

                //Boolean - Whether we animate scaling the Doughnut from the centre
                animateScale : false,

                showTooltips: false

            }


            window.onload = function(){
                var ctx = document.getElementById("chart-area").getContext("2d");
                var myDoughnut = new Chart(ctx).Doughnut(doughnutData, options);

                $("#chart-area").click( function(evt){
                    var activePoints = myDoughnut.getSegmentsAtEvent(evt);           
                    /* do something */
                }
            );  
            };



    </script>
    </body>
</html>

There is a requirement to update the value while clicking on the canvas, in the middle of doughnut chart (Just like in Jquery Knob http://anthonyterrien.com/knob/) i.e the value updates on sliding as well as clicking on the canvas. Is there any way to merge the functionality of these two libraries

Upvotes: 1

Views: 1387

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

It would be better to use that control. That said, you could do it Chart.js too. Here is a fair approximation (note that I've used jQuery for some parts, but you could do the same using plain javascript).

CSS

<style>
    .myChartWrapper {
        position: relative;
        display: inline-block;
    }

    .myChartValue {
        border: none;
        font-family: 'Helvetica';
        font-size: 20px;
        overflow: visible;
        width: 2em;
        white-space: nowrap;
        text-align: center;
        position: absolute;
        background-color: transparent;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

        .myChartValue::-ms-clear {
            display: none;
        }
</style>

HTML

<div class="myChartWrapper">
    <canvas id="myChart"></canvas>
    <input id="myChartValue" class="myChartValue" />
</div>

Javascript

var value = 20;


var MAX = 200;
var STEP = 1;
var HALFSETCOLOR = "rgba(154, 225, 254, 1)";
var SETCOLOR = "rgba(134, 205, 234, 1)";
var UNSETCOLOR = "rgba(237, 237, 237, 1)";


var data = [];
for (var i = 0; i < MAX; i = i + STEP) {
    data.push({
        value: STEP,
        color: (i < value) ? SETCOLOR : UNSETCOLOR,
        label: i
    })
}


var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    animation: false,
    segmentShowStroke: false,
    showTooltips: false
});

$("#myChartValue").val(value);


// half set the sectors
canvas.onmousedown = function (evt) {
    var activeSegments = myDoughnutChart.getSegmentsAtEvent(evt);
    if (activeSegments.length) {
        var value = Number(activeSegments[0].label);

        var crossed = false;
        myDoughnutChart.segments.forEach(function (segment) {
            if (Number(segment.label) >= value)
                crossed = true;

            if (!crossed && segment.fillColor !== SETCOLOR)
                segment.fillColor = HALFSETCOLOR;
            else if (crossed && segment.fillColor !== UNSETCOLOR)
                segment.fillColor = HALFSETCOLOR;
        })
        myDoughnutChart.update()
        myDoughnutChart.value = value;

        $("#myChartValue").val(value);
    }
};

canvas.onmousemove = function (evt) {
    if (myDoughnutChart.value !== undefined) {
        canvas.onmousedown(evt)
    }
}

// set / unset sectors
canvas.onmouseup = function () {
    var value = myDoughnutChart.value;
    if (value !== undefined) {
        var crossed = false;

        myDoughnutChart.segments.forEach(function (segment, i) {
            if (Number(segment.label) >= value)
                crossed = true;

            if (!crossed)
                segment.fillColor = SETCOLOR;
            else if (crossed)
                segment.fillColor = UNSETCOLOR;
        })

        myDoughnutChart.value = undefined;
        myDoughnutChart.update()
    }
};

$("#myChartValue").on("change", function () {
    myDoughnutChart.value = Number($("#myChartValue").val());
    canvas.onmouseup();
})

It could do with a bit of cleanup (like handling change in direction without lifting the mouse), but comes pretty close to the knob functionality without too much effort.

Fiddle - http://jsfiddle.net/rxrxLo33/

enter image description here

Upvotes: 1

Related Questions