amcharts Column 3D
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 355px;"></div>
JavaScript
var chart;
var chartData = [{
country: "USA",
visits: 100000,
color: "#FF0F00"},
{
country: "China",
visits: 1,
color: "#FF6600"},
{
country: "Japan",
visits: 1809,
color: "#FF9E01"},
{
country: "Germany",
visits: 1322,
color: "#FCD202"},
{
country: "UK",
visits: 1122,
color: "#F8FF01"},
{
country: "France",
visits: 1114,
color: "#B0DE09"},
{
country: "India",
visits: 984,
color: "#04D215"},
{
country: "Spain",
visits: 711,
color: "#0D8ECF"},
{
country: "Netherlands",
visits: 665,
color: "#0D52D1"},
{
country: "Russia",
visits: 580,
color: "#2A0CD0"},
{
country: "South Korea",
visits: 443,
color: "#8A0CCF"},
{
country: "Canada",
visits: 441,
color: "#CD0D74"},
{
country: "Brazil",
visits: 395,
color: "#754DEB"},
{
country: "Italy",
visits: 386,
color: "#DDDDDD"},
{
country: "Australia",
visits: 384,
color: "#999999"},
{
country: "Taiwan",
visits: 338,
color: "#333333"},
{
country: "Poland",
visits: 328,
color: "#000000"}];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.marginRight = 0;
chart.marginTop = 0;
chart.autoMarginOffset = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.dashLength = 5;
categoryAxis.gridPosition = "start";
categoryAxis.gridCount = chartData.length;
categoryAxis.autoGridCount = false;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Visitors";
valueAxis.dashLength = 5;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.colorField = "color";
graph.balloonText =...