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 control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="avg" data-seriename="逐月含沙量平均值">
        	逐月含沙量平均值
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="max" data-seriename="逐月含沙量最大值">
        	逐月含沙量最大值
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="sc" data-subdataset="min" data-seriename="逐月含沙量最小值">
        	逐月含沙量最小值
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="20cm" data-seriename="土壤水分20CM">
        	土壤水分20CM
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="30cm" data-seriename="土壤水分30CM">
        	土壤水分30CM
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="40cm" data-seriename="土壤水分40CM">
        	土壤水分40CM
        </a>
        <a class="btn btn-default control-btn" href="javascript:void(0);" data-dataset="SoilMoisture" data-subdataset="50cm" data-seriename="土壤水分50CM">
        	土壤水分50CM
        </a>
    </div>
    
    <!-- 页面内容 -->
    <div class="span9">
        <div id="datachart" style="width:100%;height:500px;"></div>
        <div id="loading" style="display:none">Loading...</div>
    </div>
    <!-- //页面内容 -->
</div>
<script>
_this = {};
$(function() {
	
	$('#datachart').highcharts('StockChart', {
		
		  rangeSelector : {
			  selected : 1,
			  inputEnabled: $('#container').width() > 480
		  },
		  
		  credits : {
			  enabled : false
		  }
		  
	});
	
	var chart = $('#datachart').highcharts();

	$(".control-btn").click(function(){
		
		dataset = $(this).data('dataset');
		subdataset = $(this).data('subdataset');
		seriename = $(this).data('seriename');
		
		for(i in chart.series)
		{
			if(chart.series[i].name == seriename)
			{
				chart.series[i].remove();
				return;
			}
		}
		
		$.ajax({
			'url': '/visual/data',
			'data': 'dataset=' + dataset + '&subdataset=' + subdataset,
			'method': 'GET',
			'dataType': 'json',
			'success': function(data){
				chart.addSeries({
					name: seriename,
					data: data,
					type : 'column'
				});
			},
			'timeout': 30000,
			'global' : true
		});
	
	});

});

function onDataReceived(data)
{
	chart.addSeries({
		name: 'Sediment Concentration',
		data: data,
		type : 'column'
	});
	alert(chart.series[0].name)
}

$( document ).ajaxSend(function() {
	$('#loading').css('display','none');
});
$( document ).ajaxSend(function() {
	$('#loading').css('display','block');
});
$( document ).ajaxSend(function() {
	$('#loading').css('display','none');
});
</script>