Dashboard Graphic

by myrluk3

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
 

 
<div class="chart-block" style="padding:28px">
<div id="percent1" style="vertical-align: middle; display: inline-block; width: 200px; height: 30px;"></div>
</div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}				

#percent1 a {
  display: none !important;
}

JavaScript

AmCharts.ready(function() {
    // percent chart            
    var chart = new AmCharts.AmSerialChart(AmCharts.themes.none);
    chart.dataProvider = [{
        x: 1,
        y1: 3,
        y2: 1,
        y3: 1
    }];
    chart.categoryField = "x";
    chart.rotate = true;
    chart.autoMargins = false;
    chart.marginLeft = 0;
    chart.marginRight = 0;
    chart.marginTop = 0;
    chart.marginBottom = 10;

    var graph = new AmCharts.AmGraph();
    graph.valueField = "y1";
    graph.type = "column";
    graph.fillAlphas = 1;
    graph.fillColors = "red";
    graph.gradientOrientation = "horizontal";
    graph.lineColor = "#FFFFFF";
    //graph.showBalloon = false;
    //graph.labelPosition = 'bottom';
    graph.labelText = "[[value]]";
    chart.addGraph(graph);

    var graph2 = new AmCharts.AmGraph();
    graph2.valueField = "y2";
    graph2.type = "column";
    graph2.fillAlphas = 1;
    graph2.fillColors = "yellow";
    graph2.lineColor = "#FFFFFF";
    //graph2.showBalloon = false;
    graph2.labelText = "[[value]]";
    chart.addGraph(graph2);

		var graph3 = new AmCharts.AmGraph();
    graph3.valueField = "y3";
    graph3.type = "column";
    graph3.fillAlphas = 1;
    graph3.fillColors = "green";
    graph3.lineColor = "#FFFFFF";
    //graph3.showBalloon = false;
    graph3.labelText = "[[value]]";
    graph3.ballonText = "[[value]]";
    chart.addGraph(graph3);

    
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridAlpha = 0;
    valueAxis.axisAlpha = 0;
    valueAxis.stackType = "100%"; // this is set to achieve that column would occupie 100% of the chart area
    chart.addValueAxis(valueAxis);

    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0;
    categoryAxis.axisAlpha = 0;


    chart.write("percent1");

});