#6326

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var lineChartData = [
    
    {
        "date": "2009-12-05",
        "value": 17,
        "accumlatedTakers":20,
        "percent":100
    }
];

AmCharts.ready(function () {
    var maxmPercent=96;
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = lineChartData;
    chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
    chart.categoryField = "date";
    chart.dataDateFormat = "YYYY-MM-DD";
    
    
    // AXES
    // category                
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.inside = true;
    categoryAxis.gridAlpha = 0;
    categoryAxis.tickLength = 0;
    categoryAxis.axisAlpha = 0;
    
    	// GUIDE for reminder
     var reminderguide = new AmCharts.Guide();
    for ( var i = 0; i < chart.dataProvider.length; i++ ) {
        var point = chart.dataProvider[i];         
        reminderguide.lineColor = "#000000";
        reminderguide.dashLength = 2;
        reminderguide.label = "Reminder-Non-Takers";		
        reminderguide.labelRotation=90
        reminderguide.inside = true;
        reminderguide.lineAlpha = 1;	
        reminderguide.date = new Date(point.date);       
        categoryAxis.addGuide(reminderguide);   
		
    }
    
    // value
    var valueAxis = new AmCharts.ValueAxis();
    chart.addValueAxis(valueAxis);
    
    // value
    var valueAxis2 = new AmCharts.ValueAxis();   
	valueAxis2.position="right"
	valueAxis2.axisColor = "#003F87";		
	valueAxis2.axisThickness = 2;
	valueAxis2.unit="%";
	valueAxis2.precision=2    
	valueAxis2.autoGridCount = false;
	valueAxis2.includeGuidesInMinMax = true;    
	valueAxis2.gridCount = 10;	
    valueAxis2.labelFunction = function (value, valueText, valueAxis) {
        if ( value <= 100 )
            return valueText;
        else
            return '';
    };
   ...