<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>amCharts examples</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="../amcharts/amcharts.js" type="text/javascript"></script> <script src="../amcharts/serial.js" type="text/javascript"></script> <script type="text/javascript"> var chart; var chartData = [ { "category": "Evaluation", "excelent": 20, "good": 20, "average": 20, "poor": 20, "bad": 20, "limit": 78, "full": 100, "bullet": 65 } ]; AmCharts.ready(function () { // FIRST BULLET CHART // bullet chart is a simple serial chart chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "category"; chart.rotate = true; // if you want vertical bullet chart, set rotate to false chart.columnWidth = 1; chart.startDuration = 1; // AXES // category var categoryAxis = chart.categoryAxis; categoryAxis.gridAlpha = 0; // value var valueAxis = new AmCharts.ValueAxis(); valueAxis.maximum = 100; valueAxis.axisAlpha = 1; valueAxis.gridAlpha = 0; valueAxis.stackType = "regular"; // we use stacked graphs to make color fills chart.addValueAxis(valueAxis); // this graph displays the short dash, which usually indicates maximum value reached. var graph = new AmCharts.AmGraph(); graph.valueField = "limit"; graph.lineColor = "#000000"; // it's a step line with no risers graph.type = "step"; graph.noStepRisers = true; graph.lineAlpha = 1; graph.lineThickness = 3; graph.columnWidth = 0.5; // change this if you want wider dash graph.stackable = false; // this graph shouldn't be stacked chart.addGraph(graph); // The following graphs produce color bands graph = new AmCharts.AmGraph(); graph.valueField = "excelent"; graph.lineColor = "#19d228"; graph.showBalloon = false; graph.type = "column"; graph.fillAlphas = 0.8; chart.addGraph(graph); graph = new AmCharts.AmGraph(); graph.valueField = "good"; graph.lineColor = "#b4dd1e"; graph.showBalloon = false; graph.type = "column"; graph.fillAlphas = 0.8; chart.addGraph(graph); graph = new AmCharts.AmGraph(); graph.valueField = "average"; graph.lineColor = "#f4fb16"; graph.showBalloon = false; graph.type = "column"; graph.fillAlphas = 0.8; chart.addGraph(graph); graph = new AmCharts.AmGraph(); graph.valueField = "poor"; graph.lineColor = "#f6d32b"; graph.showBalloon = false; graph.type = "column"; graph.fillAlphas = 0.8; chart.addGraph(graph); graph = new AmCharts.AmGraph(); graph.valueField = "bad"; graph.lineColor = "#fb7116"; graph.showBalloon = false; graph.type = "column"; graph.fillAlphas = 0.8; chart.addGraph(graph); // this is the "bullet" graph - black bar showing current value graph = new AmCharts.AmGraph(); graph.valueField = "bullet"; graph.lineColor = "#000000"; graph.type = "column"; graph.lineAlpha = 1; graph.fillAlphas = 1; graph.columnWidth = 0.3; // this makes it narrower than color graphs graph.stackable = false; // bullet graph should not stack graph.clustered = false; // this makes the trick - one column above another chart.addGraph(graph); // WRITE chart.write("chartdiv"); // SECOND BULLET CHART // bullet chart is a simple serial chart chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "category"; chart.rotate = false; // if you want horizontal bullet chart, set rotate to true chart.columnWidth = 1; chart.startDuration = 1; // AXES // category categoryAxis = chart.categoryAxis; categoryAxis.gridAlpha = 0; // value valueAxis = new AmCharts.ValueAxis(); valueAxis.maximum = 100; valueAxis.minimum = 0; valueAxis.axisAlpha = 1; valueAxis.gridAlpha = 0; chart.addValueAxis(valueAxis); // this graph displays the short dash, which usually indicates maximum value reached. graph = new AmCharts.AmGraph(); graph.valueField = "limit"; graph.lineColor = "#000000"; graph.type = "step"; graph.noStepRisers = true; graph.lineAlpha = 1; graph.lineThickness = 3; graph.columnWidth = 0.5; graph.stackable = false; chart.addGraph(graph); // this is the color range graph. // we use only one graph here (not like in the first example, and set gradient fill) graph = new AmCharts.AmGraph(); graph.valueField = "full"; graph.showBalloon = false; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 0.8; graph.fillColors = ["#19d228", "#f6d32b", "#fb2316"]; graph.gradientOrientation = "vertical"; chart.addGraph(graph); // this is the "bullet" graph - black bar showing current value graph = new AmCharts.AmGraph(); graph.valueField = "bullet"; graph.lineColor = "#000000"; graph.type = "column"; graph.lineAlpha = 1; graph.fillAlphas = 1; graph.columnWidth = 0.3; // this makes it narrower than color graph graph.clustered = false; // this makes the trick - one column above another chart.addGraph(graph); // WRITE chart.write("chartdiv2"); }); </script> </head> <body> <div id="chartdiv" style="width: 600px; height: 100px;"></div> <div id="chartdiv2" style="width: 120px; height: 600px;"></div> </body> </html>