CODEWITHSUNDEEP
javascriptamcharts
radek.
radek.

Reputation: 378

Change data from second to minutes/hours/days in AmCharts


I have some problem with AmCharts plugin. I have JSON'a who calls me a second. I would like to turn the second in minutes / hours / days (depending on how many there are). There is a some easy way? For example, it looks like this:

var dataProvider = [
{title:"Test_1", value:"89"},
{title:"Test_2", value:"43"}
];
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "dark",
  "dateFormats": 'DD:JJ:NN:SS',
  "dataProvider": dataProvider,
  "titleField": "title",
  "valueField": "value",
  "labelRadius": 5,
  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",
  "export": {
    "enabled": true
  },
  "legend":{
    "enabled": true,
    "align": "center",
    "color": "white",
    "labelText" : "[[title]]"
  }
});

JSFIDDLE

In the dataProvider I have 'value' which kept seconds. It is a simple method that will turn them to me at another time unit and displays on the graph?

Upvotes: 0

Views: 1274

Answers (1)

martynasma
martynasma

Reputation: 8595

You could use balloonFunction to define your own custom function that formats the balloon. If set the chart passes in the whole information about slice being hovered and expects it to return a string to be displayed in a balloon.

The same way, you could use the labelFunction to format labels.

Here's your chart with the balloonFunction applied to format second values as time:

var dataProvider = [
  { title: "Test_1", value: "89" },
  { title: "Test_2", value: "43" }
];
var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "dark",
  "dateFormats": 'DD:JJ:NN:SS',
  "dataProvider": dataProvider,
  "titleField": "title",
  "valueField": "value",
  "labelRadius": 5,
  "radius": "42%",
  "innerRadius": "60%",
  "labelText": "[[title]]",
  "balloonFunction": function(item) {

    function formatTime(seconds) {
      var sec_num = parseInt(seconds, 10);
      var hours = Math.floor(sec_num / 3600);
      var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
      var seconds = sec_num - (hours * 3600) - (minutes * 60);

      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var time = hours + ':' + minutes + ':' + seconds;
      return time;
    }

    return item.title + ": " + formatTime(item.value);
  },
  "export": {
    "enabled": true
  },
  "legend": {
    "enabled": true,
    "align": "center",
    "color": "white",
    "labelText": "[[title]]"
  }
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 250px;"></div>

Upvotes: 2

Related Questions