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
return a[K]&&"asc"===a[K].toLowerCase()},f.orderTargets=function(a){var b=this,c=b.config,d=b.isOrderAsc(),e=b.isOrderDesc();return d||e?a.sort(function(a,b){var c=function(a,b){return a+Math.abs(b.value)},e=a.values.reduce(c,0),f=b.values.reduce(c,0);return d?f-e:e-f}):re(c[K])&&a.sort(c[K]),a},f.filterSameX=function(a,b){return this.d3.merge(a.map(function(a){return a.values})).filter(function(a){return a.x-b===0})},f.filterRemoveNull=function(a){return a.filter(function(a){return qe(a.value)})},f.hasDataLabel=function(){var a=this.config;return"boolean"==typeof a[J]&&a[J]?!0:"object"==typeof a[J]&&ze(a[J])?!0:!1},f.getDataLabelLength=function(a,b,c,d){var e=this,f=[0,0],g=1.3;return e.selectChart.select("svg").selectAll(".dummy").data([a,b]).enter().append("text").text(function(a){return e.formatByAxisId(c)(a)}).each(function(a,b){f[b]=this.getBoundingClientRect()[d]*g}).remove(),f},f.isNoneArc=function(a){return this.hasTarget(this.data.targets,a.id)},f.isArc=function(a){return"data"in a&&this.hasTarget(this.data.targets,a.data.id)},f.findSameXOfValues=function(a,b){var c,d=a[b].x,e=[];for(c=b-1;c>=0&&d===a[c].x;c--)e.push(a[c]);for(c=b;c<a.length&&d===a[c].x;c++)e.push(a[c]);return e},f.findClosestOfValues=function(a,b,c,d){var e,f=this,g=c?c:0,h=d?d:a.length-1,i=Math.floor((h-g)/2)+g,j=a[i],k=f.x(j.x)-b[f.config[vb]?1:0];return k>0?h=i:g=i,h-g===1||0===g&&0===h?(e=[],(a[g].x||0===a[g].x)&&(e=e.concat(f.findSameXOfValues(a,g))),(a[h].x||0===a[h].x)&&(e=e.concat(f.findSameXOfValues(a,h))),f.findClosest(e,b)):f.findClosestOfValues(a,b,g,h)},f.findClosestFromTargets=function(a,b){var c,d=this;return c=a.map(function(a){return d.findClosestOfValues(a.values,b)}),d.findClosest(c,b)},f.findClosest=function(a,b){var c,d,e=this;return a.forEach(function(a){var f=e.dist(a,b);(c>f||!c)&&(c=f,d=a)}),d},f.dist=function(a,b){var c=this,d=c.config,e="y"===c.getAxisId(a.id)?c.y:c.y2,f=d[vb]?1:0,g=d[vb]?0:1;return Math.pow(c.x(a.x)-b[f],2)+Math.pow(e(a.value)-b[g],2)},f.convertUrlToData=function(a,b,c,d){var e=this,f=b?b:"csv";e.d3.xhr(a,function(a,b){var g;g="json"===f?e.convertJsonToData(JSON.parse(b.response),c):e.convertCsvToData(b.response),d.call(e,g)})},f.convertCsvToData=function(a){var b,c=this.d3,d=c.csv.parseRows(a);return 1===d.length?(b=[{}],d[0].forEach(function(a){b[0][a]=null})):b=c.csv.parse(a),b},f.convertJsonToData=function(a,b){var c,d,e=this,f=[];return b?(c=b.value,b.x&&(c.push(b.x),e.config[y]=b.x),f.push(c),a.forEach(function(a){var b=[];c.forEach(function(c){var d=te(a[c])?null:a[c];b.push(d)}),f.push(b)}),d=e.convertRowsToData(f)):(Object.keys(a).forEach(function(b){f.push([b].concat(a[b]))}),d=e.convertColumnsToData(f)),d},f.convertRowsToData=function(a){var b,c,d=a[0],e={},f=[];for(b=1;b<a.length;b++){for(e={},c=0;c<a[b].length;c++){if(te(a[b][c]))throw new Error("Source data is missing a component at ("+b+","+c+")!");e[d[c]]=a[b][c]}f.push(e)}return f},f.convertColumnsToData=function(a){var b,c,d,e=[];for(b=0;b<a.length;b++)for(d=a[b][0],c=1;c<a[b].length;c++){if(te(e[c-1])&&(e[c-1]={}),te(a[b][c]))throw new Error("Source data is missing a component at ("+b+","+c+")!");e[c-1][d]=a[b][c]}return e},f.convertDataToTargets=function(a,b){var c,d=this,e=d.config,f=d.d3.keys(a[0]).filter(d.isNotX,d),g=d.d3.keys(a[0]).filter(d.isX,d);return f.forEach(function(c){var f=d.getXKey(c);d.isCustomX()||d.isTimeSeries()?g.indexOf(f)>=0?d.data.xs[c]=(b&&d.data.xs[c]?d.data.xs[c]:[]).concat(a.map(function(a){return a[f]}).filter(qe).map(function(a,b){return d.generateTargetX(a,c,b)})):e[y]?d.data.xs[c]=d.getOtherTargetXs():ze(e[z])&&(d.data.xs[c]=d.getXValuesOfXKey(f,d.data.targets)):d.data.xs[c]=a.map(function(a,b){return b})}),f.forEach(function(a){if(!d.data.xs[a])throw new Error('x is not defined for id = "'+a+'".')}),c=f.map(function(b,c){var f=e[C](b);return{id:f,id_org:b,values:a.map(function(a,g){var h=d.getXKey(b),i=a[h],j=d.generateTargetX(i,b,g);return d.isCustomX()&&d.isCategorized()&&0===c&&i&&(0===g&&(e[zb]=[]),e[zb].push(i)),(te(a[b])||d.data.xs[b].length<=g)&&(j=void 0),{x:j,value:null===a[b]||isNaN(a[b]
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.isLegendRight||a.isLegendInset?a.legendItemWidth*(a.legendStep+1):a.currentWidth:0},f.getLegendHeight=function(){var a=this,b=a.config,c=0;return b[lb]&&(c=a.isLegendRight?a.currentHeight:a.isLegendInset?b[qb]?Math.max(20,a.legendItemHeight)*(b[qb]+1):a.height:Math.max(20,a.legendItemHeight)*(a.legendStep+1)),c},f.opacityForLegend=function(a){var b=this;return a.classed(pe[je])?b.legendOpacityForHidden:1},f.opacityForUnfocusedLegend=function(a){var b=this;return a.classed(pe[je])?b.legendOpacityForHidden:.3},f.toggleFocusLegend=function(a,b){var c=this;c.legend.selectAll("."+pe[ge]).transition().duration(100).style("opacity",function(d){var e=c.d3.select(this);return a&&d!==a?b?c.opacityForUnfocusedLegend(e):c.opacityForLegend(e):b?c.opacityForLegend(e):c.opacityForUnfocusedLegend(e)})},f.revertLegend=function(){var a=this,b=a.d3;a.legend.selectAll("."+pe[ge]).transition().duration(100).style("opacity",function(){return a.opacityForLegend(b.select(this))})},f.showLegend=function(a){var b=this,c=b.config;c[lb]||(c[lb]=!0,b.legend.style("visibility","visible")),b.removeHiddenLegendIds(a),b.legend.selectAll(b.selectorLegends(a)).style("visibility","visible").transition().style("opacity",function(){return b.opacityForLegend(b.d3.select(this))})},f.hideLegend=function(a){var b=this,c=b.config;c[lb]&&ye(a)&&(c[lb]=!1,b.legend.style("visibility","hidden")),b.addHiddenLegendIds(a),b.legend.selectAll(b.selectorLegends(a)).style("opacity",0).style("visibility","hidden")},f.updateLegend=function(a,b,c){function d(b,c,d){function e(a,b){b||(f=(l-x-k)/2,w>f&&(f=(l-k)/2,x=0,E++)),C[a]=E,B[E]=q.isLegendInset?10:f,y[a]=x,x+=k}var f,g,h=q.getTextRect(b.textContent,pe[ge]),i=10*Math.ceil((h.width+t)/10),j=10*Math.ceil((h.height+s)/10),k=q.isLegendRight||q.isLegendInset?j:i,l=q.isLegendRight||q.isLegendInset?q.getLegendHeight():q.getLegendWidth();return d&&(x=0,E=0,u=0,v=0),r[lb]&&!q.isLegendToShow(c)?void(z[c]=A[c]=C[c]=y[c]=0):(z[c]=i,A[c]=j,(!u||i>=u)&&(u=i),(!v||j>=v)&&(v=j),g=q.isLegendRight||q.isLegendInset?v:u,void(r[ub]?(Object.keys(z).forEach(function(a){z[a]=u}),Object.keys(A).forEach(function(a){A[a]=v}),f=(l-g*a.length)/2,w>f?(x=0,E=0,a.forEach(function(a){
}},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",Zd="ygridLines",$d="axis",_d="axisX",ae="axisXLabel",be="axisY",ce="axisYLabel",de="axisY2",ee="axisY2Label",fe="legendBackground",ge="legendItem",he="legendItemEvent",ie="legendItemTile",je="legendItemHidden",ke="legendItemFocused",le="dragarea",me="EXPANDED",ne="SELECTED",oe="INCLUDED",pe=f.CLASS={};pe[$c]="c3-target",pe[_c]="c3-chart",pe[ad]="c3-chart-line",pe[bd]="c3-chart-lines",pe[cd]="c3-chart-bar",pe[dd]="c3-chart-bars",pe[ed]="c3-chart-text",pe[fd]="c3-chart-texts",pe[gd]="c3-chart-arc",pe[hd]="c3-chart-arcs",pe[id]="c3-chart-arcs-title",pe[jd]="c3-chart-arcs-background",pe[kd]="c3-chart-arcs-gauge-unit",pe[ld]="c3-chart-arcs-gauge-max",pe[md]="c3-chart-arcs-gauge-min",pe[nd]="c3-selected-circle",pe[od]="c3-selected-circles",pe[pd]="c3-event-rect",pe[qd]="c3-event-rects",pe[rd]="c3-event-rects-single",pe[sd]="c3-event-rects-multiple",pe[td]="c3-zoom-rect",pe[ud]="c3-brush",pe[vd]="c3-focused",pe[wd]="c3-region",pe[xd]="c3-regions",pe[yd]="c3-tooltip",pe[zd]="c3-tooltip-name",pe[Ad]="c3-shape",pe[Bd]="c3-shapes",pe[Cd]="c3-line",pe[Dd]="c3-lines",pe[Ed]="c3-bar",pe[Fd]="c3-bars",pe[Gd]="c3-circle",pe[Hd]="c3-circles",pe[Id]="c3-arc",pe[Jd]="c3-arcs",pe[Kd]="c3-area",pe[Ld]="c3-areas",pe[Md]="c3-empty",pe[Nd]="c3-text",pe[Od]="c3-texts",pe[Pd]="c3-gauge-value",pe[Qd]="c3-grid",pe[Rd]="c3-xgrid",pe[Sd]="c3-xgrids",pe[Td]="c3-xgrid-line",pe[Ud]="c3-xgrid-lines",pe[Vd]="c3-xgrid-focus",pe[Wd]="c3-ygrid",pe[Xd]="c3-ygrids",pe[Yd]="c3-ygrid-line",pe[Zd]="c3-ygrid-lines",pe[$d]="c3-axis",pe[_d]="c3-axis-x",pe[ae]="c3-axis-x-label",pe[be]="c3-axis-y",pe[ce]="c3-axis-y-label",pe[de]="c3-axis-y2",pe[ee]="c3-axis-y2-label",pe[fe]="c3-legend-background",pe[ge]="c3-legend-item",pe[he]="c3-legend-item-event",pe[ie]="c3-legend-