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>