このページの翻訳:
- 日本語 (ja)
- English (en)
最近の更新
- 麻雀ルール [チップ・焼鳥について]
- 71 vsftpd [Difference Between PASV Mode and ACTIVE Mode]
- 2024.07.02 Windowsライセンス有効期限 [ライセンスの有効期限を確認方法]
最近の更新
綺麗なグラフが簡単に作成できて、色々細かなカスタマイズも可能。
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
・グラフに吹き出しを出す
http://faltc.blogspot.jp/2013/04/highcharts-30-axistopixels.html
53 <script src="/js/highcharts/highstock.js" type="text/javascript" language="JavaScript"></script>
54 <script type="text/javascript" language="JavaScript">
55
56 $(document).ready(function (){
57
58 var jsonData = {};
59 var dataLength = {};
60
61 // VM
62 var options = {
63 chart: {
64 type: 'spline', // 柔らかいLine
65 backgroundColor: '#ffffff',
66 plotBackgroundColor: '#eeeeee',
67 borderRadius: 10,
68 borderWidth: 1,
69 borderColor: '#dddddd',
70 },
71 legend: {
72 enabled: true,
73 align: 'right',
74 layout: 'vertical',
75 verticalAlign: 'top',
76 y: 100,
77 },
78 plotOptions: {
79 series: {
80 animation: {
81 duration: 5000
82 }
83 },
84 spline: {
85 lineWidth: 2, //lineの太さ
86 states: {
87 hover: {
88 lineWidth: 3 //マウスオーバー時
89 }
90 }
91 }
92 },
93 tooltip: {
94 borderRadius: 5, // tooltipの角丸み
95 borderWidth: 1,
96 },
97
98 title: { text: 'ドメインごとのVM数の推移' },
99 xAxis: {
100 type: 'datetime',
101 },
102 subtitle: {
103 text: ''
104 },
105 yAxis: {
106 allowDecimals: false,
107 title: {
108 text: '仮想サーバ数'
109 },
110 startOnTick: false,
111 min: 0,
112 },
113 rangeSelector: {
114 selected: 0,
115 },
116 navigator: {
117 series: {
118 includeInCSVExport: false
119 },
120 },
121 series: [
122 ],
123 exporting: {
124 csv: {
125 dateFormat: '%Y-%m-%d'
126 }
127 },
128 };
129
130 function getData(url, graph_id ) { // ajaxでデータ取得
131 $.ajax({
132 url: url,
133 type: 'GET',
134 dataType: 'json',
135 data: {},
136 async: true,
137 cache: false,
138 success: function (data) {
139 var chart = $( graph_id ).highcharts();
140 jsonData = data;
141 dataLength = data.length;
142 jQuery.each(data, function ( key, val ) {
143 chart.addSeries( val );
144 });
145 },
146 });
147 }
148
149
150 Highcharts.setOptions({
151 global: { useUTC: false }
152 });
153
154 // 該当ドメインをクリックでグラフ表示
155 $('#domain .domainname').click(function(){
156 var graph_id = '#domain_graph';
157 var id = $(this).attr('id');
158 console.log(id);
159 options.subtitle.text = id;
160 $( graph_id ).highcharts('StockChart', options);
161 $("body,html").animate({scrollTop:0},800); // topまでゆっくり上がる
162 getData('/api/cloudstack_domains/domain/' + id, graph_id);
163 });
[ {"name":"running","tooltip":{"valueSuffix":"\u53f0"}, "data":[[1551652805000,47],[1551768004000,50],[1551799230000,50],[1551885904000,53],[1552004224000,52],[1552059604000,52],[1552146004000,52],[1552232404000,55],[1552318804000,56],[1552405205000,56],[1552491604000,56],[1552578004000,56],[1552664404000,56],[1552750804000,56],[1552837205000,56],[1552923605000,59],[1553010004000,59],[1553096404000,58],[1553182805000,59],[1553269205000,59],[1553355604000,59],[1553442005000,59]] },{ "name":"stopped","tooltip":{"valueSuffix":"\u53f0"}, "data":[[1551652805000,3],[1551768004000,3],[1551799230000,3],[1551885904000,3],[1552004224000,3],[1552059604000,3],[1552146004000,3],[1552232404000,3],[1552318804000,3],[1552405205000,3],[1552491604000,3],[1552578004000,4],[1552664404000,4],[1552750804000,4],[1552837205000,4],[1552923605000,4],[1553010004000,4],[1553096404000,4],[1553182805000,4],[1553269205000,4],[1553355604000,4],[1553442005000,4]] },{ "name":"cpu","tooltip":{"valueSuffix":"\u500b"}, "data":[[1551652805000,66],[1551768004000,69],[1551799230000,69],[1551885904000,74],[1552004224000,73],[1552059604000,73],[1552146004000,73],[1552232404000,76],[1552318804000,77],[1552405205000,77],[1552491604000,77],[1552578004000,79],[1552664404000,79],[1552750804000,79],[1552837205000,79],[1552923605000,82],[1553010004000,82],[1553096404000,82],[1553182805000,83],[1553269205000,83],[1553355604000,85],[1553442005000,83]] },{ "name":"memory","tooltip":{"valueSuffix":"G"}, "data":[[1551652805000,84],[1551768004000,96],[1551799230000,96],[1551885904000,102],[1552004224000,96],[1552059604000,96],[1552146004000,96],[1552232404000,99],[1552318804000,103],[1552405205000,103],[1552491604000,100],[1552578004000,102],[1552664404000,102],[1552750804000,102],[1552837205000,102],[1552923605000,128],[1553010004000,128],[1553096404000,126],[1553182805000,127],[1553269205000,127],[1553355604000,129],[1553442005000,127]] } ]
グラフ
グラフのバーとデータ表を連動させる
<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>