Merge pull request #151 from youyong205/biz

change the graph to highchart

cat-home/src/main/java/com/dianping/cat/report/page/metric/Handler.java

@@ -171,7 +171,7 @@ public class Handler implements PageHandler<Context> {
 			}
 			time = time + TimeUtil.ONE_HOUR;
 		}
-		
+
 		display.generateLineCharts();
 		if (abtestID.equals("-1")) {
 			display.generateBaselineChart();

cat-home/src/main/webapp/css/body.css

@@ -206,13 +206,13 @@ a.abtest-heartbeat {
 
 .graph {
 	width: 450px;
-	height: 200px;
+	height: 300px;
 	margin: 4px auto;
 }
 
 .metricGraph {
 	width: 530px;
-	height: 250px;
+	height: 400px;
 }
 
 .pieChart {

cat-home/src/main/webapp/js/baseGraph.js

-var lineChartParse = function(data){
-		var res = [];
-		data.subTitles.forEach(function(title,i){
-			var series = {}
-			series.name = title;
-			series.data = {};
-			data.values[i].forEach(function(value,j){
-				var time = Date.parse(data.start);
-				var t = new Date(+time + j*data.step);
-				series.data[t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()] = value;
-			});
-			res.push(series);
-	
-		})
-		return res;
-}
-var pieChartOption = {
-        pie:{
-            animation:true, //[true, false, 'simultaneous'],
-            hollow:10,
-            stroke:{
-                'stroke-width':1,
-                'stroke':'#dfdfdf'
-            },
-            radius:100
-
-        },
-        legend:{}
-    };
-
 var pieChartParse = function(data){
-	var res = {};
+	var res = [];
+	var index = 0;
+	
 	data.items.forEach(function(item){
-			res[item.title]= item.number;
+			var temp =[];
+			temp[0] = item.title;
+			temp[1] = item.number;
+			res[index] = temp;
+			index++;
 	})
 	return res;
 }
 
 function graphPieChart(container, data){
-	 new Venus.SvgChart(container, pieChartParse(data), pieChartOption);
-}
-
-var lineChartOptions = {
-    axis:{
-        x:{
-            type:"datetime",
-            percent:0.8
+	$(container).highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false
+        },
+        title: {
+            text: ''
+        },
+        credits : {
+            enabled:false
         },
-        y:{
-        	title:"10分钟"
-        }
-    },
-    line:{
-        smooth:true,
-        dotRadius:4,
-        dotSelect:true,
-        area:false
-    },
-    grid:{
-        enableRow:true,
-        enableColumn:true
-    },
-    legend:{
-    },
-    tooltip:function(obj){
-    	return obj.x+" "+obj.y.toFixed(0);
-    }
-    
- }
-function graphLineChart(container, data) {
-	var _data = lineChartParse(data);
-	console.log(_data);
-	new Venus.SvgChart(container, _data, lineChartOptions);
+        tooltip: {
+    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    color: '#000000',
+                    connectorColor: '#000000',
+                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
+                },
+                showInLegend: true
+            }
+        },
+        series: [{
+            type: 'pie',
+            name: 'Browser share',
+            data: pieChartParse(data)
+        }]
+    });
 }
 
