ui/src/main/webapp/static/fusion/sample/js/charts.js

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