Reputation: 109
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
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