#6744

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="click-area" style="width:100%; height:220px;"></div>

CSS

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

JavaScript

AmCharts.ready(setupCharts);

var charts = [{
    element: 'click-area',
    // data: {% render(controller) %},
    data: [{"label":"2013-12-13","value":"3812"},{"label":"2013-12-14","value":"3812"},{"label":"2013-12-15","value":"3412"},{"label":"2013-12-16","value":"3512"},{"label":"2013-12-17","value":"3312"},{"label":"2013-12-18","value":"4012"},{"label":"2013-12-19","value":"4212"},{"label":"2013-12-20","value":"3312"},{"label":"2013-12-21","value":"3412"},{"label":"2013-12-22","value":"4212"},{"label":"2013-12-23","value":"3812"},{"label":"2013-12-24","value":"3712"},{"label":"2013-12-25","value":"4212"},{"label":"2013-12-26","value":"3312"},{"label":"2013-12-27","value":"3212"},{"label":"2013-12-28","value":"3964"},{"label":"2013-12-29","value":"3685"},{"label":"2013-12-30","value":"3933"},{"label":"2013-12-31","value":"3842"},{"label":"2014-01-01","value":"4814"},{"label":"2014-01-02","value":"5223"},{"label":"2014-01-03","value":"4239"},{"label":"2014-01-04","value":"4504"},{"label":"2014-01-05","value":"5728"},{"label":"2014-01-06","value":"5337"},{"label":"2014-01-07","value":"5345"},{"label":"2014-01-08","value":"6234"},{"label":"2014-01-09","value":"5034"},{"label":"2014-01-10","value":"6400"}]
,
    xkey: 'label',
    ykeys: ['value'],
    ytitles: ['Clicks', 'Transactions']
  }];
 
function setupCharts() {
    if (typeof charts !== 'undefined' && charts) {
        for (var i = charts.length - 1; i >= 0; i--) {
 
            AmCharts.theme = AmCharts.themes.tapfiliate;
            var chartData = charts[i];
 
            var chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "/bundles/tapsite/js/amcharts/images/";
            chart.dataProvider = chartData.data;
            chart.marginTop = 10;
            chart.marginLeft = 0;
            chart.categoryField = "label";
 
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0.07;
            categoryAxis.axisColor = "#DADADA";
           ...