JavaScript Charts: Column chart with gradients

View sample source « Previous example Next example »

        <script type="text/javascript">
            var chart;

            var chartData = [{
                country: "Czech Republic",
                litres: 156.90,
                short: "CZ"
            }, {
                country: "Ireland",
                litres: 131.10,
                short: "IR"
            }, {
                country: "Germany",
                litres: 115.80,
                short: "DE"
            }, {
                country: "Australia",
                litres: 109.90,
                short: "AU"
            }, {
                country: "Austria",
                litres: 108.30,
                short: "AT"
            }, {
                country: "UK",
                litres: 99.00,
                short: "UK"
            }, {
                country: "Belgium",
                litres: 93.00,
                short: "BE"
            }];

            AmCharts.ready(function () {
                // SERIAL CHART
                var chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "country";
                chart.startDuration = 2;
                // change balloon text color                
                chart.balloon.color = "#000000";

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridAlpha = 0;
                categoryAxis.axisAlpha = 0;
                categoryAxis.labelsEnabled = false;

                // 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 = 0;
                graph.fillAlphas = 1;
                graph.fillColors = ["#ffe78e", "#bf1c25"];
                graph.labelText = "[[description]]";
                graph.balloonText = "[[category]]: [[value]] Litres";
                chart.addGraph(graph);

                // WRITE
                chart.write("chartdiv");
            });
        </script>

        <div id="chartdiv" style="width: 100%; height: 400px;"></div>