John Doe
PHP DeveloperCharts - Line & Area
One stop solution for perfect admin dashboard!
amCharts!Programming libraries and tools for all your data visualization needs. For official documentation, click here .
Simple Line + Bar
<!-- ========== HTML ========== --><div id="chart2" class="op-chart"></div><!-- ========== JS ========== --><script> $(function($) { // chart2 var chart2 = AmCharts.makeChart( "chart2", { "type": "serial", "theme": "light", "fontFamily": "Poppins", "legend": { "equalWidths": false, "useGraphSettings": true, "valueAlign": "left", "valueWidth": 120 }, "dataProvider": [{ "date": "2012-01-01", "distance": 227, "townName": "New York", "townName2": "New York", "townSize": 25, "latitude": 40.71, "duration": 408 }, { "date": "2012-01-02", "distance": 371, "townName": "Washington", "townSize": 14, "latitude": 38.89, "duration": 482 }, { "date": "2012-01-03", "distance": 433, "townName": "Wilmington", "townSize": 6, "latitude": 34.22, "duration": 562 }, { "date": "2012-01-04", "distance": 345, "townName": "Jacksonville", "townSize": 7, "latitude": 30.35, "duration": 379 }, { "date": "2012-01-05", "distance": 480, "townName": "Miami", "townName2": "Miami", "townSize": 10, "latitude": 25.83, "duration": 501 }, { "date": "2012-01-06", "distance": 386, "townName": "Tallahassee", "townSize": 7, "latitude": 30.46, "duration": 443 }, { "date": "2012-01-07", "distance": 348, "townName": "New Orleans", "townSize": 10, "latitude": 29.94, "duration": 405 }, { "date": "2012-01-08", "distance": 238, "townName": "Houston", "townName2": "Houston", "townSize": 16, "latitude": 29.76, "duration": 309 }, { "date": "2012-01-09", "distance": 218, "townName": "Dalas", "townSize": 17, "latitude": 32.8, "duration": 287 }, { "date": "2012-01-10", "distance": 349, "townName": "Oklahoma City", "townSize": 11, "latitude": 35.49, "duration": 485 }, { "date": "2012-01-11", "distance": 603, "townName": "Kansas City", "townSize": 10, "latitude": 39.1, "duration": 890 }, { "date": "2012-01-12", "distance": 534, "townName": "Denver", "townName2": "Denver", "townSize": 18, "latitude": 39.74, "duration": 810 }, { "date": "2012-01-13", "townName": "Salt Lake City", "townSize": 12, "distance": 425, "duration": 670, "latitude": 40.75, "dashLength": 8, "alpha": 0.4 }, { "date": "2012-01-14", "latitude": 36.1, "duration": 470, "townName": "Las Vegas", "townName2": "Las Vegas" }, { "date": "2012-01-15" }, { "date": "2012-01-16" }, { "date": "2012-01-17" }, { "date": "2012-01-18" }, { "date": "2012-01-19" }], "valueAxes": [{ "id": "distanceAxis", "axisAlpha": 0, "gridAlpha": 0, "position": "left", "title": "distance" }, { "id": "latitudeAxis", "axisAlpha": 0, "gridAlpha": 0, "labelsEnabled": false, "position": "right" }, { "id": "durationAxis", "duration": "mm", "durationUnits": { "hh": "h ", "mm": "min" }, "axisAlpha": 0, "gridAlpha": 0, "inside": true, "position": "right", "title": "duration" }], "graphs": [{ "alphaField": "alpha", "balloonText": "[[value]] miles", "dashLengthField": "dashLength", "fillAlphas": 0.7, "legendPeriodValueText": "total: [[value.sum]] mi", "legendValueText": "[[value]] mi", "title": "distance", "type": "column", "valueField": "distance", "valueAxis": "distanceAxis" }, { "balloonText": "latitude:[[value]]", "bullet": "round", "bulletBorderAlpha": 1, "useLineColorForBulletBorder": true, "bulletColor": "#FFFFFF", "bulletSizeField": "townSize", "dashLengthField": "dashLength", "descriptionField": "townName", "labelPosition": "right", "labelText": "[[townName2]]", "legendValueText": "[[value]]/[[description]]", "title": "latitude/city", "fillAlphas": 0, "valueField": "latitude", "valueAxis": "latitudeAxis" }, { "bullet": "square", "bulletBorderAlpha": 1, "bulletBorderThickness": 1, "dashLengthField": "dashLength", "legendValueText": "[[value]]", "title": "duration", "fillAlphas": 0, "valueField": "duration", "valueAxis": "durationAxis" }], "chartCursor": { "categoryBalloonDateFormat": "DD", "cursorAlpha": 0.1, "cursorColor":"#000000", "fullWidth":true, "valueBalloonsEnabled": false, "zoomable": false }, "dataDateFormat": "YYYY-MM-DD", "categoryField": "date", "categoryAxis": { "dateFormats": [{ "period": "DD", "format": "DD" }, { "period": "WW", "format": "MMM DD" }, { "period": "MM", "format": "MMM" }, { "period": "YYYY", "format": "YYYY" }], "parseDates": true, "autoGridCount": false, "axisColor": "#555555", "gridAlpha": 0.1, "gridColor": "#FFFFFF", "gridCount": 50 }, "export": { "enabled": true } } ); });</script> Zoomable Value Axis
<!-- ========== HTML ========== --><div id="chart1" class="op-chart"></div><!-- ========== JS ========== --><script> $(function($) { // chart1 var chart = AmCharts.makeChart("chart1", { "type": "serial", "theme": "light", "fontFamily": "Poppins", "marginRight": 40, "marginLeft": 40, "autoMarginOffset": 20, "dataDateFormat": "YYYY-MM-DD", "valueAxes": [ { "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true } ], "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "graphs": [ { "id": "g1", "balloon": { "drop": true, "adjustBorderColor": false, "color": "#ffffff", "type": "smoothedLine" }, "fillAlphas": 0.2, "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "title": "red line", "useLineColorForBulletBorder": true, "valueField": "value", "balloonText": "[[value]]" } ], "chartCursor": { "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "zoomable": false, "valueZoomable": true, "valueLineAlpha": 0.5 }, "valueScrollbar": { "autoGridCount": true, "color": "#000000", "scrollbarHeight": 50 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "export": { "enabled": true }, "dataProvider": [ { "date": "2012-07-27", "value": 13 }, { "date": "2012-07-28", "value": 11 }, { "date": "2012-07-29", "value": 15 }, { "date": "2012-07-30", "value": 16 }, { "date": "2012-07-31", "value": 18 }, { "date": "2012-08-01", "value": 13 }, { "date": "2012-08-02", "value": 22 }, { "date": "2012-08-03", "value": 23 }, { "date": "2012-08-04", "value": 20 }, { "date": "2012-08-05", "value": 17 }, { "date": "2012-08-06", "value": 16 }, { "date": "2012-08-07", "value": 18 }, { "date": "2012-08-08", "value": 21 }, { "date": "2012-08-09", "value": 26 }, { "date": "2012-08-10", "value": 24 }, { "date": "2012-08-11", "value": 29 }, { "date": "2012-08-12", "value": 32 }, { "date": "2012-08-13", "value": 18 }, { "date": "2012-08-14", "value": 24 }, { "date": "2012-08-15", "value": 22 }, { "date": "2012-08-16", "value": 18 }, { "date": "2012-08-17", "value": 19 }, { "date": "2012-08-18", "value": 14 }, { "date": "2012-08-19", "value": 15 }, { "date": "2012-08-20", "value": 12 }, { "date": "2012-08-21", "value": 8 }, { "date": "2012-08-22", "value": 9 }, { "date": "2012-08-23", "value": 8 }, { "date": "2012-08-24", "value": 7 }, { "date": "2012-08-25", "value": 5 }, { "date": "2012-08-26", "value": 11 }, { "date": "2012-08-27", "value": 13 }, { "date": "2012-08-28", "value": 18 }, { "date": "2012-08-29", "value": 20 }, { "date": "2012-08-30", "value": 29 }, { "date": "2012-08-31", "value": 33 }, { "date": "2012-09-01", "value": 42 }, { "date": "2012-09-02", "value": 35 }, { "date": "2012-09-03", "value": 31 }, { "date": "2012-09-04", "value": 47 }, { "date": "2012-09-05", "value": 52 }, { "date": "2012-09-06", "value": 46 }, { "date": "2012-09-07", "value": 41 }, { "date": "2012-09-08", "value": 43 }, { "date": "2012-09-09", "value": 40 }, { "date": "2012-09-10", "value": 39 }, { "date": "2012-09-11", "value": 34 }, { "date": "2012-09-12", "value": 29 }, { "date": "2012-09-13", "value": 34 }, { "date": "2012-09-14", "value": 37 }, { "date": "2012-09-15", "value": 42 }, { "date": "2012-09-16", "value": 49 }, { "date": "2012-09-17", "value": 46 }, { "date": "2012-09-18", "value": 47 }, { "date": "2012-09-19", "value": 55 }, { "date": "2012-09-20", "value": 59 }, { "date": "2012-09-21", "value": 58 }, { "date": "2012-09-22", "value": 57 }, { "date": "2012-09-23", "value": 61 }, { "date": "2012-09-24", "value": 59 }, { "date": "2012-09-25", "value": 67 }, { "date": "2012-09-26", "value": 65 }, { "date": "2012-09-27", "value": 61 }, { "date": "2012-09-28", "value": 66 }, { "date": "2012-09-29", "value": 69 }, { "date": "2012-09-30", "value": 71 }, { "date": "2012-10-01", "value": 67 }, { "date": "2012-10-02", "value": 63 }, { "date": "2012-10-03", "value": 46 }, { "date": "2012-10-04", "value": 32 }, { "date": "2012-10-05", "value": 21 }, { "date": "2012-10-06", "value": 18 }, { "date": "2012-10-07", "value": 21 }, { "date": "2012-10-08", "value": 28 }, { "date": "2012-10-09", "value": 27 }, { "date": "2012-10-10", "value": 36 }, { "date": "2012-10-11", "value": 33 }, { "date": "2012-10-12", "value": 31 }, { "date": "2012-10-13", "value": 30 }, { "date": "2012-10-14", "value": 34 }, { "date": "2012-10-15", "value": 38 }, { "date": "2012-10-16", "value": 37 }, { "date": "2012-10-17", "value": 44 }, { "date": "2012-10-18", "value": 49 }, { "date": "2012-10-19", "value": 53 }, { "date": "2012-10-20", "value": 57 }, { "date": "2012-10-21", "value": 60 }, { "date": "2012-10-22", "value": 61 }, { "date": "2012-10-23", "value": 69 }, { "date": "2012-10-24", "value": 67 }, { "date": "2012-10-25", "value": 72 }, { "date": "2012-10-26", "value": 77 }, { "date": "2012-10-27", "value": 75 }, { "date": "2012-10-28", "value": 70 }, { "date": "2012-10-29", "value": 72 }, { "date": "2012-10-30", "value": 70 }, { "date": "2012-10-31", "value": 72 }, { "date": "2012-11-01", "value": 73 }, { "date": "2012-11-02", "value": 67 }, { "date": "2012-11-03", "value": 68 }, { "date": "2012-11-04", "value": 65 }, { "date": "2012-11-05", "value": 71 }, { "date": "2012-11-06", "value": 75 }, { "date": "2012-11-07", "value": 74 }, { "date": "2012-11-08", "value": 71 }, { "date": "2012-11-09", "value": 76 }, { "date": "2012-11-10", "value": 77 }, { "date": "2012-11-11", "value": 81 }, { "date": "2012-11-12", "value": 83 }, { "date": "2012-11-13", "value": 80 }, { "date": "2012-11-14", "value": 81 }, { "date": "2012-11-15", "value": 87 }, { "date": "2012-11-16", "value": 82 }, { "date": "2012-11-17", "value": 86 }, { "date": "2012-11-18", "value": 80 }, { "date": "2012-11-19", "value": 87 }, { "date": "2012-11-20", "value": 83 }, { "date": "2012-11-21", "value": 85 }, { "date": "2012-11-22", "value": 84 }, { "date": "2012-11-23", "value": 82 }, { "date": "2012-11-24", "value": 73 }, { "date": "2012-11-25", "value": 71 }, { "date": "2012-11-26", "value": 75 }, { "date": "2012-11-27", "value": 79 }, { "date": "2012-11-28", "value": 70 }, { "date": "2012-11-29", "value": 73 }, { "date": "2012-11-30", "value": 61 }, { "date": "2012-12-01", "value": 62 }, { "date": "2012-12-02", "value": 66 }, { "date": "2012-12-03", "value": 65 }, { "date": "2012-12-04", "value": 73 }, { "date": "2012-12-05", "value": 79 }, { "date": "2012-12-06", "value": 78 }, { "date": "2012-12-07", "value": 78 }, { "date": "2012-12-08", "value": 78 }, { "date": "2012-12-09", "value": 74 }, { "date": "2012-12-10", "value": 73 }, { "date": "2012-12-11", "value": 75 }, { "date": "2012-12-12", "value": 70 }, { "date": "2012-12-13", "value": 77 }, { "date": "2012-12-14", "value": 67 }, { "date": "2012-12-15", "value": 62 }, { "date": "2012-12-16", "value": 64 }, { "date": "2012-12-17", "value": 61 }, { "date": "2012-12-18", "value": 59 }, { "date": "2012-12-19", "value": 53 }, { "date": "2012-12-20", "value": 54 }, { "date": "2012-12-21", "value": 56 }, { "date": "2012-12-22", "value": 59 }, { "date": "2012-12-23", "value": 58 }, { "date": "2012-12-24", "value": 55 }, { "date": "2012-12-25", "value": 52 }, { "date": "2012-12-26", "value": 54 }, { "date": "2012-12-27", "value": 50 }, { "date": "2012-12-28", "value": 50 }, { "date": "2012-12-29", "value": 51 }, { "date": "2012-12-30", "value": 52 }, { "date": "2012-12-31", "value": 58 }, { "date": "2013-01-01", "value": 60 }, { "date": "2013-01-02", "value": 67 }, { "date": "2013-01-03", "value": 64 }, { "date": "2013-01-04", "value": 66 }, { "date": "2013-01-05", "value": 60 }, { "date": "2013-01-06", "value": 63 }, { "date": "2013-01-07", "value": 61 }, { "date": "2013-01-08", "value": 60 }, { "date": "2013-01-09", "value": 65 }, { "date": "2013-01-10", "value": 75 }, { "date": "2013-01-11", "value": 77 }, { "date": "2013-01-12", "value": 78 }, { "date": "2013-01-13", "value": 70 }, { "date": "2013-01-14", "value": 70 }, { "date": "2013-01-15", "value": 73 }, { "date": "2013-01-16", "value": 71 }, { "date": "2013-01-17", "value": 74 }, { "date": "2013-01-18", "value": 78 }, { "date": "2013-01-19", "value": 85 }, { "date": "2013-01-20", "value": 82 }, { "date": "2013-01-21", "value": 83 }, { "date": "2013-01-22", "value": 88 }, { "date": "2013-01-23", "value": 85 }, { "date": "2013-01-24", "value": 85 }, { "date": "2013-01-25", "value": 80 }, { "date": "2013-01-26", "value": 87 }, { "date": "2013-01-27", "value": 84 }, { "date": "2013-01-28", "value": 83 }, { "date": "2013-01-29", "value": 84 }, { "date": "2013-01-30", "value": 81 } ] }); });</script> Smoothed Line Chart
<!-- ========== HTML ========== --><div id="chart3" class="op-chart"></div><!-- ========== JS ========== --><script> $(function($) { // chart3 var chart3 = AmCharts.makeChart("chart3", { "type": "serial", "theme": "light", "fontFamily": "Poppins", "marginTop":0, "marginRight": 80, "dataProvider": [{ "year": "1950", "value": -0.307 }, { "year": "1951", "value": -0.168 }, { "year": "1952", "value": -0.073 }, { "year": "1953", "value": -0.027 }, { "year": "1954", "value": -0.251 }, { "year": "1955", "value": -0.281 }, { "year": "1956", "value": -0.348 }, { "year": "1957", "value": -0.074 }, { "year": "1958", "value": -0.011 }, { "year": "1959", "value": -0.074 }, { "year": "1960", "value": -0.124 }, { "year": "1961", "value": -0.024 }, { "year": "1962", "value": -0.022 }, { "year": "1963", "value": 0 }, { "year": "1964", "value": -0.296 }, { "year": "1965", "value": -0.217 }, { "year": "1966", "value": -0.147 }, { "year": "1967", "value": -0.15 }, { "year": "1968", "value": -0.16 }, { "year": "1969", "value": -0.011 }, { "year": "1970", "value": -0.068 }, { "year": "1971", "value": -0.19 }, { "year": "1972", "value": -0.056 }, { "year": "1973", "value": 0.077 }, { "year": "1974", "value": -0.213 }, { "year": "1975", "value": -0.17 }, { "year": "1976", "value": -0.254 }, { "year": "1977", "value": 0.019 }, { "year": "1978", "value": -0.063 }, { "year": "1979", "value": 0.05 }, { "year": "1980", "value": 0.077 }, { "year": "1981", "value": 0.12 }, { "year": "1982", "value": 0.011 }, { "year": "1983", "value": 0.177 }, { "year": "1984", "value": -0.021 }, { "year": "1985", "value": -0.037 }, { "year": "1986", "value": 0.03 }, { "year": "1987", "value": 0.179 }, { "year": "1988", "value": 0.18 }, { "year": "1989", "value": 0.104 }, { "year": "1990", "value": 0.255 }, { "year": "1991", "value": 0.21 }, { "year": "1992", "value": 0.065 }, { "year": "1993", "value": 0.11 }, { "year": "1994", "value": 0.172 }, { "year": "1995", "value": 0.269 }, { "year": "1996", "value": 0.141 }, { "year": "1997", "value": 0.353 }, { "year": "1998", "value": 0.548 }, { "year": "1999", "value": 0.298 }, { "year": "2000", "value": 0.267 }, { "year": "2001", "value": 0.411 }, { "year": "2002", "value": 0.462 }, { "year": "2003", "value": 0.47 }, { "year": "2004", "value": 0.445 }, { "year": "2005", "value": 0.47 }], "valueAxes": [{ "axisAlpha": 0, "position": "left" }], "graphs": [{ "id":"g1", "balloonText": "[[category]]
[[value]]", "bullet": "round", "bulletSize": 8, "lineColor": "#d1655d", "lineThickness": 2, "negativeLineColor": "#637bb6", "type": "smoothedLine", "valueField": "value" }], "chartScrollbar": { "graph":"g1", "gridAlpha":0, "color":"#888888", "scrollbarHeight":55, "backgroundAlpha":0, "selectedBackgroundAlpha":0.1, "selectedBackgroundColor":"#888888", "graphFillAlpha":0, "autoGridCount":true, "selectedGraphFillAlpha":0, "graphLineAlpha":0.2, "graphLineColor":"#c2c2c2", "selectedGraphLineColor":"#888888", "selectedGraphLineAlpha":1 }, "chartCursor": { "categoryBalloonDateFormat": "YYYY", "cursorAlpha": 0, "valueLineEnabled":true, "valueLineBalloonEnabled":true, "valueLineAlpha":0.5, "fullWidth":true }, "dataDateFormat": "YYYY", "categoryField": "year", "categoryAxis": { "minPeriod": "YYYY", "parseDates": true, "minorGridAlpha": 0.1, "minorGridEnabled": true }, "export": { "enabled": true } }); chart3.addListener("rendered", zoomChart); if(chart3.zoomChart){ chart3.zoomChart(); } function zoomChart(){ chart3.zoomToIndexes(Math.round(chart3.dataProvider.length * 0.4), Math.round(chart3.dataProvider.length * 0.55)); } });</script> Area With Time Based Data
<!-- ========== HTML ========== --><div id="chart4" class="op-chart"></div><!-- ========== JS ========== --><script> $(function($) { // chart4 var chartData = generateChartData(); var chart4 = AmCharts.makeChart( "chart4", { "type": "serial", "theme": "light", "fontFamily": "Poppins", "marginRight": 80, "dataProvider": chartData, "valueAxes": [{ "position": "left", "title": "Unique visitors" }], "graphs": [{ "id": "g1", "fillAlphas": 0.4, "valueField": "visits", "balloonText": "<div style='margin:5px; font-size:19px;'>Visits:<b>[[value]]</b></div>" }], "chartScrollbar": { "graph": "g1", "scrollbarHeight": 80, "backgroundAlpha": 0, "selectedBackgroundAlpha": 0.1, "selectedBackgroundColor": "#888888", "graphFillAlpha": 0, "graphLineAlpha": 0.5, "selectedGraphFillAlpha": 0, "selectedGraphLineAlpha": 1, "autoGridCount": true, "color": "#AAAAAA" }, "chartCursor": { "categoryBalloonDateFormat": "JJ:NN, DD MMMM", "cursorPosition": "mouse" }, "categoryField": "date", "categoryAxis": { "minPeriod": "mm", "parseDates": true }, "export": { "enabled": true, "dateFormat": "YYYY-MM-DD HH:NN:SS" } } ); chart4.addListener("dataUpdated", zoomChart); // when we apply theme, the dataUpdated event is fired even before we add listener, so // we need to call zoomChart here zoomChart4(); // this method is called when chart is first inited as we listen for "dataUpdated" event function zoomChart4() { // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues chart4.zoomToIndexes(chartData.length - 250, chartData.length - 100); } // generate some random data, quite different range function generateChartData() { var chartData = []; // current date var firstDate = new Date(); // now set 500 minutes back firstDate.setMinutes(firstDate.getDate() - 1000); // and generate 500 data items for (var i = 0; i < 500; i++) { var newDate = new Date(firstDate); // each time we add one minute newDate.setMinutes(newDate.getMinutes() + i); // some random number var visits = Math.round(Math.random() * 40 + 10 + i + Math.random() * i / 5); // add data item to the array chartData.push({ date: newDate, visits: visits }); } return chartData; } });</script>