http://www.highcharts.com/

綺麗なグラフが簡単に作成できて、色々細かなカスタマイズも可能。

http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

・グラフに吹き出しを出す
http://faltc.blogspot.jp/2013/04/highcharts-30-axistopixels.html

グラフのバーとデータ表を連動させる

<script type="text/javascript" language="JavaScript">
	
	$(document).ready(function (){

		var jsonData = { 'isolate': { 'vm': {}, 'ip': {} }, 'basic': { 'vm': {}, 'ip': {} } };
		var dataLength = { 'isolate': { 'vm': 1, 'ip': 1 }, 'basic': { 'vm': 1, 'ip': 1 } };
		
		// VM
		var options = { 
			'vm': {
				chart: {
					type: 'line',
					events: {
						redraw: function() {
							var params = this.renderTo.id.split( '_' );
							if ( this.series.length == ( dataLength[ params[3] ][ params[2] ] + 1 ) ) {
	 							setDataTable( this.renderTo.id, jsonData[ params[3] ][ params[2] ] );
							}
						},
					},
				},
				legend: {
					enabled: true,
					layout: 'horizontal',
				},
				title: { text: '各ホスト（HV）ごとのVM数の推移' },
				xAxis: { 
					allowDecimals: false,
					type: 'datetime',
					dateTimeLabelFormats: {
						day: '%m/%d',
						month: '%Y/%m',
					},
					labels: {
	//					format: '{value:%Y/%m/%d}',
	//					rotation: 45,
	//					align: 'left',
						},
	//				startOnTick: true,
					},
				yAxis: { 
					allowDecimals: false,
					title: { 
						text: '仮想サーバ数' 
						}, 
					startOnTick: false,
					min: 0,
					},
				rangeSelector: {
					selected: 0,
				},
				navigator: {
					series: {
						includeInCSVExport: false
					},
				},
				exporting: {
					csv: {
						dateFormat: '%Y-%m-%d'
					}
				},
			},
			'ip': {
				chart: {
					type: 'area',
					events: {
						redraw: function() {
							var params = this.renderTo.id.split( '_' );
							if ( this.series.length == ( dataLength[ params[3] ][ params[2] ] + 1 ) ) {
	 							setDataTable( this.renderTo.id, jsonData[ params[3] ][ params[2] ] );
							}
						},
					},
				},
				legend: {
					enabled: true,
					layout: 'horizontal',
				},
				pilotOptions: {
					series: {
						stacking: 'normal',
					},
				},
				tooltip: {
					formatter: function() {
						var date = Highcharts.dateFormat("%Y/%m/%d", this.x);
						var s = '<b>' + date +'</b>';
						var total = this.points[0].y;
						
						$.each(this.points, function ( i, point ) {
							var percent = Highcharts.numberFormat((point.y / total) * 100, 2);
							var strPercent = '(' + percent + '%)'
							s += '<br />' + point.series.name + ' : <b>' + point.y + '</b>';
							if ( i != 0 ) {
								s+= strPercent;
							}
						});
							
						return s;
					},
					shared: true
				},
				title: { text: 'グローバルIPの利用推移' },
				xAxis: { 
					allowDecimals: false,
					type: 'datetime',
					dateTimeLabelFormats: {
						day: '%m/%d',
						month: '%Y/%m',
					},
					labels: {
	//					format: '{value:%Y/%m/%d}',
	//					rotation: 45,
	//					align: 'left',
					},
	//				startOnTick: true,
				},
				yAxis: { 
					allowDecimals: false,
					title: { 
						text: 'グローバルIP数' 
					}, 
				},
				rangeSelector: {
					selected: 0,
				},
			},
		};

		function getData(url, graph_id ) {
			$.ajax({
				url: url,
				type: 'GET',
				dataType: 'json',
				data: {},
				async: true,
				cache: false,
				success: function (data) {
					var chart = $( graph_id ).highcharts();
					var params = graph_id.split( '_' );
					jsonData[ params[3] ][ params[2] ] = data;
					dataLength[ params[3] ][ params[2] ] = data.length;
					
					jQuery.each(data, function ( key, val ) {
						chart.addSeries( val );
					});
				},
			});
		}
		
		
		Highcharts.setOptions({
			global: { useUTC: false }
		});

		var tabsOptions = {
				'activate': function ( event, ui ) {

					var ids = ui.newPanel.attr('id').split( '_' );
					var tabid = ids[1];
					var type = 'virtualmachine';
					var platform = ids[2];
					var graph_id = "#report_graph_" + tabid + "_" + platform;
					var chart = $( graph_id ).highcharts();
					
					if ( typeof chart !== 'undefined' ) {
						return ;
					}
					
					$( graph_id ).highcharts('StockChart', options[tabid] );
					if ( tabid == 'ip' ) {
						type = 'globalip';
					}
					getData( "/api/report/" + type + "/cloudstack/" + platform, graph_id );
				},
				'create': function ( event, ui ) {
					var ids = ui.panel.attr('id').split( '_' );
					var tabid = ids[1];
					var platform = ids[2];
					var type = 'virtualmachine';
					var graph_id = "#report_graph_" + tabid + "_" + platform;
					var chart = $( graph_id ).highcharts();
					
					if ( typeof chart !== 'undefined' ) {
						return ;
					}
					
					$( graph_id ).highcharts('StockChart', options[tabid] );
					if ( tabid == 'ip' ) {
						type = 'globalip';
					}
					getData( "/api/report/" + type + "/cloudstack/" + platform, graph_id );
				},
			};

		$("#platform").tabs({
			'create': function ( event, ui ) {
				$("#report_tabs_" + ui.panel.attr('id') ).tabs( tabsOptions );
			},
			'activate': function ( event, ui ) {
				$("#report_tabs_" + ui.newPanel.attr('id')).tabs( tabsOptions );
			},
		});

		function setDataTable( id, datalist ) {
			var dataTableID = ( '#' + id ).slice( ( id.length + 1 ) * -1 ).replace( 'graph', 'table' );
			var graphID = ( '#' + id ).slice( ( id.length + 1 )* -1 );
			var params = id.split( '_' );
			
			var chartObject = $( graphID ).highcharts();
			var table = $( '<table>' ).attr('border', '1');
			var thead = $( '<thead>' );
			var tbody = $( '<tbody>' );

			var fromDate = chartObject.rangeSelector.minInput.HCTime;
			var toDate = chartObject.rangeSelector.maxInput.HCTime;

			var aryDate = new Array();
			$( dataTableID ).empty();
			
			// ヘッダー領域の作成
			var headTr = $( '<tr>' ).append( $( '<td>' ) );
			
			$.each( datalist, function( key, data ) {
				// データ領域の作成
				var tr = $( '<tr>' ).append( $( '<td>' ).text( data.name ) );
				var oldVmCount = 0;
				
				$.each( data.data, function ( idx, value ) {
					// HighChartの指定日付範囲外は処理しない
					if ( ! ( value[0] >= fromDate && value[0] <= toDate ) ) {
						// 一つ前のデータ取得
						if ( value[0] <= fromDate ) {
							oldVmCount = value[1];
						}
						return true; // continue
					}
					if ( $.inArray( value[0], aryDate ) == -1 ) {
						var dt = new Date( value[0] );
						var dateString = [ dt.getFullYear(), ( '0' + ( dt.getMonth() + 1 ) ).slice( -2 ), ( '0' + dt.getDate() ).slice( -2 ) ].join( '/' ); 
						aryDate.push( value[0] );
						headTr.append( $( '<td>' ).text( dateString ) );
					}

					var vmCount = value[1] - oldVmCount;
					var compareStyle = ( vmCount > 0 ) ? 'plus' : ( vmCount < 0 ) ? 'minus' : '';
					var viewVMCount = ( vmCount > 0 ) ? ( '+' + vmCount ).slice( ( vmCount.length + 1 ) * -1 ) : ( vmCount < 0 ) ? vmCount : ( '±' + vmCount ).slice( ( vmCount.length + 1 ) * -1 );
					var bodyTd = $( '<td>' ).text( value[1] ).append( $( '<span>' ).text( ' (' + viewVMCount + ')' ).attr( 'class', compareStyle ) );
					oldVmCount = value[1];
					tr.append( bodyTd );
				});
				tbody.append( tr );
			});

			thead.append( headTr );
			table.append( thead );
			table.append( tbody );
			

			$( dataTableID ).append( table );
			
		}

		function exportTableToCSV( $table, filename ) {
			var $rows = $table.find('tr:has(td)'),
						tmpColDelim = String.fromCharcode(11),
						tmpRowDelim = String.fromCharcode(0),
						colDelim = '","',
						rowDelim = '"\r\n"',
						csv = '"' + $rows.map( function( i, row ) {
							var $row = $(row),
								$cols = $row.find( 'td' );

							return $cols.map( function( j, col ) {
								var $col = $( col ),
									text = $col.text();

								return text.replace( '"', '""');

								}).get().join( tmpColDelim );
						}).get().join( tmpRowDelim )
									.split( tmpRowDelim ).join( rowDelim )
									.split( tmpColDelim ).join( colDelim ) + '"',
						csvData = 'data:application/csv;charset=utf8,' + encodeURIComponent( csv );

			$(this).attr({
				'download': filename,
				'href': csvData,
				'target': '_blank'
				});
		}

		$("a[id^='export_graph']").button();
		
		$("a[id^='export_graph']").bind( 'click', function( event ) {
			var ids = this.id.split( '_' );
			var tableID = [ '#report', 'table', ids[2], ids[3] ].join( '_' );
			var chartID = [ '#report', ids[1], ids[2], ids[3] ].join( '_' );
			var chartObject = $( chartID ).highcharts();
			var fromDate = chartObject.rangeSelector.minInput.HCTime;
			var toDate = chartObject.rangeSelector.maxInput.HCTime;
			var fromDt = new Date( fromDate );
			var toDt = new Date( toDate );
			var fromDateString = [ fromDt.getFullYear(), ( '0' + ( fromDt.getMonth() + 1 ) ).slice( -2 ), ( '0' + fromDt.getDate() ).slice( -2 ) ].join( '' );
			var toDateString = [ toDt.getFullYear(), ( '0' + ( toDt.getMonth() + 1 ) ).slice( -2 ), ( '0' + toDt.getDate() ).slice( -2 ) ].join( '' );
			var exportFileName = [ fromDateString, toDateString, ids[3], ids[2] ].join( '-' ),
				exportFileName = exportFileName + '.csv';
			
			exportTableToCSV.apply( this, [ $( tableID ), exportFileName ]);
		});

		
		
	});

</script>