How to put dynamic value in Doughnutchart Using chartjs?

👍:0

Well, first of all you should read the docs, but I’m going to assume based on your question that you do not understand english all that well.

The method you are looking for is .addData( segmentData, index )

👍:0

I am already Submitted the link.

<canvas id="Doughnut" width="310" height="350" ></canvas>
                                            <div id="Doughnut-Input">
                                                <form>
                                                    <ul>
                                                        <li>
                                                            <p>
                                                                <label>Mobilizations</label> <input type='text' id="Doughnut-1" />
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>Blue print</label> <input type='text' id="Doughnut-2" />
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>Realization</label> <input type='text' id="Doughnut-3" />
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>Final Preparation</label> <input type='text' id="Doughnut-4" />
                                                            </p>
                                                        </li>
                                                        <li>
                                                            <p>
                                                                <label>Golive & Support</label> <input type='text' id="Doughnut-5" />
                                                            </p>
                                                        </li>


                                                        <li>
                                                            <input type="button" id="submit-1" value="submit" />

                                                        </li>
                                                    </ul>

 $(document).ready(function () {
$("#submit-1").click(function (event) {


// Doughnut chart data
var DoughnutData = [
    {
        label: "Mobilizations",
        value: parseInt($("#Doughnut-1").val()),
        color: "#165c91" 
    },
    {
        label: "Blue print",
        value: parseInt($("#Doughnut-2").val()),
        color: "#0070c0"
    },
    {
        label: "Realization",
        value: parseInt($("#Doughnut-3").val()),
        color: "#157cc0"
    },
    {
        label: "Final Preparation",
        value: parseInt($("#Doughnut-4").val()),
        color: "#0d74be"
    },
     {
         label: "Golive & Support",
         value: parseInt($("#Doughnut-5").val()),
         color: "#0a5184"
     },
];

$("#Doughnut-Input form").bind("click", function () {
    $("input[type=text], textarea").val("");
});


// Doughnut chart options
var DoughnutOptions = {
    segmentShowStroke: false,
    animateScale: true,


}
// get Doughnut chart canvas
var Doughnut = document.getElementById("Doughnut").getContext("2d");

// draw Doughnut chart
new Chart(Doughnut).Doughnut(DoughnutData, DoughnutOptions);

});

});

Leave a comment