ONAP-SDK-APP/src/main/webapp/static/fusion/sample/js/charts.js

   1
   2 function drawSingleSeriesChart(tabId, chartId, chartWidth, chartHeight, chartType, chartData,mme,yyyyMo) {
   3     // define, set the data for each chart, and render them (if indicated)
   4     var myChart = new FusionCharts("static/fusion/inc/fusionchart/" + chartType, "myChartId" + chartId, chartWidth, chartHeight);
   5
   6     var mmeLabel = "";//mme + "";
   7
   8     var chartCaptionId = tabId + "-chartdiv" + chartId + "-label";
   9
  10     document.getElementById(chartCaptionId).innerHTML =  "Hosted Voice Usage in "+ yyyyMo;
  11
  12     myChart.setDataXML("<graph caption='"+mmeLabel + "' xAxisName='' yAxisName='# of Inbound/Outbound calls' showNames='1' decimalPrecision='0' formatNumberScale='0'>" + chartData + "</graph>");
  13     myChart.setTransparent(true);
  14     myChart.render(tabId + "-"+ "chartdiv" + chartId);
  15
  16
  17   }
  18
  19
  20   // gauge charts
  21   function drawGaugeChart(chartId, gaugeIndex, value) {
  22         var   myChart = new FusionCharts("static/fusion/inc/fusionchart/AngularGauge.swf", "myChartId" + chartId, "300", "300", "0", "0");
  23         //CPU for NYCMNYBWLT1 on 201301 : 12.63//
  24         var chartData =
  25     "<Chart showBorder='0' editMode='1' bgColor='FFFFFF' upperLimit='100' lowerLimit='0' label='CPU' baseFontColor='FFFFFF' majorTMNumber='11' majorTMColor='FFFFFF'  majorTMHeight='8' minorTMNumber='5' minorTMColor='FFFFFF' minorTMHeight='3' toolTipBorderColor='FFFFFF' toolTipBgColor='333333' gaugeOuterRadius='100' gaugeOriginX='150' gaugeOriginY='150' gaugeScaleAngle='270' placeValuesInside='1' gaugeInnerRadius='80%25' annRenderDelay='0' gaugeFillMix='' pivotRadius='10' showPivotBorder='0' pivotFillMix='{CCCCCC},{333333}' pivotFillRatio='50,50' showShadow='0' >" +
  26                 "<colorRange>" +
  27                 "<color minValue='0' maxValue='50'   code='C1E1C1' alpha='60'/>" +
  28                 "<color minValue='50' maxValue='85'  code='F6F164' alpha='60'/>" +
  29                 "<color minValue='85' maxValue='120' code='F70118' alpha='60'/>" +
  30         "</colorRange>" +
  31         "<dials>" +
  32                 "<dial value='" + value + "' borderColor='FFFFFF' bgColor='000000,CCCCCC,000000' borderAlpha='0' baseWidth='10'/>" +
  33         "</dials>" +
  34         "<annotations>" +
  35                 "<annotationGroup xPos='150' yPos='150' showBelow='1'>" +
  36                         "<annotation type='circle' xPos='0' yPos='0' radius='120' startAngle='0' endAngle='360' fillColor='CCCCCC,111111'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>" +
  37                         "<annotation type='circle' xPos='0' yPos='0' radius='110' startAngle='0' endAngle='360' fillColor='111111,cccccc'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>" +
  38                         "<annotation type='text' label='CPU'/>" +
  39                 "</annotationGroup>" +
  40         "</annotations>" +
  41    "</Chart>";
  42
  43         myChart.setDataXML(chartData);
  44         myChart.render("chartdiv" + chartId);
  45   }
  46
  47
  48   function updateGaugeChart(chartId, gaugeIndex, refreshCount) {
  49     var myChart = getChartFromId("myChartId" + chartId);
  50     var val = 0;
  51     if (gaugeIndex == "10") val = 12;
  52     else if (gaugeIndex == "20") val = 15;
  53     else if (gaugeIndex == "30") val = 52;
  54     else if (gaugeIndex == "40") val = 42;
  55     myChart.setData(1, val);
  56     myChart.setData(2, val+20);
  57   }
  58
  59   function updateGaugeChartWithMMEData(chartId, value) {
  60           var myChart = getChartFromId("myChartId" + chartId);
  61           myChart.setData(1, value);
  62   }
  63
  64
  65   function updateGaugeChartWithMMEData(chartId, value, yyyyMo, mme) {
  66           var myChart = getChartFromId("myChartId" + chartId);
  67           myChart.setData(1, value);
  68           document.getElementById("cpuYyyyMm").innerHTML =  "Hosted Voice Utilization in "+ yyyyMo;
  69
  70   }
  71
  72   function drawMultiSeriesChart(tabId,chartId, chartWidth, chartHeight, chartType) {
  73     var     myChart = new FusionCharts("static/fusion/inc/fusionchart/" + chartType, "myChartId" + chartId, chartWidth, chartHeight, "0", "0");
  74
  75         myChart.setTransparent(true);
  76
  77         var chartData =
  78           "<graph caption='Hosted Voice v Audited Communication' xAxisName='Month' yAxisName='Bandwidth Usage'" +
  79                   " showValues='0' decimalPrecision='0' bgcolor='ffffff' bgAlpha='70'" +
  80                   " showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'" +
  81                   " alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >" +
  82                   "<categories>" +
  83                     "<category name='Jan' />" +
  84                     "<category name='Feb' />" +
  85                     "<category name='Mar' />" +
  86                     "<category name='Apr' />" +
  87                     "<category name='May' />" +
  88                     "<category name='Jun' />" +
  89                     "<category name='Jul' />" +
  90                     "<category name='Aug' />" +
  91                     "<category name='Sep' />" +
  92                     "<category name='Oct' />" +
  93                     "<category name='Nov' />" +
  94                     "<category name='Dec' />" +
  95                   "</categories>" +
  96                   "<dataset seriesName='Hosted Voice' color='c4e3f7' >" +
  97                     "<set value='7' />" +
  98                     "<set value='8.04' />" +
  99                     "<set value='10.04' />" +
 100                     "<set value='12.73' />" +
 101                     "<set value='12.41' />" +
 102                     "<set value='11.83' />" +
 103                     "<set value='14.06' />" +
 104                     "<set value='15.94' />" +
 105                     "<set value='22.97' />" +
 106                     "<set value='26.79' />" +
 107                     "<set value='20.35' />" +
 108                     "<set value='12.63' />" +
 109                   "</dataset>" +
 110                   "<dataset seriesName='Audited Communication' color='Fad35e' >" +
 111                     "<set value='5.49'/>" +
 112                     "<set value='8.05'/>" +
 113                     "<set value='15.36'/>" +
 114                     "<set value='21.23'/>" +
 115                     "<set value='23.48' />" +
 116                     "<set value='15.49' />" +
 117                     "<set value='26.8' />" +
 118                     "<set value='30.54' />" +
 119                     "<set value='64' />" +
 120                     "<set value='75' />" +
 121                     "<set value='63' />" +
 122                     "<set value='34' />" +
 123                   "</dataset>" +
 124                   "<trendlines>" +
 125                     "<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>" +
 126                   "</trendlines>" +
 127                 "</graph>";
 128
 129         myChart.setDataXML(chartData);
 130         myChart.render(tabId + "-" + "chartdiv" + chartId);
 131   }
 132