AmCharts - Chat - Changing "valueField"
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="controls">
<button onclick="valueField('count')">valueField 'count'</button>
<button onclick="valueField('ratio')">valueField 'ratio'</button>
</div>
CSS
#chartdiv {
width : 100%;
height : 500px;
background-color: white;
}
#controls {
margin-top: 20px;
text-align: center;
}
#controls button {
width: 200px;
height: 40px;
}
JavaScript
window.chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [ {
"country": "USA",
"count": 2025,
"ratio": 10
}, {
"country": "China",
"count": 1882,
"ratio": 20
}, {
"country": "Japan",
"count": 1809,
"ratio": 30
}, {
"country": "Germany",
"count": 1322,
"ratio": 230
} ],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "count"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
function valueField(_valueField) {
window.chart.graphs[0].valueField = _valueField;
window.chart.validateData();
window.chart.animateAgain();
}