westdc-zf1/application/default/views/scripts/visual/index.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle()->setSeparator(' - ');
$theme = new Theme;
$theme->appendPlus($this,'highstock');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">数据与服务</a>');
$this->breadcrumb('数据可视化');
$this->breadcrumb()->setSeparator(' > ');
?>
<div class="row">
    <div class="span3">
        <h3>选择数据源</h3>
        <hr />
        <a class="btn btn-default" href="javascript:void(0);" data-source="sc">
        	逐月含沙量
        </a>
    </div>
    
    <!-- 页面内容 -->
    <div class="span9">
        <div id="datachart" style="width:100%;height:500px;"></div>
    </div>
    <!-- //页面内容 -->
</div>
<script>
$(function() {

	$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
		// Create the chart
		$('#datachart').highcharts('StockChart', {
			

			rangeSelector : {
				selected : 1,
				inputEnabled: $('#container').width() > 480
			},

			title : {
				text : 'Sediment Concentration'
			},
			
			series : [{
				name : 'AAPL',
				data : data,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
	});

});

function drawchart(type,range,data,title) {
	// Create the chart
		window.chart = new Highcharts.StockChart({
			'chart' : {
				'renderTo' : 'datachart',
				'type': type
			},
			
			'rangeSelector' :{
				'enabled' : true,
				'selected' : range,
				buttons: [{
						type: 'month',
						count: 1,
						text: '1m'
					}, {
						type: 'month',
						count: 3,
						text: '3m'
					}, {
						type: 'month',
						count: 6,
						text: '6m'
					}, {
						type: 'year',
						count: 1,
						text: '1y'
					}, {
						type: 'all',
						text: 'All'
					}]
			},
			
			'credits':{
				'enabled': false
			},
			
			'exporting': {
				'enabled': false
			},

			'title' : {
				'text' : title
			},
			
			'series' : data
			
		});
}
$(".fetchSeries").click(function () {
		
	var button = $(this);
	
	$('.fetchSeries').removeClass('btn-green');
	button.addClass('btn-green');
	
	var ac = button.val();
	var dt = "";
	
	if(button.hasClass('meteorology'))
	{
		dt = 'meteorology';
	}
	
	if(button.hasClass('hydrology'))
	{
		dt = 'hydrology';
	}
	
	if(button.hasClass('ambient'))
	{
		dt = 'ambient';
	}
	
	$('#datachart').html('');
	
	function onDataReceived(series) {
		if(typeof(series)=='undefined')
		{$('.fetchSeries').removeClass('btn-green');Alert('未请求到数据');return false;}
		if(typeof(series.datas)=='undefined' || series.datas=='')
		{$('.fetchSeries').removeClass('btn-green');Alert('未请求到数据');return false;}
		if(typeof(series.error)!='undefined') 
		{$('.fetchSeries').removeClass('btn-green');Alert(series.error);return false;}
		drawchart(series.type,series.range,series.datas,series.title);
	 }
	
	$.ajax({
		'url': '/visual/data/',
		'data': 'ac='+ac+'&dt='+dt,
		'method': 'GET',
		'dataType': 'json',
		'success': onDataReceived,
		'timeout': 30000
	});

});
$('#loading').ajaxComplete(function() {
  $(this).css('display','none');
  $('#datachart').css('display','block');
});
$('#loading').ajaxSend(function() {
  $(this).css('display','block');
  $('#datachart').css('display','none');
});
$("#loading").ajaxError(function() {
  $(this).css('display','none');
  $('.fetchSeries').removeClass('btn-green');
  Alert('请求超时或服务器开小差了，请刷新页面后重试');
});
function Alert(html){
	$.colorbox({'innerWidth':'50%','html':'<h4>'+html+'</h4>'});
}
</script>