ui/src/main/webapp/static/fusion/sample/html/bar_chart.html

   1 <!DOCTYPE html>
   2 <html>
   3 <meta http-equiv="content-type" content="text/html; charset=UTF8">
   4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   5 <link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css">
   6 <style>
   7 body {
   8     overflow-y: scroll;
   9 }
  10
  11 text {
  12     font: 12px sans-serif;
  13 }
  14
  15 svg {
  16     display: block;
  17 }
  18
  19 #chart461 svg {
  20     height: 420px;
  21     width: 700px;
  22     min-width: 100px;
  23     min-height: 100px;
  24 }
  25
  26 tr.z-row-over>td.z-row-inner, tr.z-row-over>.z-cell {
  27     background-color: rgb(255, 255, 255);
  28 }
  29
  30 .nodatadiv {
  31     display: table-cell;
  32     width: 700px;
  33     height: 370px;
  34     text-align: center;
  35     vertical-align: middle;
  36 }
  37
  38 .nodatainner {
  39     padding: 10px;
  40 }
  41 </style>
  42 <body>
  43  <div align="center">
  44   <H3></H3>
  45  </div>
  46  <div id="chart461">
  47   <svg></svg>
  48  </div>
  49  <script src="../../d3/js/d3.v3.min.js"></script>
  50  <script src="../../d3/js/nv.d3.min.js"></script>
  51  <script src="../../d3/js/tooltip.js"></script>
  52  <script src="../../d3/js/utils.js"></script>
  53  <script src="../../d3/js/models/axis.min.js"></script>
  54  <script src="../../d3/js/models/multiChart.js"></script>
  55  <script>
  56 historicalBarChart = [
  57  { "type":"bar", "key": "AP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10}, { "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } ,
  58  { "type":"bar", "key": "ROUTER_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":7}, { "x":1391230800000 , "y":7}, { "x":1393650000000 , "y":5}, { "x":1396324800000 , "y":6}, { "x":1398916800000 , "y":5}, { "x":1401595200000 , "y":6}, { "x":1404187200000 , "y":7}, { "x":1406865600000 , "y":7}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9}, { "x":1414814400000 , "y":9}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2}, { "x":1425186000000 , "y":3.63333333333333} ] } ,
  59  { "type":"bar", "key": "SCTP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":8}, { "x":1391230800000 , "y":10}, { "x":1393650000000 , "y":10}, { "x":1396324800000 , "y":9}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":24.5833333333333} ] } ,
  60  { "type":"bar", "key": "DP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":2}, { "x":1391230800000 , "y":9}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":8}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.4} ] }
  61 ];
  62 var chart;
  63 nv.addGraph(function() {
  64  chart = nv.models.multiBarChart()
  65            .margin({top: 30, right: 60, bottom: 50, left: 100})
  66                         .showLegend(true)
  67             .reduceXTicks(false)
  68            .forceY([0, 34.0])
  69                         .showControls(true)
  70                         .stacked(false)
  71                         .logScale(false)
  72                                 .legendPos('top')
  73            .color(d3.scale.category10().range());
  74   chart.xAxis
  75         .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
  76              .staggerLabels(false)
  77                         .showMaxMin(false)
  78                         .rotateLabels(90)
  79                .axisLabel('Timestamp')
  80         .tickFormat(function(d) {
  81          return d3.time.format('%b %y')(new Date(d)) });
  82   chart.yAxis
  83                         .logScale(false)
  84                .axisLabel('')
  85         .tickFormat(d3.format(',.1f'));
  86  d3.select('#chart461 svg')
  87   .datum(historicalBarChart)
  88   .transition().duration(1000)
  89   .call(chart);
  90 nv.utils.windowResize(chart.update);
  91 return chart;
  92 });
  93 function redraw() {
  94         d3.select('#chart461 svg')
  95                 .datum(historicalBarChart)
  96                 .transition().duration(500)
  97                 .call(chart);
  98 }
  99
 100  setInterval(function () {
 101  redraw();
 102  }, 1500)
 103 if(historicalBarChart.length <= 0 ) {
 104         document.getElementById("chart461").innerHTML = "<div id='noData'><b>No Data Available</b></div>";
 105         document.getElementById("chart461").className="nodatadiv";
 106         document.getElementById("nodata").className="nodatainner";
 107 }
 108 </script>
 109 </body>
 110 </html>