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
119 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.data_url)a.convertUrlToData(b.data_url,b.data_mimeType,b.data_keys,a.initWithData);else if(b.data_json)a.initWithData(a.convertJsonToData(b.data_json,b.data_keys));else if(b.data_rows)a.initWithData(a.convertRowsToData(b.data_rows));else{if(!b.data_columns)throw Error("url or json or rows or columns is required.");a.initWithData(a.convertColumnsToData(b.data_columns))}},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
},f.isOrderAsc=function(){var a=this.config;return a.data_order&&"asc"===a.data_order.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}):j(c.data_order)&&a.sort(c.data_order),a},f.filterByX=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 i(a.value)})},f.hasDataLabel=function(){var a=this.config;return"boolean"==typeof a.data_labels&&a.data_labels?!0:"object"==typeof a.data_labels&&r(a.data_labels)?!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.axis_rotated?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.axis_rotated?1:0,g=d.axis_rotated?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.data_x=b.x),f.push(c),a.forEach(function(a){var b=[];c.forEach(function(c){var d=l(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(l(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(l(e[c-1])&&(e[c-1]={}),l(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(i).map(function(a,b){return d.generateTargetX(a,c,b)})):e.data_x?d.data.xs[c]=d.getOtherTargetXs():r(e.data_xs)&&(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.data_idConverter(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.is
}).style("opacity",1))},f.showXGridFocus=function(a){var b=this,c=b.config,d=a.filter(function(a){return a&&i(a.value)}),e=b.main.selectAll("line."+h.xgridFocus),f=b.xx.bind(b);c.tooltip_show&&(b.hasType("scatter")||b.hasArcType()||(e.style("visibility","visible").data([d[0]]).attr(c.axis_rotated?"y1":"x1",f).attr(c.axis_rotated?"y2":"x2",f),b.smoothLines(e,"grid")))},f.hideXGridFocus=function(){this.main.select("line."+h.xgridFocus).style("visibility","hidden")},f.updateXgridFocus=function(){var a=this,b=a.config;a.main.select("line."+h.xgridFocus).attr("x1",b.axis_rotated?0:-10).attr("x2",b.axis_rotated?a.width:-10).attr("y1",b.axis_rotated?-10:0).attr("y2",b.axis_rotated?-10:a.height)},f.generateGridData=function(a,b){var c,d,e,f,g=this,i=[],j=g.main.select("."+h.axisX).selectAll(".tick").size();if("year"===a)for(c=g.getXDomain(),d=c[0].getFullYear(),e=c[1].getFullYear(),f=d;e>=f;f++)i.push(new Date(f+"-01-01 00:00:00"));else i=b.ticks(10),i.length>j&&(i=i.filter(function(a){return(""+a).indexOf(".")<0}));return i},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?h.xgridLines:h.ygridLines,i=b?h.xgridLine:h.ygridLine;c.main.select("."+g).selectAll("."+i).filter(e).transition().duration(d.transition_duration).style("opacity",0).remove(),b?d.grid_x_lines=d.grid_x_lines.filter(f):d.grid_y_lines=d.grid_y_lines.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.tooltip_init_show){if(b.isTimeSeries()&&k(c.tooltip_init_x)){for(c.tooltip_init_x=b.parseDate(c.tooltip_init_x),a=0;a<b.data.targets[0].values.length&&b.data.targets[0].values[a].x-c.tooltip_init_x!==0;a++);c.tooltip_init_x=a}b.tooltip.html(c.tooltip_contents.call(b,b.data.targets.map(function(a){return b.addName(a.values[c.tooltip_init_x])}),b.getXAxisTickFormat(),b.getYFormat(b.hasArcType()),b.color)),b.tooltip.style("top",c.tooltip_init_position.top).style("left",c.tooltip_init_position.left).style("display","block")}},f.getTooltipContent=function(a,b,c,d){var e,f,g,i,j,k,l=this,m=l.config,n=m.tooltip_format_title||b,o=m.tooltip_format_name||function(a){return a},p=m.tooltip_format_value||c;for(f=0;f<a.length;f++)a[f]&&(a[f].value||0===a[f].value)&&(e||(g=n?n(a[f].x):a[f].x,e="<table class='"+h.tooltip+"'>"+(g||0===g?"<tr><th colspan='2'>"+g+"</th></tr>":"")),j=o(a[f].name),i=p(a[f].value,a[f].ratio,a[f].id,a[f].index),k=l.levelColor?l.levelColor(a[f].value):d(a[f].id),e+="<tr class='"+h.tooltipName+"-"+a[f].id+"'>",e+="<td class='name'><span style='background-color:"+k+"'></span>"+j+"</td>",e+="<td class='value'>"+i+"</td>",e+="</tr>");return e+"</table>"},f.showTooltip=function(a,b){var c,d,e,f,g,h,j,k=this,l=k.config,m=k.hasArcType(),n=a.filter(function(a){return a&&i(a.value)});0!==n.length&&l.tooltip_show&&(k.tooltip.html(l.tooltip_contents.call(k,a,k.getXAxisTickFormat(),k.getYFormat(m),k.color)).style("display","block"),c=k.tooltip.property("offsetWidth"),d=k.tooltip.property("offsetHeight"),m?(f=k.width/2+b[0],h=k.height/2+b[1]+20):(l.axis_rotated?(e=k.getSvgLeft(),f=e+b[0]+100,g=f+c,j=k.getCurrentWidth()-k.getCurrentPaddingRight(),h=k.x(n[0].x)+20):(e=k.getSvgLeft(),f=e+k.getCurrentPaddingLeft()+k.x(n[0].x)+20,g=f+c,j=e+k.getCurrentWidth()-k.getCurrentPaddingRight(),h=b[1]+15),g>j&&(f-=g-j),h+d>k.getCurrentHeight()&&h>d+30&&(h-=d+30)),k.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.legend_show||(a.legend.style("visibility","hidden"),a.hiddenLegendIds=a.mapToIds(a.data.targets)),a.updateLegend(a.mapToIds(a.data.targets),{withTra
},f.getToggle=function(a){var b=this;return"circle"===a.nodeName?b.togglePoint:b.d3.select(a).classed(h.bar)?b.toggleBar:b.toggleArc},f.toggleShape=function(a,b,c){var d,e,f=this,g=f.d3,i=f.config,j=g.select(a),k=j.classed(h.SELECTED);"circle"===a.nodeName?(d=f.isWithinCircle(a,1.5*f.pointSelectR(b)),e=f.togglePoint):"path"===a.nodeName&&(j.classed(h.bar)?(d=f.isWithinBar(a),e=f.toggleBar):(d=!0,e=f.toggleArc)),(i.data_selection_grouped||d)&&(i.data_selection_enabled&&i.data_selection_isselectable(b)&&(i.data_selection_multiple||f.main.selectAll("."+h.shapes+(i.data_selection_grouped?f.getTargetSelectorSuffix(b.id):"")).selectAll("."+h.shape).each(function(a,b){var c=g.select(this);c.classed(h.SELECTED)&&e.call(f,!1,c.classed(h.SELECTED,!1),a,b)}),j.classed(h.SELECTED,!k),e.call(f,!k,j,b,c)),f.config.data_onclick.call(f.api,b,a))},f.initBrush=function(){var a=this,b=a.d3;a.brush=b.svg.brush().on("brush",function(){a.redrawForBrush()}),a.brush.update=function(){return a.context&&a.context.select("."+h.brush).call(this),this},a.brush.scale=function(b){return a.config.axis_rotated?this.y(b):this.x(b)}},f.initSubchart=function(){var a=this,b=a.config,c=a.context=a.svg.append("g").attr("transform",a.getTranslate("context"));b.subchart_show||c.style("visibility","hidden"),c.append("g").attr("clip-path",a.clipPath).attr("class",h.chart),c.select("."+h.chart).append("g").attr("class",h.chartBars),c.select("."+h.chart).append("g").attr("class",h.chartLines),c.append("g").attr("clip-path",a.clipPath).attr("class",h.brush).call(a.brush).selectAll("rect").attr(b.axis_rotated?"width":"height",b.axis_rotated?a.width2:a.height2),a.axes.subx=c.append("g").attr("class",h.axisX).attr("transform",a.getTranslate("subx")).attr("clip-path",b.axis_rotated?"":a.clipPathForXAxis)},f.updateTargetsForSubchart=function(a){var b,c,d,e,f=this,g=f.context,i=f.config,j=f.classChartBar.bind(f),k=f.classBars.bind(f),l=f.classChartLine.bind(f),m=f.classLines.bind(f),n=f.classAreas.bind(f);i.subchart_show&&(e=g.select("."+h.chartBars).selectAll("."+h.chartBar).data(a).attr("class",j),d=e.enter().append("g").style("opacity",0).attr("class",j),d.append("g").attr("class",k),c=g.select("."+h.chartLines).selectAll("."+h.chartLine).data(a).attr("class",l),b=c.enter().append("g").style("opacity",0).attr("class",l),b.append("g").attr("class",m),b.append("g").attr("class",n))},f.redrawSubchart=function(a,b,c,d,e,f,g){var i,j,k,l,m,n,o=this,p=o.d3,q=o.context,r=o.config,s=o.barData.bind(o),t=o.lineData.bind(o),u=o.classBar.bind(o),v=o.classLine.bind(o),w=o.classArea.bind(o),x=o.initialOpacity.bind(o);r.subchart_show&&(p.event&&"zoom"===p.event.type&&o.brush.extent(o.x.orgDomain()).update(),a&&(!r.axis_rotated&&r.axis_x_tick_rotate&&o.rotateTickText(o.axes.subx,b.axisSubX,r.axis_x_tick_rotate),o.brush.empty()||o.brush.extent(o.x.orgDomain()).update(),l=o.generateDrawArea(e,!0),m=o.generateDrawBar(f,!0),n=o.generateDrawLine(g,!0),k=q.selectAll("."+h.bars).selectAll("."+h.bar).data(s),k.enter().append("path").attr("class",u).style("stroke","none").style("fill",o.color),k.style("opacity",x).transition().duration(c).attr("d",m).style("opacity",1),k.exit().transition().duration(c).style("opacity",0).remove(),i=q.selectAll("."+h.lines).selectAll("."+h.line).data(t),i.enter().append("path").attr("class",v).style("stroke",o.color),i.style("opacity",x).transition().duration(c).attr("d",n).style("opacity",1),i.exit().transition().duration(c).style("opacity",0).remove(),j=q.selectAll("."+h.areas).selectAll("."+h.area).data(t),j.enter().append("path").attr("class",w).style("fill",o.color).style("opacity",function(){return o.orgAreaOpacity=+p.select(this).style("opacity"),0}),j.style("opacity",0).transition().duration(c).attr("d",l).style("fill",o.color).style("opacity",o.orgAreaOpacity),j.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.subchart_onbrush.call(a.api,b.orgDomain())},f.transformContext=function(a,b){var c,d=this;b&&b.axisSu