1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
Type.registerNamespace("Sys.Extended.UI"),Sys.Extended.UI.AreaChart=function(t){Sys.Extended.UI.AreaChart.initializeBase(this,[t]);var i=this.get_id();i=i.replace("_ctl00",""),this._parentDiv=document.getElementById(i+"__ParentDiv"),this._displayValues=!0,this._chartWidth="300",this._chartHeight="300",this._chartTitle="",this._categoriesAxis="",this._series=null,this._chartType=Sys.Extended.UI.AreaChartType.Basic,this._theme="AreaChart",this._valueAxisLines=9,this._chartTitleColor="",this._valueAxisLineColor="",this._categoryAxisLineColor="",this._baseLineColor="",this.yMax=0,this.yMin=0,this.roundedTickRange=0,this.startX=0,this.startY=0,this.endX=0,this.endY=0,this.xInterval=0,this.yInterval=0,this.arrXAxis,this.arrXAxisLength=0,this.charLength=3.5,this.arrCombinedData=null},Sys.Extended.UI.AreaChart.prototype={initialize:function(){if(Sys.Extended.UI.AreaChart.callBaseMethod(this,"initialize"),!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"))throw"Current version of browser does not support SVG.";0==this._valueAxisLines&&(this._valueAxisLines=9),this.generateAreaChart()},dispose:function(){Sys.Extended.UI.AreaChart.callBaseMethod(this,"dispose")},generateAreaChart:function(){this.arrXAxis=this._categoriesAxis.split(","),this.arrXAxisLength=this.arrXAxis.length,this.calculateMinMaxValues(),this.calculateInterval(),this.calculateValueAxis();var t=this.initializeSVG();t+=String.format('<text x="{0}" y="{1}" id="ChartTitle" style="fill:{3}">{2}</text>',parseInt(this._chartWidth)/2-this._chartTitle.length*this.charLength,5*parseInt(this._chartHeight)/100,this._chartTitle,this._chartTitleColor),t+=this.drawBackgroundHorizontalLines(),t+=this.drawBackgroundVerticalLines(),t+=this.drawBaseLines(),t+=this.drawLegendArea(),t+=this.drawAxisValues(),this._parentDiv.innerHTML=t,this.drawAreas()},calculateInterval:function(){this.startX=10*this._chartWidth/100+.5,this.endX=parseInt(this._chartWidth)-4.5,this.yMin>=0?this.startY=Math.round(parseInt(this._chartHeight)-24*parseInt(this._chartHeight)/100)+.5:this.startY=Math.round(parseInt(this._chartHeight)-12*parseInt(this._chartHeight)/100)/2+.5,this.yInterval=this.startY/(this._valueAxisLines+1)},calculateMinMaxValues:function(){var t,i,e;if(this._chartType==Sys.Extended.UI.AreaChartType.Basic)for(var s=0;s<this._series.length;s++)e=this._series[s].Data,t=Math.max.apply(null,e),i=Math.min.apply(null,e),0==s?(this.yMax=t,this.yMin=i):(t>this.yMax&&(this.yMax=t),i<this.yMin&&(this.yMin=i));else{for(var s=0;s<this._series.length;s++){e=new Array;for(var r=0;r<this._series[s].Data.length;r++)e[r]=this._series[s].Data[r];if(null==this.arrCombinedData)this.arrCombinedData=e;else for(r=0;r<e.length;r++)this.arrCombinedData[r]=parseFloat(this.arrCombinedData[r])+parseFloat(e[r])}for(var s=0;s<this._series.length;s++)i=Math.min.apply(null,this._series[s].Data),0==s?this.yMin=i:i<this.yMin&&(this.yMin=i);this.yMax=Math.max.apply(null,this.arrCombinedData)}this.yMin<0&&(this._valueAxisLines=Math.round(this._valueAxisLines/2))},calculateValueAxis:function(){var t,i,e,s;t=this.yMin>=0?this.yMax:this.yMax>Math.abs(this.yMin)?this.yMax:Math.abs(this.yMin),i=t/(this._valueAxisLines-1),i<1?this.roundedTickRange=i.toFixed(1):(e=Math.ceil(Math.log(i)/Math.log(10)-1),s=Math.pow(10,e),this.roundedTickRange=Math.ceil(i/s)*s),this.startX=this.startX+(10*this.roundedTickRange*this._valueAxisLines/10).toString().length*this.charLength},drawBackgroundHorizontalLines:function(){for(var t="",i=1;i<=this._valueAxisLines;i++)t+=String.format('<path d="M{0} {2} {1} {2}" id="HorizontalLine" style="stroke:{3}"></path>',this.startX,this.endX,this.startY-this.yInterval*i,this._categoryAxisLineColor);if(this.yMin<0)for(var i=1;i<=this._valueAxisLines;i++)t+=String.format('<path d="M{0} {2} {1} {2}" id="HorizontalLine" style="stroke:{3}"></path>',this.startX,this.endX,this.startY+this.yInterval*i,this._categoryAxisLineColor);return t},drawBackgroundVerticalLines:function(){var t="";this.xInterval=Math.round((parseInt(this._chartWidth)-this.startX)/this.arrXAxisLength);for(var i=0;i<this.arrXAxisLength;i++)t+=String.format('<path id="VerticalLine" d="M{0} {1} {0} {2}" style="stroke:{3}"></path>',parseInt(this._chartWidth)-5-this.xInterval*i,this.startY-this.yInterval*this._valueAxisLines,this.startY,this._valueAxisLineColor);if(this.yMin<0)for(var i=0;i<this.arrXAxisLength;i++)t+=String.format('<path id="VerticalLine" d="M{0} {1} {0} {2}" style="stroke:{3}"></path>',parseInt(this._chartWidth)-5-this.xInterval*i,this.startY+this.yInterval*this._valueAxisLines,this.startY,this._valueAxisLineColor);return t},drawBaseLines:function(){var t="";t+=String.format('<path d="M{0} {1} {2} {1}" id="BaseLine" style="stroke:{3}"></path>',this.startX,this.startY,this.endX,this._baseLineColor),t+=String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>',this.startX,this.startY-this.yInterval*this._valueAxisLines,this.startY,this._baseLineColor),t+=String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>',this.startX,this.startY,this.startY+4,this._baseLineColor);for(var i=0;i<this.arrXAxisLength;i++)t+=String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>',parseInt(this._chartWidth)-5-this.xInterval*i,this.startY,this.startY+4,this._baseLineColor);for(var i=0;i<=this._valueAxisLines;i++)t+=String.format('<path d="M{0} {2} {1} {2}" id="BaseLine" style="stroke:{3}"></path>',this.startX-4,this.startX,this.startY-this.yInterval*i,this._baseLineColor);if(this.yMin<0){t+=String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>',this.startX,this.startY+this.yInterval*this._valueAxisLines,this.startY,this._baseLineColor);for(var i=1;i<=this._valueAxisLines;i++)t+=String.format('<path d="M{0} {2} {1} {2}" id="BaseLine" style="stroke:{3}"></path>',this.startX-4,this.startX,this.startY+this.yInterval*i,this._baseLineColor)}return t},drawLegendArea:function(){for(var t="",i=82*parseInt(this._chartHeight)/100+5,e=7.5,s=7.5,r=5,a=0,h=0;h<this._series.length;h++)a+=this._series[h].Name.length;var n=Math.round(5*a/2)+Math.round((e+2*r)*this._series.length),o=!1;n>parseInt(this._chartWidth)/2&&(n/=2,o=!0),t+="<g>",t+=String.format('<path d="M{0} {1} {2} {1} {2} {3} {0} {3} z" id="LegendArea" stroke=""></path>',50*parseInt(this._chartWidth)/100-n/2,i,Math.round(50*parseInt(this._chartWidth)/100+5*a)+Math.round((e+2*r)*this._series.length),Math.round(97.5*parseInt(this._chartHeight)/100));for(var l=40*parseInt(this._chartWidth)/100-n/2+e+r,d=l,c=40*parseInt(this._chartWidth)/100-n/2,_=c,h=0;h<this._series.length;h++)o&&h==Math.round(this._series.length/2)&&(l=40*parseInt(this._chartWidth)/100-n/2+e+r,d=l,c=40*parseInt(this._chartWidth)/100-n/2,_=c,i=89*parseInt(this._chartHeight)/100+5,o=!1),c=_,l=d,t+=String.format('<path d="M{0} {1} {2} {1} {2} {3} {0} {3} z" id="Legend{4}" style="fill:{5}"></path>',c,i+s,c+e,i+15,h+1,this._series[h].AreaColor),t+=String.format('<text x="{0}" y="{1}" id="LegendText">{2}</text>',l,i+15,this._series[h].Name),this._series[h].Name.length>10?(_=c+5*this._series[h].Name.length+e+2*r,d=l+5*this._series[h].Name.length+e+2*r):(_=_+6*this._series[h].Name.length+e+2*r,d=d+6*this._series[h].Name.length+e+2*r);return t+="</g>"},drawAxisValues:function(){for(var t="",i=0,e=0;e<this.arrXAxisLength;e++)i=5.5*(10*this.arrXAxis[e].toString().length*e/10).toString().length,t+=String.format('<text id="SeriesAxis" x="{0}" y="{1}" fill-opacity="1">{2}</text>',Math.round(this.startX+10*this.xInterval*e/10+50*this.xInterval/100-i),this.startY+Math.round(65*this.yInterval/100),this.arrXAxis[e]);for(var e=0;e<=this._valueAxisLines;e++)i=5.5*(10*this.roundedTickRange*e/10).toString().length,t+=String.format('<text id="ValueAxis" x="{0}" y="{1}">{2}</text>',this.startX-i-15,this.startY-10*this.yInterval*e/10+3.5,10*this.roundedTickRange*e/10);if(this.yMin<0)for(var e=1;e<=this._valueAxisLines;e++)i=5.5*(10*this.roundedTickRange*e/10).toString().length,t+=String.format('<text id="ValueAxis" x="{0}" y="{1}">-{2}</text>',this.startX-i-19,this.startY+10*this.yInterval*e/10,10*this.roundedTickRange*e/10);return t},initializeSVG:function(){var t=String.format('<?xml-stylesheet type="text/css" href="{0}.css"?>',this._theme);return t+=String.format('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{0}" height="{1}" style="position: relative; display: block;">',this._chartWidth,this._chartHeight),t+="<defs>",t+='<linearGradient gradientTransform="rotate(0)">',t+='<stop offset="0%" id="LinearGradient1"></stop>',t+='<stop offset="25%" id="LinearGradient2"></stop>',t+='<stop offset="100%" id="LinearGradient3"></stop></linearGradient>',t+="</defs>",t+=String.format('<path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" d="M5 {0} {1} {0} {1} {2} 5 {2} z"></path>',1*parseInt(this._chartHeight)/10+5,parseInt(this._chartWidth)-5,parseInt(this._chartHeight)-1*parseInt(this._chartHeight)/10),t+=String.format('<path id="ChartBackGround" stroke="" d="M0 0 {0} 0 {0} {1} 0 {1} z"></path>',this._chartWidth,this._chartHeight),t+=String.format('<path fill="#ffffff" stroke-opacity="1" fill-opacity="0" stroke-linejoin="round" stroke-linecap="square" stroke="" d="M5 {0} {1} {0} {1} {2} 5 {2} z"></path>',1*parseInt(this._chartHeight)/10+5,parseInt(this._chartWidth)-5,parseInt(this._chartHeight)-1*parseInt(this._chartHeight)/10)},drawAreas:function(){for(var t=this.get_displayValues(),i="",e=new Array,s=new Array,r=new Array,a=new Array,h=0;h<this.arrXAxisLength;h++)for(var n=0;n<this._series.length;n++){if(e[n]=0,this._chartType==Sys.Extended.UI.AreaChartType.Stacked)for(var o=0;o<=n;o++)e[n]=parseFloat(e[n])+parseFloat(this._series[o].Data[h]);else e[n]=parseFloat(this._series[n].Data[h]);0==h?a[n]=String.format("{0} {1} {0} {2} ",this.startX+this.xInterval/2,this.startY,this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange))):h==this.arrXAxisLength-1?a[n]=a[n]+String.format("{0} {1} {2} {3} {2} {4} ",s[n],r[n],this.startX+this.xInterval*h+this.xInterval/2,this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange)),this.startY):a[n]=a[n]+String.format("{0} {1} ",this.startX+this.xInterval*h+this.xInterval/2,this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange))),i+=e[n]>0?String.format('<text id="LegendText" x="{0}" y="{1}">{2}</text>',this.startX+this.xInterval*h+50*this.xInterval/100-e[n].toString().length*this.charLength,this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange))-7.5,t?e[n]:""):String.format('<text id="LegendText" x="{0}" y="{1}">{2}</text>',this.startX+this.xInterval*h+50*this.xInterval/100-e[n].toString().length*this.charLength,this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange))+7.5,t?e[n]:""),s[n]=this.startX+this.xInterval*h+this.xInterval/2,r[n]=this.startY-Math.round(e[n]*(this.yInterval/this.roundedTickRange))}this._parentDiv.innerHTML=this._parentDiv.innerHTML+i;this._parentDiv.innerHTML;this._drawArea(a,0)},_drawArea:function(t,i){var e=this;e._parentDiv.innerHTML=e._parentDiv.innerHTML.replace("</svg>","")+String.format('<g><path id="AreaPath{1}" d="M{0} z" style="fill:{2};stroke:{2}"></path></g></svg>',t[i],i+1,e._series[i].AreaColor),i++,i<e._series.length&&setTimeout(function(){e._drawArea(t,i)},400)},drawArea:function(t,i,e){Sys.Extended.Deprecated("drawArea(me, areaPath, seriesIndex)"),this._drawArea(i,e)},get_displayValues:function(){return this._displayValues},set_displayValues:function(t){this._displayValues=t},get_chartWidth:function(){return this._chartWidth},set_chartWidth:function(t){this._chartWidth=t},get_chartHeight:function(){return this._chartHeight},set_chartHeight:function(t){this._chartHeight=t},get_chartTitle:function(){return this._chartTitle},set_chartTitle:function(t){this._chartTitle=t},get_categoriesAxis:function(){return this._categoriesAxis},set_categoriesAxis:function(t){this._categoriesAxis=t},get_clientSeries:function(){return this._series},get_ClientSeries:function(){return Sys.Extended.Deprecated("get_ClientSeries()","get_clientSeries()"),this.get_clientSeries()},set_clientSeries:function(t){this._series=t},set_ClientSeries:function(t){Sys.Extended.Deprecated("set_ClientSeries(value)","set_clientSeries(value)"),this.set_clientSeries(t)},get_chartType:function(){return this._chartType},set_chartType:function(t){this._chartType=t},get_theme:function(){return this._theme},set_theme:function(t){this._theme=t},get_valueAxisLines:function(){return this._valueAxisLines},set_valueAxisLines:function(t){this._valueAxisLines=t},get_chartTitleColor:function(){return this._chartTitleColor},set_chartTitleColor:function(t){this._chartTitleColor=t},get_valueAxisLineColor:function(){return this._valueAxisLineColor},set_valueAxisLineColor:function(t){this._valueAxisLineColor=t},get_categoryAxisLineColor:function(){return this._categoryAxisLineColor},set_categoryAxisLineColor:function(t){this._categoryAxisLineColor=t},get_baseLineColor:function(){return this._baseLineColor},set_baseLineColor:function(t){this._baseLineColor=t}},Sys.Extended.UI.AreaChart.registerClass("Sys.Extended.UI.AreaChart",Sys.Extended.UI.ControlBase),Sys.Extended.UI.AreaChartType=function(){throw Error.invalidOperation()},Sys.Extended.UI.AreaChartType.prototype={Basic:0,Stacked:1},Sys.Extended.UI.AreaChartType.registerEnum("Sys.Extended.UI.AreaChartType",!1); |