CODEWITHSUNDEEP
amcharts
Anuradha
Anuradha

Reputation: 21

How to divide amchart pie chart using time duration

I am using amchart pie chart. I want to divide slices using hours and minutes and seconds. For example if the total working time is 8 hours, In that user spend 5 hours 30 minuts in working place and another time is out side. Then i want to add those time based on amchart pie chart. I don't know how to add that time. I added only numbers based. Please help me. Here is my code:

var chart;
var a = 1.1;
var chart = AmCharts.makeChart("chartdiv", {
    "type" : "pie",
    "allLabels" : [{
            "text" : "05:24",
            "align" : "center",
            "bold" : true,
            "y" : 230
        }, {
            "text" : "Clocked In",
            "align" : "center",
            "bold" : false,
            "y" : 250
        }
    ],
    "dataProvider" : [{
            "country" : a + "-in Visits",
            "litres" : 11
        }, {
            "country" : "Driving",
            "litres" : 20
        }
    ],
    "valueField" : "litres",
    "titleField" : "country",
    "labelText" : "[[title]]",
    "radius" : "30%",
    "innerRadius" : "60%",
    "marginTop" : 0,
    "marginBottom" : 0
});


<div id="chartdiv"></div>

in above code i added numbers in liters field. There i want to add time.

Please help me.

Upvotes: 0

Views: 407

Answers (1)

xorspark
xorspark

Reputation: 16012

Pie charts don't accept time units, they have to be numbers. What you can do instead is express your values in seconds as a duration for each slice and then reformat those values into a timestamp using the balloonFunction and labelFunction if you want to display them in that format.

function secondsToTimestamp(totalSeconds) {
  var hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  var minutes = Math.floor(totalSeconds / 60);
  var seconds = totalSeconds % 60;
  return ("0" + hours).slice(-2) + ":" +
         ("0" + minutes).slice(-2) + ":" +
         ("0" + seconds).slice(-2);
}

// ...
AmCharts.makeChart("...", {
  // ...
  "balloonFunction": function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
 "labelFunction": function(graphDataItem, valueText) {    
        return secondsToTimestamp(+valueText);
  }
  // ...
});


function secondsToTimestamp(totalSeconds) {
  var hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  var minutes = Math.floor(totalSeconds / 60);
  var seconds = totalSeconds % 60;
  return ("0" + hours).slice(-2) + ":" +
    ("0" + minutes).slice(-2) + ":" +
    ("0" + seconds).slice(-2);
}

var chart;
var a = 1.1;
var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "allLabels": [{
    "text": "05:24",
    "align": "center",
    "bold": true,
    "y": 230
  }, {
    "text": "Clocked In",
    "align": "center",
    "bold": false,
    "y": 250
  }],
  "dataProvider": [{
    "text": a + "-in Visits",
    "seconds": 20745
  }, {
    "text": "Driving",
    "seconds": 29475
  }],
  "valueField": "seconds",
  "titleField": "text",
  "balloonFunction": function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
  labelFunction: function(graphDataItem) {
    return graphDataItem.title + ": " + secondsToTimestamp(graphDataItem.value);
  },
  "radius": "30%",
  "innerRadius": "60%",
  "marginTop": 0,
  "marginBottom": 0
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>

Upvotes: 2

Related Questions