Javascript / amcharts - dynamically control property value of amcharts
Question
I am trying to mildly replicate what amcharts has done to their demo chart in this link ie. adding controls to change the graph's property. But I can't figure out how the value updating works in javascript. Here is my code:
HTML :
<body>
...
<div id="chartdiv" style="width=100%; height:400px;"></div>
<input type="range" min="0.1" max="1.0" value="0.5" step="0.01" id="mySlider">
...
</body>
Javascript/amCharts :
<script>
// data for amCharts
var chartData = [ {
"country": "USA",
"visits": 4252
}, {
"country": "China",
"visits": 1882
}];
// drawing amCharts using object-based method
AmCharts.ready( function() {
//var chart = AmCharts.makeChart("chartdiv");
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.type = "column";
graph.fillAlphas = updateValue();
chart.addGraph( graph );
chart.write("chartdiv")
});
// here is my function to update value dynamically
function updateValue() {
val = document.getElementById("mySlider").value;
return val;
}
</script>
I want to update the opacity of the graph dynamically. How do I do that? This should be simple but I am quite new in javascript development.
EDIT: Updating with the final code which works
Javascript/amCharts :
<script>
...
// drawing amCharts using object-based method
AmCharts.ready( function() {
//var chart = AmCharts.makeChart("chartdiv");
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.type = "column";
graph.fillAlphas = updateValue();
chart.addGraph( graph );
chart.write("chartdiv");
//add this code to add dynamic opacity control
//** "jquery.js" script needs to be linked **//
$('#mySlider').on('input change', function() {
//var target = chart;
//chart.startDuration = 0;
var target = chart.graphs[0]
target['fillAlphas'] = this.value;
chart.validateNow();
});
});
...
</script>
1 answers
solution1
0 ACCPTED 2017-10-11 07:11:51
Try this code on change event of your input
jQuery('#mySlider').off().on('input change', function() {
var target = chart;
chart.startDuration = 0;
target = chart.graphs[0];
target['fillAlphas'] = this.value;
chart.validateNow();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.