To make a pie chart kind of graph to a straight line

[firos s]

Hi Team,

I was searching for last few days to get some progress bar kind of chart where we have division based on the given values.

Here is a simple visualization. I am not sure is there any special name for this kind of chart. Please help/suggest me if same plugin is available with Google charts.

 

     

                               55%                                              33%                    11%

However, I have done this because it was very simple using json and javascript/jquery and HTML.

Please find the code attached. 

I am using bootstrap and jquery for this.

There are some custom css also used that I have used in the html file internally.

Tha data we need to send as JSON

JSON format

{

                "items": [

                    {

                        "label": "First",

                        "value": "500",

                        "color": "#f4c20d"

                    }, {

                        "label": "Second",

                        "value": "300",

                        "color": "#db3236"

                    }, {

                        "label": "third",

                        "value": "100",

                        "color": "#4885ed"

                    }

                ]}

Javascript login

$(document).ready(function() {

        $(".btn").click(function () {

            $("#bar").html("");

            var data = JSON.parse($("#txtJson").val());

            var total = 0;

            $.each(data.items, function (i, item) {

                total = total + parseFloat(item.value);

            });

            $("#bar").removeClass("hidden");

            var barWidth = parseInt($("#bar").width());

            $.each(data.items, function (i, item) {

                var percent = parseFloat(parseFloat(item.value) / total * 100);

                var sectionWidth = barWidth * percent / 100;

                if (data.items.length==1) {

                    $("#bar").append("<div id='cell"+i+"' class='sectionStyle sectionFull' style='width:" + sectionWidth + "px;background-color:" + item.color + "'></div>");

                } else {

                    if (i == 0) {

                        $("#bar").append("<div id='cell" + i + "' class='sectionStyle sectionLeft' style='width:" + sectionWidth + "px;background-color:" + item.color + "'></div>");

                    } else if (i == data.items.length - 1) {

                        $("#bar").append("<div id='cell" + i + "' class='sectionStyle sectionRight' style='width:" + sectionWidth + "px;background-color:" + item.color + "'></div>");

                    } else {

                        $("#bar").append("<div id='cell" + i + "' class='sectionStyle' style='width:" + sectionWidth + "px;background-color:" + item.color + "'></div>");

                    }

                }

                $("#cell" + i).click(function() {

                    alert("Your have selected " + item.label + ", value: " + item.value + ", percentage:" + percent);

                });

            });

        });

    });

Thank you

Firos