CODEWITHSUNDEEP
javascriptanimationchartsslideramcharts
Bloggy
Bloggy

Reputation: 109

How to use a slider to animate an amcharts pie chart?

So I'm currently animating a pie chart using js and amcharts and was wondering if it was possible to use a slider to do so, instead of a time delay. So instead of having it change the current day every 1.5s you'd select the day you want to see the data for using a slider. Is that even possible using js ?

Thanks in advance ! :)

Upvotes: 0

Views: 732

Answers (1)

George Pushia
George Pushia

Reputation: 134

Ok, let's start.

First, you should know that sliders (<input> with type="range") have event onchange.

Second, is that you can pass a value of a slider to a function, which could be associated with your chart data.

Something like that:

const daysInMonth = 30 // just as an example

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "day": 1
  },
  {
    "day": daysInMonth - 1
  }],
  "valueField": "day",
  "titleField": "day",
   "balloon": {
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );

function changeDay(value) {
  chart.dataProvider[0].day = value;
  chart.dataProvider[1].day = daysInMonth - value;
  chart.validateData();
}
#chartdiv {
  width: 100%;
  height: 200px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<h4>Day of a month</h4><input type="range" min="1" max="30" step="1" value="1" onchange="changeDay(this.value)">
<div id="chartdiv"></div>

This is just a quick example of how can you use your slider's value. Have a good day!

Upvotes: 1

Related Questions