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.
<https://lh3.googleusercontent.com/-D77hqS_X-4E/V6iaVtayAsI/AAAAAAAAJG0/V0wSWvufjKQWAnkACpfleSeZQyQTNGYGACLcB/s1600/straighted-pie-chart.PNG>
* 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
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/f2f86bab-b765-4fb6-ab59-d0a6281fc247%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
{
"items": [
{
"label": "First",
"value": "500",
"color": "#f4c20d"
}, {
"label": "Second",
"value": "300",
"color": "#db3236"
}, {
"label": "third",
"value": "100",
"color": "#4885ed"
}
]}
