Amcharts Dashboard

by Hyacinthe Hamon

HTML

<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<link rel="stylesheet" href="https://www.karmacover.com/app/css/chartstyle.css">
<link rel="stylesheet" href="https://www.karmacover.com/app/style.css">
<script src="https://www.karmacover.com/app/js/columns-chart.js"></script>
<script src="https://www.karmacover.com/app/js/pie.js"></script>
<script src="https://www.karmacover.com/app/js/serial.js"></script>
<script src="https://www.karmacover.com/app/js/amcharts.js"></script>
<link rel="stylesheet" href="https://www.karmacover.com/app/css/bootstrap-min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<body id="top">
	
	<div class="main" role="main">
	<!-- Top featured title banner -->
	<section class="section intro-panel">
		<div class="container">	
			<!--
			<div class="breadcrumbs">
				<a href="">Bills</a> <span>›</span> <a href="">Foxtel (Holiday House)</a> <span>›</span> Edit Details
			</div>-->
			
			<div class="titleRow">
	  			<h1>Dashboard</h1>	
			</div>
		  	<div class="nextTopup">
  	<div class="title">
		Your next top up	
  	</div>
  	<div class="details">
	  	<h3 class="amount">$1,313.21</h3>
	  	<h3 class="date">Mon 13 Sep, 2016</h3>
	  	<a href="">View Schedule</a>
  	</div>
</div>		  	
		  	<div class="maintenance">
			  	<span class="ic warningWhite"></span> 
			    <div class="warning">
				    We will be undergoing <strong>planned maintenance at 1:00am - 5.00 am, 12 Nov 2016</strong>. Your account will not be accessible during this time.
			    </div>
            </div>
            
            
		</div>
	</section>
	<!-- END Top featured title banner -->
	
	<section class="section firstPanel-overlap bleedMobile">
		<div class="container">	
	  		<div class="section-panel dashboard">
		  		
	  			<div class="col-sm-5 dashboardDetails clearfix">
		  			
		  			
		  			<div class="left quickNumbers dashboardPanel">
			  			
			  			<div class="currentBalance visible-xs">
				  			<div...

JavaScript

$(function() {
   
    $.getJSON('https://www.karmacover.com/app/jsonp.php?callback=?', function(data) {
    
    $.each(data,function(){          
                        
            var chartData = data[0];
            var chartDataRight = data[1];           
            var chart,chart1,chart2;
            chart2= new AmCharts.AmSerialChart();
            chart1 = new AmCharts.AmSerialChart();
            var chart2_start =0;
            var chart1_start = 6;
            var current_start=0,current_diff=11;
			
            var position,scroll_width;
            var column_width;
            var col_space;
            
				function drawHeader(startIndex,diff){
           
                var str=chartDataRight[startIndex].year;
                
                var c = document.getElementById("mycanvas");
                var c1 = document.getElementById("mycanvas1");
                
				c.width = document.getElementById("chartdiv").offsetWidth - 30;
                c1.width = document.getElementById("chartdiv").offsetWidth - 30;
                var ctx = c.getContext("2d");
                var ctx1 = c1.getContext("2d");
                var canvas_width = c.width;
                col_space = chart2.columnSpacing;
                column_width = (parseInt(canvas_width) - parseInt(col_space))/12;

                var str_width = ctx.measureText(str).width;
                var font_size = 12;
                var offset = (column_width-col_space-str_width) /2;
                ctx.clearRect(0,0,800,50);
                ctx.font = font_size+"px Times New Roman";
				ctx.fillStyle="#b6b6b6";
				ctx.strokeStyle="#6d6d6d";
                ctx.fillText(str, offset, 25);
                
                for(var i=startIndex; i<startIndex+current_diff; i++)
                {
                    if((chartDataRight[i].year !=str ) && (i-startIndex >= 0))
                    {
                        ctx.beginPath();
                       ...