V3: Column with gradient fills
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var legend;
var chartData = [
{
"sandik": "1410",
"yuzde": 150.9,
"oy": 20
},
{
"sandik": "1422",
"yuzde": 120.9,
"oy": 50
},
{
"sandik": "1413",
"yuzde": 100.9,
"oy": 35.50
},
{
"sandik": "1445",
"yuzde": 80.9,
"oy": 32.50
},
{
"sandik": "1642",
"yuzde": 50.9,
"oy": 18
},
];
AmCharts.ready(function () {
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "sandik";
chart.startDuration =0.7;
// change balloon text color
chart.balloon.color = "#000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.labelsEnabled = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.labelsEnabled = false;
valueAxis.minimum = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[category]]: [[value]]";
graph.valueField = "litres";
graph.descriptionField = "short";
graph.type = "column";
graph.lineAlpha = 1;
graph.fillAlphas = 1;
graph.fillColors = ["white", "red"];
graph.labelText = "[[description]]";
graph.balloonText = "[[short]] [[value]]";
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
});