-$(document).delegate(
-		'.graph_link',
-		'click',
-		function(e) {
-			var anchor = this, el = $(anchor), id = Number(el
-					.attr('data-status')) || 0;
-
-			if (e.ctrlKey || e.metaKey) {
-				return true;
-			} else {
-				e.preventDefault();
-			}
-
-			var cell = document.getElementById(id);
-			var text = el.html();
-
-			if (text == '[:: show ::]') {
-				anchor.innerHTML = '[:: hide ::]';
-
-				if (cell.nodeName == 'IMG') { // <img src='...'/>
-					cell.src = anchor.href;
-				} else { // <div>...</div>
-					$.ajax({
-						type : "get",
-						url : anchor.href,
-						success : function(data, textStatus) {
-							hourlyGraphLineChart(cell,data);
-						}
-					});
-				}
-				cell.style.display = 'block';
-				cell.parentNode.style.display = 'block';
-			} else {
-				anchor.innerHTML = '[:: show ::]';
-				cell.style.display = 'none';
-				cell.parentNode.style.display = 'none';
-			}
+function parseLineData(data){
+	var res = [];
+	data.subTitles.forEach(function(title,i){
+		var series = {}
+		series.name = title;
+		series.data = [];
+		var start =new Date( Date.parse(data.start));
+		var startLong = start.getTime();
+		data.values[i].forEach(function(value,j){
+			var time = start.getTime() + j*data.step;
+			var item = [];
+			item[0] = time;
+			item[1] = value;
+			series.data[j] = item;
 		});
+		res.push(series);
+	});
+	return res;
+}
 
-$(document).delegate(
-		'.history_graph_link',
-		'click',
-		function(e) {
-			var anchor = this, el = $(anchor), id = Number(el
-					.attr('data-status')) || 0;
+function graphLineChart(container,data){
+	Highcharts.setOptions({
+	    global: {
+	        useUTC: false
+	    }
+	});	
+	$(container).highcharts({
+         chart: {
+             type: 'spline'
+         },   
+         title: {
+             text: data.title
+         },
+         xAxis: {
+             type: 'datetime',
+             dateTimeLabelFormats: {
+                 second: '%H:%M:%S',
+                 minute: '%H:%M',
+                 hour: '%H:%M',
+                 day: '%m-%d',
+                 week: '%Y-%m-%d',
+                 month: '%m-%d',
+                 year: '%Y-%m'
+             }
+         },
+         yAxis: {
+             min: 0.0
+         },
+         credits : {
+             enabled:false
+         },
+         plotOptions: {
+	         spline: {
+	             lineWidth: 2,
+	             states: {
+	                 hover: {
+	                     lineWidth: 2
+	                 }
+	             },
+	             marker: {
+	                 enabled: false
+	             }
+	         }
+         },
+         legend:{
+        	 maxHeight:82
+         },
+         tooltip: {
+             allowPointSelect:false,
+             formatter: function() {
+                     return '<b>'+ this.series.name +'</b><br/>'+
+                         Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +': '+ this.y;
+             }
+         },
+         series: parseLineData(data)
+     });
+}
 
-			if (e.ctrlKey || e.metaKey) {
-				return true;
-			} else {
-				e.preventDefault();
+$(document).delegate('.graph_link','click',function(e) {
+		var anchor = this, el = $(anchor), id = Number(el
+				.attr('data-status')) || 0;
+	
+		if (e.ctrlKey || e.metaKey) {
+			return true;
+		} else {
+			e.preventDefault();
+		}
+	
+		var cell = document.getElementById(id);
+		var text = el.html();
+	
+		if (text == '[:: show ::]') {
+			anchor.innerHTML = '[:: hide ::]';
+	
+			if (cell.nodeName == 'IMG') { // <img src='...'/>
+				cell.src = anchor.href;
+			} else { // <div>...</div>
+				$.ajax({
+					type : "get",
+					url : anchor.href,
+					success : function(data, textStatus) {
+						hourlyGraphLineChart(cell,data);
+					}
+				});
 			}
+			cell.style.display = 'block';
+			cell.parentNode.style.display = 'block';
+		} else {
+			anchor.innerHTML = '[:: show ::]';
+			cell.style.display = 'none';
+			cell.parentNode.style.display = 'none';
+		}
+});
 
-			var cell = document.getElementById(id);
-			var text = el.html();
-
-			if (text == '[:: show ::]') {
-				anchor.innerHTML = '[:: hide ::]';
-
-				if (cell.nodeName == 'IMG') { // <img src='...'/>
-					cell.src = anchor.href;
-				} else { // <div>...</div>
-					$.ajax({
-						type : "get",
-						url : anchor.href,
-						success : function(response, textStatus) {
-							historyGraphLineChart(cell,response);
-						}
-					});
-				}
-			} else {
-				anchor.innerHTML = '[:: show ::]';
-				cell.style.display = 'none';
-				cell.parentNode.style.display = 'none';
+$(document).delegate('.history_graph_link','click',function(e) {
+		var anchor = this, el = $(anchor), id = Number(el
+				.attr('data-status')) || 0;
+	
+		if (e.ctrlKey || e.metaKey) {
+			return true;
+		} else {
+			e.preventDefault();
+		}
+	
+		var cell = document.getElementById(id);
+		var text = el.html();
+	
+		if (text == '[:: show ::]') {
+			anchor.innerHTML = '[:: hide ::]';
+	
+			if (cell.nodeName == 'IMG') { // <img src='...'/>
+				cell.src = anchor.href;
+			} else { // <div>...</div>
+				$.ajax({
+					type : "get",
+					url : anchor.href,
+					success : function(response, textStatus) {
+						historyGraphLineChart(cell,response);
+					}
+				});
 			}
-		});
+		} else {
+			anchor.innerHTML = '[:: show ::]';
+			cell.style.display = 'none';
+			cell.parentNode.style.display = 'none';
+		}
+});
 $(document).delegate('.problem_status_graph_link', 'click', function(e){
 	var anchor = this,
 		el = $(anchor),

cat-home/src/main/webapp/jsp/report/dependency/dependency.jsp

@@ -14,7 +14,7 @@
 	
 	<res:useCss value='${res.css.local.table_css}' target="head-css" />
 	<res:useJs value="${res.js.local['jquery.dataTables.min.js']}" target="head-js" />
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['jquery.validate.min.js']}" target="head-js" />
 	<res:useJs value="${res.js.local['dependencyConfig.js']}" target="head-js" />

cat-home/src/main/webapp/jsp/report/dependency/dependencyLineGraph.jsp

@@ -7,12 +7,7 @@
 			<tr>
 				<c:forEach var="item" items="${model.indexGraph}" varStatus="status">
 					<td>
-						<h5 class='text-center text-info'>
-							<c:if test="${status.index == 0 }">访问量</c:if>
-							<c:if test="${status.index == 1 }">错误量</c:if>
-							<c:if test="${status.index == 2 }">响应时间</c:if>
-						</h5>
-						<div id="item${status.index}" style="width:450px;height:300px;"></div>
+						<div id="item${status.index}" style="width:450px;height:400px;"></div>
 					</td>
 				</c:forEach>
 			</tr>
@@ -30,11 +25,7 @@
 			<tr>
 			<c:forEach var="item" items="${value}" varStatus="status">
 					<td>
-						
-							<c:if test="${status.index == 0 }"><h5 class='text-center text-info'>访问量</h5></c:if>
-							<c:if test="${status.index == 1 }"><h5 class='text-center text-error'>错误量</h5></c:if>
-							<c:if test="${status.index == 2 }"><h5 class='text-center text-info'>响应时间</h5></c:if>
-						<div id="item${type.index}-${status.index}" style="width:450px;height:300px;"></div></td>
+						<div id="item${type.index}-${status.index}" style="width:450px;height:400px;"></div></td>
 			</c:forEach></tr>
 		</c:forEach></table>
 	</div>
@@ -42,15 +33,13 @@
 </div>
 <script type="text/javascript">
 	<c:forEach  var="item" items="${model.indexGraph}" varStatus="status">
-		_data = lineChartParse(${item});
-		new Venus.SvgChart(document.getElementById('item${status.index}'), _data, lineChartOptions);
+		graphLineChart(document.getElementById('item${status.index}'),${item});
 	</c:forEach>
 	<c:forEach var="charts" items="${model.dependencyGraph}" varStatus="type">
 		<c:set var="key" value="${charts.key}"/>
 		<c:set var="value" value="${charts.value}"/>
 		<c:forEach var="item" items="${value}" varStatus="status">
-			_data = lineChartParse(${item});
-			new Venus.SvgChart(document.getElementById('item${type.index}-${status.index}'), _data, lineChartOptions);
+			graphLineChart(document.getElementById('item${type.index}-${status.index}'),${item});
 		</c:forEach>
 </c:forEach>
 </script>

cat-home/src/main/webapp/jsp/report/event/event.jsp

@@ -16,7 +16,7 @@
 
 	<jsp:attribute name="subtitle">From ${w:format(report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(report.endTime,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 	<jsp:body>
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align: left">

cat-home/src/main/webapp/jsp/report/event/eventHistoryGraphs.jsp

@@ -5,7 +5,7 @@
 <jsp:useBean id="ctx"	type="com.dianping.cat.report.page.event.Context"	scope="request" />
 <jsp:useBean id="payload"	type="com.dianping.cat.report.page.event.Payload"	scope="request" />
 <jsp:useBean id="model"	type="com.dianping.cat.report.page.event.Model" scope="request" />
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 <script type="text/javascript" src="/cat/js/jquery-1.7.1.js"></script>
 <style type="text/css">
@@ -17,9 +17,9 @@
 </style>
 <table>
 	<tr>
-		<td><h5 style="text-align:center" class='text-center text-info'>访问量</h5>
+		<td>
 		<div id="hitTrend" class="graph"></div></td>
-		<td><h5 style="text-align:center"  class='text-center text-info'>错误量</h5>
+		<td>
 		<div id="failureTrend" class="graph"></div></td>
 	</tr>
 	<tr><td  style="display:none">

cat-home/src/main/webapp/jsp/report/event/eventHistoryReport.jsp

@@ -10,7 +10,7 @@
 <a:historyReport title="History Report" navUrlPrefix="type=${payload.type}&ip=${model.ipAddress}">
 	<jsp:attribute name="subtitle">From ${w:format(payload.historyStartDate,'yyyy-MM-dd HH:mm:ss')} to ${w:format(payload.historyDisplayEndDate,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 	<jsp:body>
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align: left">

cat-home/src/main/webapp/jsp/report/heartbeat/heartbeatHistoryGraph.jsp

@@ -10,7 +10,7 @@
 <a:historyReport title="HeartBeat History Report">
 	<jsp:attribute name="subtitle">From ${w:format(payload.historyStartDate,'yyyy-MM-dd HH:mm:ss')} to ${w:format(payload.historyDisplayEndDate,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 	<jsp:body>
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <br>
 <table class="machines">

cat-home/src/main/webapp/jsp/report/heartbeat/heartbeatPartHistoryGraph.jsp

@@ -8,7 +8,7 @@
 <jsp:useBean id="model" type="com.dianping.cat.report.page.heartbeat.Model" scope="request" />
 
 <script type="text/javascript" src="/cat/js/jquery-1.7.1.js"></script>
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 <script type="text/javascript" src="/cat/js/heartbeatHistory.js"></script>
 <style type="text/css">

cat-home/src/main/webapp/jsp/report/metric/dashboard.jsp

@@ -13,7 +13,7 @@
 <res:useJs value="${res.js.local['jquery-1.7.1.js']}" target="head-js" />
 <res:useJs value="${res.js.local['bootstrap.min.js']}" target="head-js" />
 <res:useCss value='${res.css.local.table_css}' target="head-css" />
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 
 <c:choose>

cat-home/src/main/webapp/jsp/report/metric/metric.jsp

@@ -10,7 +10,7 @@
 <a:body>
 
 <res:useCss value='${res.css.local.table_css}' target="head-css" />
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 
 <script type="text/javascript">
@@ -83,7 +83,6 @@
         	</c:if>
         	<c:forEach var="item" items="${model.lineCharts}" varStatus="status">
        			<div style="float:left;">
-       				<h5 class="text-center text-error">${item.title}</h5>
        				<div  id="${item.title}" class="metricGraph"></div>
        			</div>
 			</c:forEach>

cat-home/src/main/webapp/jsp/report/problem/problemHistoryGraphs.jsp

@@ -6,7 +6,7 @@
 <jsp:useBean id="ctx" type="com.dianping.cat.report.page.problem.Context" scope="request" />
 <jsp:useBean id="payload" type="com.dianping.cat.report.page.problem.Payload" scope="request" />
 <jsp:useBean id="model"	type="com.dianping.cat.report.page.problem.Model" scope="request" />
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 <style type="text/css">
 .graph {

cat-home/src/main/webapp/jsp/report/problem/problemHistoryReport.jsp

@@ -11,7 +11,7 @@
 
 	<jsp:attribute name="subtitle">From ${w:format(payload.historyStartDate,'yyyy-MM-dd HH:mm:ss')} to ${w:format(payload.historyDisplayEndDate,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 	<jsp:body>
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align:left">

cat-home/src/main/webapp/jsp/report/problem/problemHourlyGraphs.jsp

@@ -7,7 +7,7 @@
 <jsp:useBean id="payload" type="com.dianping.cat.report.page.problem.Payload" scope="request" />
 <jsp:useBean id="model"	type="com.dianping.cat.report.page.problem.Model" scope="request" />
 <script type="text/javascript" src="/cat/js/jquery-1.7.1.js"></script>
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 <style type="text/css">
 .graph {

cat-home/src/main/webapp/jsp/report/problem/problemStatics.jsp

@@ -16,7 +16,7 @@
 	<jsp:attribute name="subtitle">From ${w:format(report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(report.endTime,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 
 	<jsp:body>
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align:left">

cat-home/src/main/webapp/jsp/report/state/state.jsp

@@ -14,7 +14,7 @@
 <a:report title="CAT State Report" navUrlPrefix="domain=${model.domain}&ip=${model.ipAddress}">
 	<jsp:attribute name="subtitle">From ${w:format(model.report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(model.report.endTime,'yyyy-MM-dd HH:mm:ss')}  &nbsp;&nbsp;&nbsp;&nbsp;CAT项目指标</jsp:attribute>
 	<jsp:body>	
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align: left">

cat-home/src/main/webapp/jsp/report/state/stateGraphs.jsp

@@ -10,7 +10,7 @@
 }
 </style>
 <script type="text/javascript" src="/cat/js/jquery-1.7.1.js"></script>
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 
 <table>

cat-home/src/main/webapp/jsp/report/state/stateHistory.jsp

@@ -11,7 +11,7 @@
 <a:historyReport title="CAT State Report" navUrlPrefix="domain=${model.domain}&ip=${model.ipAddress}">
 	<jsp:attribute name="subtitle">From ${w:format(model.report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(model.report.endTime,'yyyy-MM-dd HH:mm:ss')}  &nbsp;&nbsp;&nbsp;&nbsp;CAT项目指标</jsp:attribute>
 	<jsp:body>	
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align:left">

cat-home/src/main/webapp/jsp/report/transaction/transaction.jsp

@@ -13,7 +13,7 @@
 <a:report title="Transaction Report${empty payload.type ? '' : ' :: '}<a href='?domain=${model.domain}&date=${model.date}&type=${payload.type}'>${payload.type}</a>" navUrlPrefix="ip=${model.ipAddress}&queryname=${model.queryName}&domain=${model.domain}${empty payload.type ? '' : '&type='}${payload.type}" timestamp="${w:format(model.creatTime,'yyyy-MM-dd HH:mm:ss')}">
 <jsp:attribute name="subtitle">From ${w:format(report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(report.endTime,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 <jsp:body>
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align:left">

cat-home/src/main/webapp/jsp/report/transaction/transactionHistoryGraphs.jsp

@@ -6,7 +6,7 @@
 <jsp:useBean id="ctx" type="com.dianping.cat.report.page.transaction.Context" scope="request" />
 <jsp:useBean id="payload" type="com.dianping.cat.report.page.transaction.Payload" scope="request" />
 <jsp:useBean id="model"	type="com.dianping.cat.report.page.transaction.Model" scope="request" />
-<script type="text/javascript" src="/cat/js/svgchart.latest.min.js"></script>
+<script type="text/javascript" src="/cat/js/highcharts.js"></script>
 <script type="text/javascript" src="/cat/js/baseGraph.js"></script>
 <script type="text/javascript" src="/cat/js/transaction.js"></script>
 <style type="text/css">
@@ -19,11 +19,10 @@
 <table>
 	<tr>
 		<td>
-			<h5 style="text-align:center" class='text-center text-info'>响应时间</h5>
 			<div id="responseTrend" class="graph"></div></td>
-		<td><h5 style="text-align:center"  class='text-center text-info'>访问量</h5>
+		<td>
 			<div id="hitTrend" class="graph"></div></td>
-		<td><h5 style="text-align:center"  class='text-center text-info'>错误量</h5>
+		<td>
 			<div id="errorTrend" class="graph"></div></td>
 	</tr>
 	<tr><td  style="display:none">

cat-home/src/main/webapp/jsp/report/transaction/transactionHistoryReport.jsp

@@ -10,7 +10,7 @@
 <a:historyReport title="History Report" navUrlPrefix="type=${payload.type}&queryname=${model.queryName}">
 	<jsp:attribute name="subtitle">From ${w:format(payload.historyStartDate,'yyyy-MM-dd HH:mm:ss')} to ${w:format(payload.historyDisplayEndDate,'yyyy-MM-dd HH:mm:ss')}</jsp:attribute>
 	<jsp:body>
-	<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 <table class="machines">
 	<tr style="text-align: left">

cat-home/src/test/resources/com/dianping/cat/report/page/browser/browser.jsp

@@ -10,7 +10,7 @@
 <a:body>
 <res:useCss value='${res.css.local.table_css}' target="head-css" />
 <res:useJs value="${res.js.local['bootstrap.min.js']}" target="head-js"/>
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 
 <script type="text/javascript">

cat-home/src/test/resources/com/dianping/cat/report/page/browser/browserVersion.jsp

@@ -10,7 +10,7 @@
 <a:body>
 <res:useCss value='${res.css.local.table_css}' target="head-css" />
 <res:useJs value="${res.js.local['bootstrap.min.js']}" target="head-js"/>
-<res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
+<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 
 <script type="text/javascript">