Line graph mixed with 3D Column Chart
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.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 type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartdiv"></div>
<div id="radios">
<input type="radio" name="radios" value="receipts" checked /> 1 <br />
<input type="radio" name="radios" value="users" /> 2 <br />
</div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var initialOptions = {
"theme": "black",
"type": "serial",
"startDuration": 2,
"dataProvider": [{
"restaurant": "Restaurant 1",
"visits": 4025,
"color": "#FF0F00"
}, {
"restaurant": "Restaurant 2",
"visits": 1882,
"color": "#FF6600"
}, {
"restaurant": "Restaurant 3",
"visits": 1809,
"color": "#FF9E01"
}],
"valueAxes": [{
"position": "left",
"title": "Counts"
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"valueField": "visits"
}],
"depth3D": 20,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "restaurant",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 0,
"title": "Restaurants"
},
"export": {
"enabled": true
}
};
var chart = AmCharts.makeChart("chartdiv", initialOptions);
$('#radios input').on('change', function() {
var task = $('input[name="radios"]:checked', '#radios').val();
});