flot pie chart data with hh:mm format

Question

i have data for flot pie chart in h:m format.

normally if i give data in the following format it shows pie chart properly

var data = [
    {label: "data1", data:10},
    {label: "data2", data: 20},

];

but if instead of int/double i directly give data with hh:mm format i dont get anything

var data = [
    {label: "data1", data:10:30},
    {label: "data2", data: 20:20},

];

my question is without converting h:m to a plain int/double value is there any other way to show h:m in my flot pie chart?

if no then which conversion would be better for this?

10:30 isn't a valid value... you can't use : in that way. Just a guess, but what if you try a string: "10:30" — musefan
thanks. but it will be only if i convert it to double.but i am seeking if there is any other way doing this without converting the main format (h:m) — kakon
using it as string will not show me the percentage properly. i also need that percentage. — kakon
maybe try a date value then, but if Flot hasn't even hit version 1 yet then I wouldn't count on it doing everything you need... new Date(2000, 0, 0, 10, 30).. I would guess it's going to need a decimal though if you want percentages — musefan
thanks. it means you are saying me to convert all time with same year,month, day. well thats also a good idea. in that case i already have the ticks of the timespan.may be i can also use that. but still looking for something better — kakon

Raidri Raidri · Accepted Answer · 2015-06-30T09:09:02

Flot can not automatically unterstand your time values, you have to convert them to e.g. minutes. You can then use a labelFormatter function to show the values of the pie slices in the original format. Something like this:

$(function () {
    var data = [{
        label: "data1",
        data: '10:30'
    }, {
        label: "data2",
        data: '20:20'
    },

    ];

    for (var i = 0; i < data.length; i++) {
        var hours = parseInt(data[i].data.split(':')[0]);
        var minutes = parseInt(data[i].data.split(':')[1]);
        data[i].data = hours * 60 + minutes;
    }

    var plot = $.plot("#placeholder", data, {
        series: {
            pie: {
                show: true,
                label: {
                    radius: 0.5,
                    formatter: labelFormatter
                }
            }
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        legend: {
            show: false
        }
    });

    function labelFormatter(label, series) {
        var value = Math.floor(series.data[0][1] / 60) + ':' + (series.data[0][1] % 60);
        return "<div style='font-size:10pt; text-align:center; padding:2px; color:black;'>" + label + "<br/>" + Math.round(series.percent) + "%<br />" + value + "</div>";

    }

});

See this fiddle for the full example.

flot pie chart data with hh:mm format

1 Answers