John Doe
PHP DeveloperCharts - Column & Bar
One stop solution for perfect admin dashboard!
amCharts! Programming libraries and tools for all your data visualization needs. For official documentation, click here .
Simple Column Chart
<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart2
var chart2 = AmCharts.makeChart( "chart2", {
"type": "serial",
"theme": "light",
"fontFamily": "Poppins",
"dataProvider": [ {
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
} ],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: [[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
});
</script>
Column & Bar - Column with rotated series
<!-- ========== HTML ========== -->
<div id="chart1" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart1
var chart = AmCharts.makeChart("chart1", {
"type": "serial",
"theme": "light",
"fontFamily": "Poppins",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"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"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: [[value]]",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
});
</script>
Stacked Column Chart
<!-- ========== HTML ========== -->
<div id="chart3" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart3
var chart3 = AmCharts.makeChart("chart3", {
"type": "serial",
"theme": "light",
"fontFamily": "Poppins",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [{
"year": 2003,
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 1.5,
"meast": 1.2,
"africa": 0.8
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 1.7,
"meast": 1.25,
"africa": 0.6
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 1.6,
"meast": 1.2,
"africa": 0.5
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"color": "#000000",
"valueField": "europe"
}, {
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "North America",
"type": "column",
"color": "#000000",
"valueField": "namerica"
}, {
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"color": "#000000",
"valueField": "asia"
}, {
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Latin America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
}, {
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Middle-East",
"type": "column",
"color": "#000000",
"valueField": "meast"
}, {
"balloonText": "[[title]]
[[category]]: [[value]]",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "africa"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
});
});
</script>
Column and Line mix
<!-- ========== HTML ========== -->
<div id="chart4" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart4
var chart4 = AmCharts.makeChart( "chart4", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"fontFamily": "Poppins",
"balloon": {
"adjustBorderColor": false,
"horizontalPadding": 10,
"verticalPadding": 8,
"color": "#ffffff"
},
"dataProvider": [ {
"year": 2009,
"income": 23.5,
"expenses": 21.1
}, {
"year": 2010,
"income": 26.2,
"expenses": 30.5
}, {
"year": 2011,
"income": 30.1,
"expenses": 34.9
}, {
"year": 2012,
"income": 29.5,
"expenses": 31.1
}, {
"year": 2013,
"income": 30.6,
"expenses": 28.2,
"dashLengthLine": 5
}, {
"year": 2014,
"income": 34.1,
"expenses": 32.9,
"dashLengthColumn": 5,
"alpha": 0.2,
"additional": "(projection)"
} ],
"valueAxes": [ {
"axisAlpha": 0,
"position": "left"
} ],
"startDuration": 1,
"graphs": [ {
"alphaField": "alpha",
"balloonText": "[[title]] in [[category]]:
[[value]] [[additional]]",
"fillAlphas": 1,
"title": "Income",
"type": "column",
"valueField": "income",
"dashLengthField": "dashLengthColumn"
}, {
"id": "graph2",
"balloonText": "[[title]] in [[category]]:
[[value]] [[additional]]",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Expenses",
"valueField": "expenses",
"dashLengthField": "dashLengthLine"
} ],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
},
"export": {
"enabled": true
}
} );
});
</script>
3D Bar Chart
<!-- ========== HTML ========== -->
<div id="chart5" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart5
var chart5 = AmCharts.makeChart("chart5", {
"theme": "light",
"type": "serial",
"fontFamily": "Poppins",
"startDuration": 2,
"dataProvider": [{
"country": "USA",
"visits": 4025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"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"
}],
"valueAxes": [{
"position": "left",
"title": "Visitors"
}],
"graphs": [{
"balloonText": "[[category]]: [[value]]",
"fillColorsField": "color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"valueField": "visits"
}],
"depth3D": 20,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 90
},
"export": {
"enabled": true
}
});
});
</script>
3D Stacked Column Chart
<!-- ========== HTML ========== -->
<div id="chart6" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart6
var chart6 = AmCharts.makeChart("chart6", {
"theme": "light",
"type": "serial",
"fontFamily": "Poppins",
"dataProvider": [{
"country": "USA",
"year2004": 3.5,
"year2005": 4.2
}, {
"country": "UK",
"year2004": 1.7,
"year2005": 3.1
}, {
"country": "Canada",
"year2004": 2.8,
"year2005": 2.9
}, {
"country": "Japan",
"year2004": 2.6,
"year2005": 2.3
}, {
"country": "France",
"year2004": 1.4,
"year2005": 2.1
}, {
"country": "Brazil",
"year2004": 2.6,
"year2005": 4.9
}, {
"country": "Russia",
"year2004": 6.4,
"year2005": 7.2
}, {
"country": "India",
"year2004": 8,
"year2005": 7.1
}, {
"country": "China",
"year2004": 9.9,
"year2005": 10.1
}],
"valueAxes": [{
"stackType": "3d",
"unit": "%",
"position": "left",
"title": "GDP growth rate",
}],
"startDuration": 1,
"graphs": [{
"balloonText": "GDP grow in [[category]] (2004): [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2004",
"type": "column",
"valueField": "year2004"
}, {
"balloonText": "GDP grow in [[category]] (2005): [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"valueField": "year2005"
}],
"plotAreaFillAlphas": 0.1,
"depth3D": 60,
"angle": 30,
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
});
</script>
Layered Column Chart
<!-- ========== HTML ========== -->
<div id="chart7" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart7
var chart7 = AmCharts.makeChart("chart7", {
"theme": "light",
"type": "serial",
"fontFamily": "Poppins",
"dataProvider": [{
"country": "USA",
"year2004": 3.5,
"year2005": 4.2
}, {
"country": "UK",
"year2004": 1.7,
"year2005": 3.1
}, {
"country": "Canada",
"year2004": 2.8,
"year2005": 2.9
}, {
"country": "Japan",
"year2004": 2.6,
"year2005": 2.3
}, {
"country": "France",
"year2004": 1.4,
"year2005": 2.1
}, {
"country": "Brazil",
"year2004": 2.6,
"year2005": 4.9
}],
"valueAxes": [{
"unit": "%",
"position": "left",
"title": "GDP growth rate",
}],
"startDuration": 1,
"graphs": [{
"balloonText": "GDP grow in [[category]] (2004): [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2004",
"type": "column",
"valueField": "year2004"
}, {
"balloonText": "GDP grow in [[category]] (2005): [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"clustered":false,
"columnWidth":0.5,
"valueField": "year2005"
}],
"plotAreaFillAlphas": 0.1,
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
});
</script>
Stacked bar chart with negative values
<!-- ========== HTML ========== -->
<div id="chart8" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart8
var chart8 = AmCharts.makeChart("chart8", {
"type": "serial",
"theme": "light",
"fontFamily": "Poppins",
"rotate": true,
"marginBottom": 50,
"dataProvider": [{
"age": "85+",
"male": -0.1,
"female": 0.3
}, {
"age": "80-54",
"male": -0.2,
"female": 0.3
}, {
"age": "75-79",
"male": -0.3,
"female": 0.6
}, {
"age": "70-74",
"male": -0.5,
"female": 0.8
}, {
"age": "65-69",
"male": -0.8,
"female": 1.0
}, {
"age": "60-64",
"male": -1.1,
"female": 1.3
}, {
"age": "55-59",
"male": -1.7,
"female": 1.9
}, {
"age": "50-54",
"male": -2.2,
"female": 2.5
}, {
"age": "45-49",
"male": -2.8,
"female": 3.0
}, {
"age": "40-44",
"male": -3.4,
"female": 3.6
}, {
"age": "35-39",
"male": -4.2,
"female": 4.1
}, {
"age": "30-34",
"male": -5.2,
"female": 4.8
}, {
"age": "25-29",
"male": -5.6,
"female": 5.1
}, {
"age": "20-24",
"male": -5.1,
"female": 5.1
}, {
"age": "15-19",
"male": -3.8,
"female": 3.8
}, {
"age": "10-14",
"male": -3.2,
"female": 3.4
}, {
"age": "5-9",
"male": -4.4,
"female": 4.1
}, {
"age": "0-4",
"male": -5.0,
"female": 4.8
}],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "male",
"title": "Male",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}, {
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "female",
"title": "Female",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}],
"categoryField": "age",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0.2,
"axisAlpha": 0
},
"valueAxes": [{
"gridAlpha": 0,
"ignoreAxisWidth": true,
"labelFunction": function(value) {
return Math.abs(value) + '%';
},
"guides": [{
"value": 0,
"lineAlpha": 0.2
}]
}],
"balloon": {
"fixedPosition": true
},
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0.05,
"fullWidth": true
},
"allLabels": [{
"text": "Male",
"x": "28%",
"y": "97%",
"bold": true,
"align": "middle"
}, {
"text": "Female",
"x": "75%",
"y": "97%",
"bold": true,
"align": "middle"
}],
"export": {
"enabled": true
}
});
});
</script>