Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4 lines
113 KiB

!function(a){"use strict";function b(a){var b=this.internal=new c(this);b.loadConfig(a),b.init(),function d(a,b,c){for(var e in a)b[e]=a[e].bind(c),Object.keys(a[e]).length>0&&d(a[e],b[e],c)}(e,this,this)}function c(b){var c=this;c.d3=a.d3?a.d3:"undefined"!=typeof require?require("d3"):void 0,c.api=b,c.config=c.getDefaultConfig(),c.data={},c.cache={},c.axes={}}function d(a,b){function c(a,b){a.attr("transform",function(a){return"translate("+Math.ceil(b(a)+s)+", 0)"})}function d(a,b){a.attr("transform",function(a){return"translate(0,"+Math.ceil(b(a))+")"})}function e(a){var b=a[0],c=a[a.length-1];return c>b?[b,c]:[c,b]}function f(a){var b,c,d=[];if(a.ticks)return a.ticks.apply(a,k);for(c=a.domain(),b=Math.ceil(c[0]);b<c[1];b++)d.push(b);return d.length>0&&d[0]>0&&d.unshift(d[0]-(d[1]-d[0])),d}function g(){var a,c=m.copy();return b&&(a=m.domain(),c.domain([a[0],a[1]-1])),c}function h(a){return j?j(a):a}function i(i){i.each(function(){function i(a){var b=m(a)+s;return B[0]<b&&b<B[1]?o:0}var j,k,t=a.select(this),u=this.__chart__||m,v=this.__chart__=g(),w=r?r:f(v),x=t.selectAll(".tick").data(w,v),y=x.enter().insert("g",".domain").attr("class","tick").style("opacity",1e-6),z=x.exit().remove(),A=a.transition(x).style("opacity",1),B=m.rangeExtent?m.rangeExtent():e(m.range()),C=t.selectAll(".domain").data([0]),D=(C.enter().append("path").attr("class","domain"),a.transition(C));y.append("line"),y.append("text");var E=y.select("line"),F=A.select("line"),G=x.select("text").text(h),H=y.select("text"),I=A.select("text");switch(b?(s=Math.ceil((v(1)-v(0))/2),k=l?0:s):s=k=0,n){case"bottom":j=c,E.attr("y2",o),H.attr("y",Math.max(o,0)+q),F.attr("x1",k).attr("x2",k).attr("y2",i),I.attr("x",0).attr("y",Math.max(o,0)+q),G.attr("dy",".71em").style("text-anchor","middle"),D.attr("d","M"+B[0]+","+p+"V0H"+B[1]+"V"+p);break;case"top":j=c,E.attr("y2",-o),H.attr("y",-(Math.max(o,0)+q)),F.attr("x2",0).attr("y2",-o),I.attr("x",0).attr("y",-(Math.max(o,0)+q)),G.attr("dy","0em").style("text-anchor","middle"),D.attr("d","M"+B[0]+","+-p+"V0H"+B[1]+"V"+-p);break;case"left":j=d,E.attr("x2",-o),H.attr("x",-(Math.max(o,0)+q)),F.attr("x2",-o).attr("y2",0),I.attr("x",-(Math.max(o,0)+q)).attr("y",s),G.attr("dy",".32em").style("text-anchor","end"),D.attr("d","M"+-p+","+B[0]+"H0V"+B[1]+"H"+-p);break;case"right":j=d,E.attr("x2",o),H.attr("x",Math.max(o,0)+q),F.attr("x2",o).attr("y2",0),I.attr("x",Math.max(o,0)+q).attr("y",0),G.attr("dy",".32em").style("text-anchor","start"),D.attr("d","M"+p+","+B[0]+"H0V"+B[1]+"H"+p)}if(v.rangeBand){var J=v,K=J.rangeBand()/2;u=v=function(a){return J(a)+K}}else u.rangeBand?u=v:z.call(j,v);y.call(j,u),A.call(j,v)})}var j,k,l,m=a.scale.linear(),n="bottom",o=6,p=6,q=3,r=null,s=0,t=!0;return i.scale=function(a){return arguments.length?(m=a,i):m},i.orient=function(a){return arguments.length?(n=a in{top:1,right:1,bottom:1,left:1}?a+"":"bottom",i):n},i.tickFormat=function(a){return arguments.length?(j=a,i):j},i.tickCentered=function(a){return arguments.length?(l=a,i):l},i.tickOffset=function(){return s},i.ticks=function(){return arguments.length?(k=arguments,i):k},i.tickCulling=function(a){return arguments.length?(t=a,i):t},i.tickValues=function(a){if("function"==typeof a)r=function(){return a(m.domain())};else{if(!arguments.length)return r;r=a}return i},i}var e,f,g={version:"0.3.0"};g.generate=function(a){return new b(a)},g.chart={fn:b.prototype,internal:{fn:c.prototype}},e=g.chart.fn,f=g.chart.internal.fn,f.init=function(){var a=this,b=a.config;if(a.initParams(),b[_])a.convertUrlToData(b[_],b[db],b[eb],a.initWithData);else if(b[ab])a.initWithData(a.convertJsonToData(b[ab],b[eb]));else if(b[bb])a.initWithData(a.convertRowsToData(b[bb]));else{if(!b[cb])throw Error("url or json or rows or columns is required.");a.initWithData(a.convertColumnsToData(b[cb]))}},f.initParams=function(){var a=this,b=a.d3,c=a.config;a.clipId="c3-"+ +new Date+"-clip",a.clipIdForXAxis=a.clipId+"-xaxis",a.clipIdForYAxis=a.clipId+"-yaxis",a.clipPath=a.getClipPath(a.clipId),a.clipPathForXAxis=a.getClipPath(a.clipIdForXAxis),a.clipPathForYAxis=a.getClipPath(a.clipIdFo
}),0!==e.length)for(d=e[0],g&&k[d]&&k[d].forEach(function(a,b){k[d][b]=a>0?a:0}),c=1;c<e.length;c++)f=e[c],k[f]&&k[f].forEach(function(a,b){h.getAxisId(f)!==h.getAxisId(d)||!k[d]||g&&0>+a||(k[d][b]+=+a)});return h.d3.max(Object.keys(k).map(function(a){return h.d3.max(k[a])}))},f.getYDomain=function(a,b){var c,d,e,f,g,h,i,j,k,l,m=this,n=m.config,o=a.filter(function(a){return m.getAxisId(a.id)===b}),p="y2"===b?n[$b]:n[Rb],q="y2"===b?n[Zb]:n[Qb],r=qe(p)?p:m.getYDomainMin(o),s=qe(q)?q:m.getYDomainMax(o),t="y2"===b?n[_b]:n[Sb],u=m.hasType("bar",o)&&n[vc]||m.hasType("area",o)&&n[wc],v=m.hasDataLabel()&&n[vb],w=m.hasDataLabel()&&!n[vb];return 0===o.length?"y2"===b?m.y2.domain():m.y.domain():(r===s&&(0>r?s=0:r=0),k=r>=0&&s>=0,l=0>=r&&0>=s,u&&(k&&(r=0),l&&(s=0)),c=Math.abs(s-r),d=e=f=.1*c,t&&(g=Math.max(Math.abs(r),Math.abs(s)),s=g-t,r=t-g),v?(h=m.getDataLabelLength(r,s,b,"width"),i=xe(m.y.range()),j=[h[0]/i,h[1]/i],e+=c*(j[1]/(1-j[0]-j[1])),f+=c*(j[0]/(1-j[0]-j[1]))):w&&(h=m.getDataLabelLength(r,s,b,"height"),e+=h[1],f+=h[0]),"y"===b&&n[Wb]&&(e=m.getAxisPadding(n[Wb],"top",d,c),f=m.getAxisPadding(n[Wb],"bottom",d,c)),"y2"===b&&n[dc]&&(e=m.getAxisPadding(n[dc],"top",d,c),f=m.getAxisPadding(n[dc],"bottom",d,c)),u&&(k&&(f=r),l&&(e=-s)),[r-f,s+e])},f.getXDomainMin=function(a){var b=this,c=b.config;return c[Kb]?b.isTimeSeries()?this.parseDate(c[Kb]):c[Kb]:b.d3.min(a,function(a){return b.d3.min(a.values,function(a){return a.x})})},f.getXDomainMax=function(a){var b=this,c=b.config;return c[Jb]?b.isTimeSeries()?this.parseDate(c[Jb]):c[Jb]:b.d3.max(a,function(a){return b.d3.max(a.values,function(a){return a.x})})},f.getXDomainPadding=function(a){var b,c,d,e,f=this,g=f.config,h=this.getEdgeX(a),i=h[1]-h[0];return f.isCategorized()?c=0:f.hasType("bar",a)?(b=f.getMaxDataCount(),c=b>1?i/(b-1)/2:.5):c=.01*i,"object"==typeof g[Lb]&&ze(g[Lb])?(d=qe(g[Lb].left)?g[Lb].left:c,e=qe(g[Lb].right)?g[Lb].right:c):d=e="number"==typeof g[Lb]?g[Lb]:c,{left:d,right:e}},f.getXDomain=function(a){var b=this,c=[b.getXDomainMin(a),b.getXDomainMax(a)],d=c[0],e=c[1],f=b.getXDomainPadding(a),g=0,h=0;return d-e!==0||b.isCategorized()||(d=b.isTimeSeries()?new Date(.5*d.getTime()):-.5,e=b.isTimeSeries()?new Date(1.5*e.getTime()):.5),(d||0===d)&&(g=b.isTimeSeries()?new Date(d.getTime()-f.left):d-f.left),(e||0===e)&&(h=b.isTimeSeries()?new Date(e.getTime()+f.right):e+f.right),[g,h]},f.updateXDomain=function(a,b,c,d){var e=this,f=e.config;return c&&(e.x.domain(d?d:e.d3.extent(e.getXDomain(a))),e.orgXDomain=e.x.domain(),f[o]&&e.zoom.scale(e.x).updateScaleExtent(),e.subX.domain(e.x.domain()),e.brush&&e.brush.scale(e.subX)),b&&(e.x.domain(d?d:!e.brush||e.brush.empty()?e.orgXDomain:e.brush.extent()),f[o]&&e.zoom.scale(e.x).updateScaleExtent()),e.x.domain()},f.isX=function(a){var b=this,c=b.config;return c[y]&&a===c[y]||ze(c[z])&&Be(c[z],a)},f.isNotX=function(a){return!this.isX(a)},f.getXKey=function(a){var b=this,c=b.config;return c[y]?c[y]:ze(c[z])?c[z][a]:null},f.getXValuesOfXKey=function(a,b){var c,d=this,e=b&&ze(b)?d.mapToIds(b):[];return e.forEach(function(b){d.getXKey(b)===a&&(c=d.data.xs[b])}),c},f.getXValue=function(a,b){var c=this;return a in c.data.xs&&c.data.xs[a]&&qe(c.data.xs[a][b])?c.data.xs[a][b]:b},f.getOtherTargetXs=function(){var a=this,b=Object.keys(a.data.xs);return b.length?a.data.xs[b[0]]:null},f.getOtherTargetX=function(a){var b=this.getOtherTargetXs();return b&&a<b.length?b[a]:null},f.addXs=function(a){var b=this;Object.keys(a).forEach(function(c){b.config[z][c]=a[c]})},f.isSingleX=function(a){return 1===this.d3.set(Object.keys(a).map(function(b){return a[b]})).size()},f.addName=function(a){var b,c=this;return a&&(b=c.config[D][a.id],a.name=b?b:a.id),a},f.getValueOnIndex=function(a,b){var c=a.filter(function(a){return a.index===b});return c.length?c[0]:null},f.updateTargetX=function(a,b){var c=this;a.forEach(function(a){a.values.forEach(function(d,e){d.x=c.generateTargetX(b[e],a.id,e)}),c.data.xs[a.id]=b})},f.updateTargetXs=function(a,b){var c=this;a.forEach(function(a){b[a.id]&&c.updateTargetX([a],b[a.id])})},f.generateTargetX=function(a,b,c){var d
a.main.select("line."+pe[Vd]).attr("x1",b[vb]?0:-10).attr("x2",b[vb]?a.width:-10).attr("y1",b[vb]?-10:0).attr("y2",b[vb]?-10:a.height)},f.generateGridData=function(a,b){var c,d,e,f,g=this,h=[],i=g.main.select("."+pe[_d]).selectAll(".tick").size();if("year"===a)for(c=g.getXDomain(),d=c[0].getFullYear(),e=c[1].getFullYear(),f=d;e>=f;f++)h.push(new Date(f+"-01-01 00:00:00"));else h=b.ticks(10),h.length>i&&(h=h.filter(function(a){return(""+a).indexOf(".")<0}));return h},f.getGridFilterToRemove=function(a){return a?function(b){var c=!1;return[].concat(a).forEach(function(d){("value"in d&&b.value===a.value||"class"in d&&b.class===a.class)&&(c=!0)}),c}:function(){return!0}},f.removeGridLines=function(a,b){var c=this,d=c.config,e=c.getGridFilterToRemove(a),f=function(a){return!e(a)},g=b?pe[Ud]:pe[Zd],h=b?pe[Td]:pe.ygridLine;c.main.select("."+g).selectAll("."+h).filter(e).transition().duration(d[x]).style("opacity",0).remove(),b?d[hc]=d[hc].filter(f):d[jc]=d[jc].filter(f)},f.initTooltip=function(){var a,b=this,c=b.config;if(b.tooltip=b.selectChart.style("position","relative").append("div").style("position","absolute").style("pointer-events","none").style("z-index","10").style("display","none"),c[Xc]){if(b.isTimeSeries()&&se(c[Yc])){for(c[Yc]=b.parseDate(c[Yc]),a=0;a<b.data.targets[0].values.length&&b.data.targets[0].values[a].x-c[Yc]!==0;a++);c[Yc]=a}b.tooltip.html(c[Wc].call(b,b.data.targets.map(function(a){return b.addName(a.values[c[Yc]])}),b.getXAxisTickFormat(),b.getYFormat(b.hasArcType()),b.color)),b.tooltip.style("top",c[Zc].top).style("left",c[Zc].left).style("display","block")}},f.getTooltipContent=function(a,b,c,d){var e,f,g,h,i,j,k=this,l=k.config,m=l[Tc]||b,n=l[Uc]||function(a){return a},o=l[Vc]||c;for(f=0;f<a.length;f++)a[f]&&(a[f].value||0===a[f].value)&&(e||(g=m?m(a[f].x):a[f].x,e="<table class='"+pe[yd]+"'>"+(g||0===g?"<tr><th colspan='2'>"+g+"</th></tr>":"")),i=n(a[f].name),h=o(a[f].value,a[f].ratio,a[f].id,a[f].index),j=k.levelColor?k.levelColor(a[f].value):d(a[f].id),e+="<tr class='"+pe[zd]+"-"+a[f].id+"'>",e+="<td class='name'><span style='background-color:"+j+"'></span>"+i+"</td>",e+="<td class='value'>"+h+"</td>",e+="</tr>");return e+"</table>"},f.showTooltip=function(a,b){var c,d,e,f,g,h,i,j=this,k=j.config,l=j.hasArcType(),m=a.filter(function(a){return a&&qe(a.value)});0!==m.length&&k[Rc]&&(j.tooltip.html(k[Wc].call(j,a,j.getXAxisTickFormat(),j.getYFormat(l),j.color)).style("display","block"),c=j.tooltip.property("offsetWidth"),d=j.tooltip.property("offsetHeight"),l?(f=j.width/2+b[0],h=j.height/2+b[1]+20):(k[vb]?(e=j.getSvgLeft(),f=e+b[0]+100,g=f+c,i=j.getCurrentWidth()-j.getCurrentPaddingRight(),h=j.x(m[0].x)+20):(e=j.getSvgLeft(),f=e+j.getCurrentPaddingLeft()+j.x(m[0].x)+20,g=f+c,i=e+j.getCurrentWidth()-j.getCurrentPaddingRight(),h=b[1]+15),g>i&&(f-=g-i),h+d>j.getCurrentHeight()&&h>d+30&&(h-=d+30)),j.tooltip.style("top",h+"px").style("left",f+"px"))},f.hideTooltip=function(){this.tooltip.style("display","none")},f.initLegend=function(){var a=this;a.legend=a.svg.append("g").attr("transform",a.getTranslate("legend")),a.config[lb]||(a.legend.style("visibility","hidden"),a.hiddenLegendIds=a.mapToIds(a.data.targets)),a.updateLegend(a.mapToIds(a.data.targets),{withTransform:!1,withTransitionForTransform:!1,withTransition:!1})},f.updateSizeForLegend=function(a,b){var c=this,d=c.config,e={top:c.isLegendTop?c.getCurrentPaddingTop()+d[pb]+5.5:c.currentHeight-a-c.getCurrentPaddingBottom()-d[pb],left:c.isLegendLeft?c.getCurrentPaddingLeft()+d[ob]+.5:c.currentWidth-b-c.getCurrentPaddingRight()-d[ob]+.5};c.margin3={top:c.isLegendRight?0:c.isLegendInset?e.top:c.currentHeight-a,right:0/0,bottom:0,left:c.isLegendRight?c.currentWidth-b:c.isLegendInset?e.left:0}},f.transformLegend=function(a){var b=this;(a?b.legend.transition():b.legend).attr("transform",b.getTranslate("legend"))},f.updateLegendStep=function(a){this.legendStep=a},f.updateLegendItemWidth=function(a){this.legendItemWidth=a},f.updateLegendItemHeight=function(a){this.legendItemHeight=a},f.getLegendWidth=function(){var a=this;return a.config[lb]?a.isLegendRigh
}),i.style("opacity",0).transition().duration(c).attr("d",k).style("fill",n.color).style("opacity",n.orgAreaOpacity),i.exit().transition().duration(d).style("opacity",0).remove()))},f.redrawForBrush=function(){var a=this,b=a.x;a.redraw({withTransition:!1,withY:!1,withSubchart:!1,withUpdateXDomain:!0}),a.config[ib].call(a.api,b.orgDomain())},f.transformContext=function(a,b){var c,d=this;b&&b.axisSubX?c=b.axisSubX:(c=d.context.select("."+pe[_d]),a&&(c=c.transition())),d.context.attr("transform",d.getTranslate("context")),c.attr("transform",d.getTranslate("subx"))},f.initZoom=function(){var a=this,b=a.d3,c=a.config;a.zoom=b.behavior.zoom().on("zoomstart",function(){a.zoom.altDomain=b.event.sourceEvent.altKey?a.x.orgDomain():null}).on("zoom",function(){a.redrawForZoom.call(a)}),a.zoom.scale=function(a){return c[vb]?this.y(a):this.x(a)},a.zoom.orgScaleExtent=function(){var b=c[p]?c[p]:[1,10];return[b[0],Math.max(a.getMaxDataCount()/b[1],b[1])]},a.zoom.updateScaleExtent=function(){var b=xe(a.x.orgDomain())/xe(a.orgXDomain),c=this.orgScaleExtent();return this.scaleExtent([c[0]*b,c[1]*b]),this}},f.updateZoom=function(){var a=this,b=a.config[o]?a.zoom:function(){};a.main.select("."+a.CLASS[td]).call(b),a.main.selectAll("."+a.CLASS[pd]).call(b)},f.redrawForZoom=function(){var a=this,b=a.d3,c=a.config,d=a.zoom,e=a.x,f=a.orgXDomain;if(c[o]&&0!==a.filterTargetsToShow(a.data.targets).length){if("mousemove"===b.event.sourceEvent.type&&d.altDomain)return e.domain(d.altDomain),void d.scale(e).updateScaleExtent();a.isCategorized()&&e.orgDomain()[0]===f[0]&&e.domain([f[0]-1e-10,e.orgDomain()[1]]),a.redraw({withTransition:!1,withY:!1,withSubchart:!1}),"mousemove"===b.event.sourceEvent.type&&(a.cancelClick=!0),c[r].call(a.api,e.orgDomain())}},f.generateColor=function(){var a=this,b=a.config,c=a.d3,d=b[N],e=ze(b[jb])?b[jb]:c.scale.category10().range(),f=b[M],g=[];return function(a){var b,c=a.id||a;return d[c]instanceof Function?b=d[c](a):d[c]?b=d[c]:(g.indexOf(c)<0&&g.push(c),b=e[g.indexOf(c)%e.length],d[c]=b),f instanceof Function?f(b,a):b}},f.generateLevelColor=function(){var a=this,b=a.config,c=b[jb],d=b[kb],e="value"===d.unit,f=d.values&&d.values.length?d.values:[],g=d.max||100;return ze(b[kb])?function(a){var b,d,h=c[c.length-1];for(b=0;b<f.length;b++)if(d=e?a:100*a/g,d<f[b]){h=c[b];break}return h}:null},f.getYFormat=function(a){var b=this,c=a&&!b.hasType("gauge")?b.defaultArcValueFormat:b.yFormat,d=a&&!b.hasType("gauge")?b.defaultArcValueFormat:b.y2Format;return function(a,e,f){var g="y2"===b.getAxisId(f)?d:c;return g.call(b,a,e)}},f.yFormat=function(a){var b=this,c=b.config,d=c[Ub]?c[Ub]:b.defaultValueFormat;return d(a)},f.y2Format=function(a){var b=this,c=b.config,d=c[bc]?c[bc]:b.defaultValueFormat;return d(a)},f.defaultValueFormat=function(a){return qe(a)?+a:""},f.defaultArcValueFormat=function(a,b){return(100*b).toFixed(1)+"%"},f.formatByAxisId=function(a){var b=this,c=b.config[J],d=function(a){return qe(a)?+a:""};return c.format?d=c.format:"object"==typeof c.format&&c.format[a]&&(d=c.format[a]),d},f.hasCaches=function(a){for(var b=0;b<a.length;b++)if(!(a[b]in this.cache))return!1;return!0},f.addCache=function(a,b){this.cache[a]=this.cloneTarget(b)},f.getCaches=function(a){var b,c=[];for(b=0;b<a.length;b++)a[b]in this.cache&&c.push(this.cloneTarget(this.cache[a[b]]));return c};var $c="target",_c="chart ",ad="chartLine",bd="chartLines",cd="chartBar",dd="chartBars",ed="chartText",fd="chartTexts",gd="chartArc",hd="chartArcs",id="chartArcsTitle",jd="chartArcsBackground",kd="chartArcsGaugeUnit",ld="chartArcsGaugeMax",md="chartArcsGaugeMin",nd="selectedCircle",od="selectedCircles",pd="eventRect",qd="eventRects",rd="eventRectsSingle",sd="eventRectsMultiple",td="zoomRect",ud="brush",vd="focused",wd="region",xd="regions",yd="tooltip",zd="tooltipName",Ad="shape",Bd="shapes",Cd="line",Dd="lines",Ed="bar",Fd="bars",Gd="circle",Hd="circles",Id="arc",Jd="arcs",Kd="area",Ld="areas",Md="empty",Nd="text",Od="texts",Pd="gaugeValue",Qd="grid",Rd="xgrid",Sd="xgrids",Td="xgridLine",Ud="xgridLines",Vd="xgridFocus",Wd="ygrid",Xd="ygrids",Yd="ygridLine",Z