railsgoat/app/views/dashboard/home.html.erb

<div class="dashboard-wrapper">
  <div class="main-container">
    <div class="row-fluid">
        <div class="span12"> <!--begin span12 -->
			<div class="widget">
			    <div class="widget-header">
			      <div class="title">
			        <span class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></span> Current Statistics
			      </div>
				  <!-- Begin Title Buttons-->
				  <div class="tools pull-right">
				  	<div class="btn-group">
				  		<a id="change_to_bar_graph" class="btn btn-small">
			                  <span data-icon="&#xe14b;"></span>
			            </a>
						<a id="change_to_pie_charts" class="btn btn-small">
				              <span data-icon="&#xe096;"></span>
				        </a>
				  	</div>	
				  </div>
				  <!-- End Title Buttons-->
			    </div>
			    <div id="charts_body" class="widget-body">
				      <%= render :partial => "layouts/dashboard/dashboard_stats"%>
			    </div>
				<div class="clearfix">
		        </div>
			  </div>
			</div>	

        </div> <!-- end span12 -->
    </div>
  </div>
</div>

<script type="text/javascript">

function makeActive(){
  $('li[id="home"]').addClass('active');
};

function pieChartHome() {
  $(function () {
    //create instance
    $('.chart1').easyPieChart({
      animate: 2000,
      barColor: '#e26666',
      trackColor: '#dddddd',
      scaleColor: '#e26666',
      size: 160,
      lineWidth: 7,
    });
    //update instance after 5 sec
    setTimeout(function () {
      $('.chart1').data('easyPieChart').update(50);
    }, 5000);
    setTimeout(function () {
      $('.chart1').data('easyPieChart').update(70);
    }, 10000);
    setTimeout(function () {
      $('.chart1').data('easyPieChart').update(30);
    }, 15000);
    setTimeout(function () {
      $('.chart1').data('easyPieChart').update(90);
    }, 19000);
    setTimeout(function () {
      $('.chart1').data('easyPieChart').update(40);
    }, 32000);
  });

  $(function () {
    //create instance
    $('.chart2').easyPieChart({
      animate: 2000,
      barColor: '#b5799e',
      trackColor: '#dddddd',
      scaleColor: '#b5799e',
      size: 160,
      lineWidth: 7,
    });
    //update instance after 5 sec
    setTimeout(function () {
      $('.chart2').data('easyPieChart').update(90);
    }, 10000);
    setTimeout(function () {
      $('.chart2').data('easyPieChart').update(40);
    }, 18000);
    setTimeout(function () {
      $('.chart2').data('easyPieChart').update(70);
    }, 28000);
    setTimeout(function () {
      $('.chart2').data('easyPieChart').update(50);
    }, 32000);
    setTimeout(function () {
      $('.chart2').data('easyPieChart').update(80);
    }, 40000);
  });

  $(function () {
    //create instance
    $('.chart3').easyPieChart({
      animate: 2000,
      barColor: '#579da9',
      trackColor: '#dddddd',
      scaleColor: '#579da9',
      size: 160,
      lineWidth: 7,
    });
    //update instance after 5 sec
    setTimeout(function () {
      $('.chart3').data('easyPieChart').update(20);
    }, 9000);
    setTimeout(function () {
      $('.chart3').data('easyPieChart').update(59);
    }, 20000);
    setTimeout(function () {
      $('.chart3').data('easyPieChart').update(38);
    }, 35000);
    setTimeout(function () {
      $('.chart3').data('easyPieChart').update(79);
    }, 49000);
    setTimeout(function () {
      $('.chart3').data('easyPieChart').update(96);
    }, 52000);
  });

  $(function () {
    //create instance
    $('.chart4').easyPieChart({
      animate: 2000,
      barColor: '#dba26b',
      trackColor: '#dddddd',
      scaleColor: '#dba26b',
      size: 160,
      lineWidth: 7,
    });
    //update instance after 5 sec
    setTimeout(function () {
      $('.chart4').data('easyPieChart').update(40);
    }, 6000);
    setTimeout(function () {
      $('.chart4').data('easyPieChart').update(67);
    }, 14000);
    setTimeout(function () {
      $('.chart4').data('easyPieChart').update(43);
    }, 23000);
    setTimeout(function () {
      $('.chart4').data('easyPieChart').update(80);
    }, 36000);
    setTimeout(function () {
      $('.chart4').data('easyPieChart').update(66);
    }, 41000);
  });

  $(function () {
    //create instance
    $('.chart5').easyPieChart({
      animate: 3000,
      barColor: '#1e825e',
      trackColor: '#dddddd',
      scaleColor: '#1e825e',
      size: 160,
      lineWidth: 7,
    });
    //update instance after 5 sec
    setTimeout(function () {
      $('.chart5').data('easyPieChart').update(30);
    }, 9000);
    setTimeout(function () {
      $('.chart5').data('easyPieChart').update(87);
    }, 19000);
    setTimeout(function () {
      $('.chart5').data('easyPieChart').update(28);
    }, 27000);
    setTimeout(function () {
      $('.chart5').data('easyPieChart').update(69);
    }, 39000);
    setTimeout(function () {
      $('.chart5').data('easyPieChart').update(99);
    }, 47000);
  });

}

$("#change_to_bar_graph").click(function(event) {
	event.preventDefault();
	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
	
})

$("#change_to_pie_charts").click(function(event) {
	event.preventDefault();
	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
})

$(document).ready(
  makeActive,
  pieChartHome()
);
</script>