requirebin sketch

index.js

var Chartist = require("chartist")

/* Add a basic data series with six labels and values */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [
    {
      data: [1, 2, 3, 5, 8, 13]
    }
  ]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
  axisX: {
    labelInterpolationFnc: function(value) {
      return 'Calendar Week ' + value;
    }
  }
};

/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

/* Initialize the chart with the above settings */
new Chartist.Line('#my-chart', data, options, responsiveOptions);

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({chartist:[function(require,module,exports){(function(root,factory){if(typeof define==="function"&&define.amd){define([],function(){return root.returnExportsGlobal=factory()})}else if(typeof exports==="object"){module.exports=factory()}else{root["Chartist"]=factory()}})(this,function(){var Chartist={version:"0.4.3"};(function(window,document,Chartist){"use strict";Chartist.noop=function(n){return n};Chartist.alphaNumerate=function(n){return String.fromCharCode(97+n%26)};Chartist.extend=function(target){target=target||{};var sources=Array.prototype.slice.call(arguments,1);sources.forEach(function(source){for(var prop in source){if(typeof source[prop]==="object"&&!(source[prop]instanceof Array)){target[prop]=Chartist.extend(target[prop],source[prop])}else{target[prop]=source[prop]}}});return target};Chartist.stripUnit=function(value){if(typeof value==="string"){value=value.replace(/[^0-9\+-\.]/g,"")}return+value};Chartist.ensureUnit=function(value,unit){if(typeof value==="number"){value=value+unit}return value};Chartist.querySelector=function(query){return query instanceof Node?query:document.querySelector(query)};Chartist.createSvg=function(container,width,height,className){var svg;width=width||"100%";height=height||"100%";svg=container.querySelector("svg");if(svg){container.removeChild(svg)}svg=new Chartist.Svg("svg").attr({width:width,height:height}).addClass(className).attr({style:"width: "+width+"; height: "+height+";"});container.appendChild(svg._node);return svg};Chartist.getDataArray=function(data){var array=[];for(var i=0;i<data.series.length;i++){array[i]=typeof data.series[i]==="object"&&data.series[i].data!==undefined?data.series[i].data:data.series[i];for(var j=0;j<array[i].length;j++){array[i][j]=+array[i][j]}}return array};Chartist.normalizeDataArray=function(dataArray,length){for(var i=0;i<dataArray.length;i++){if(dataArray[i].length===length){continue}for(var j=dataArray[i].length;j<length;j++){dataArray[i][j]=0}}return dataArray};Chartist.orderOfMagnitude=function(value){return Math.floor(Math.log(Math.abs(value))/Math.LN10)};Chartist.projectLength=function(svg,length,bounds,options){var availableHeight=Chartist.getAvailableHeight(svg,options);return length/bounds.range*availableHeight};Chartist.getAvailableHeight=function(svg,options){return Math.max((Chartist.stripUnit(options.height)||svg.height())-options.chartPadding*2-options.axisX.offset,0)};Chartist.getHighLow=function(dataArray){var i,j,highLow={high:-Number.MAX_VALUE,low:Number.MAX_VALUE};for(i=0;i<dataArray.length;i++){for(j=0;j<dataArray[i].length;j++){if(dataArray[i][j]>highLow.high){highLow.high=dataArray[i][j]}if(dataArray[i][j]<highLow.low){highLow.low=dataArray[i][j]}}}return highLow};Chartist.getBounds=function(svg,normalizedData,options,referenceValue){var i,newMin,newMax,bounds=Chartist.getHighLow(normalizedData);bounds.high=+options.high||(options.high===0?0:bounds.high);bounds.low=+options.low||(options.low===0?0:bounds.low);if(bounds.high===bounds.low){if(bounds.low===0){bounds.high=1}else if(bounds.low<0){bounds.high=0}else{bounds.low=0}}if(referenceValue||referenceValue===0){bounds.high=Math.max(referenceValue,bounds.high);bounds.low=Math.min(referenceValue,bounds.low)}bounds.valueRange=bounds.high-bounds.low;bounds.oom=Chartist.orderOfMagnitude(bounds.valueRange);bounds.min=Math.floor(bounds.low/Math.pow(10,bounds.oom))*Math.pow(10,bounds.oom);bounds.max=Math.ceil(bounds.high/Math.pow(10,bounds.oom))*Math.pow(10,bounds.oom);bounds.range=bounds.max-bounds.min;bounds.step=Math.pow(10,bounds.oom);bounds.numberOfSteps=Math.round(bounds.range/bounds.step);var length=Chartist.projectLength(svg,bounds.step,bounds,options),scaleUp=length<options.axisY.scaleMinSpace;while(true){if(scaleUp&&Chartist.projectLength(svg,bounds.step,bounds,options)<=options.axisY.scaleMinSpace){bounds.step*=2}else if(!scaleUp&&Chartist.projectLength(svg,bounds.step/2,bounds,options)>=options.axisY.scaleMinSpace){bounds.step/=2}else{break}}newMin=bounds.min;newMax=bounds.max;for(i=bounds.min;i<=bounds.max;i+=bounds.step){if(i+bounds.step<bounds.low){newMin+=bounds.step}if(i-bounds.step>=bounds.high){newMax-=bounds.step}}bounds.min=newMin;bounds.max=newMax;bounds.range=bounds.max-bounds.min;bounds.values=[];for(i=bounds.min;i<=bounds.max;i+=bounds.step){bounds.values.push(i)}return bounds};Chartist.polarToCartesian=function(centerX,centerY,radius,angleInDegrees){var angleInRadians=(angleInDegrees-90)*Math.PI/180;return{x:centerX+radius*Math.cos(angleInRadians),y:centerY+radius*Math.sin(angleInRadians)}};Chartist.createChartRect=function(svg,options){var yOffset=options.axisY?options.axisY.offset:0,xOffset=options.axisX?options.axisX.offset:0;return{x1:options.chartPadding+yOffset,y1:Math.max((Chartist.stripUnit(options.height)||svg.height())-options.chartPadding-xOffset,options.chartPadding),x2:Math.max((Chartist.stripUnit(options.width)||svg.width())-options.chartPadding,options.chartPadding+yOffset),y2:options.chartPadding,width:function(){return this.x2-this.x1},height:function(){return this.y1-this.y2}}};Chartist.createLabel=function(parent,text,attributes,className,supportsForeignObject){if(supportsForeignObject){var content='<span class="'+className+'">'+text+"</span>";return parent.foreignObject(content,attributes)}else{return parent.elem("text",attributes,className).text(text)}};Chartist.createXAxis=function(chartRect,data,grid,labels,options,eventEmitter,supportsForeignObject){data.labels.forEach(function(value,index){var interpolatedValue=options.axisX.labelInterpolationFnc(value,index),width=chartRect.width()/data.labels.length,height=options.axisX.offset,pos=chartRect.x1+width*index;if(!interpolatedValue&&interpolatedValue!==0){return}if(options.axisX.showGrid){var gridElement=grid.elem("line",{x1:pos,y1:chartRect.y1,x2:pos,y2:chartRect.y2},[options.classNames.grid,options.classNames.horizontal].join(" "));eventEmitter.emit("draw",{type:"grid",axis:"x",index:index,group:grid,element:gridElement,x1:pos,y1:chartRect.y1,x2:pos,y2:chartRect.y2})}if(options.axisX.showLabel){var labelPosition={x:pos+options.axisX.labelOffset.x,y:chartRect.y1+options.axisX.labelOffset.y+(supportsForeignObject?5:20)};var labelElement=Chartist.createLabel(labels,""+interpolatedValue,{x:labelPosition.x,y:labelPosition.y,width:width,height:height,style:"overflow: visible;"},[options.classNames.label,options.classNames.horizontal].join(" "),supportsForeignObject);eventEmitter.emit("draw",{type:"label",axis:"x",index:index,group:labels,element:labelElement,text:""+interpolatedValue,x:labelPosition.x,y:labelPosition.y,width:width,height:height,get space(){window.console.warn("EventEmitter: space is deprecated, use width or height instead.");return this.width}})}})};Chartist.createYAxis=function(chartRect,bounds,grid,labels,options,eventEmitter,supportsForeignObject){bounds.values.forEach(function(value,index){var interpolatedValue=options.axisY.labelInterpolationFnc(value,index),width=options.axisY.offset,height=chartRect.height()/bounds.values.length,pos=chartRect.y1-height*index;if(!interpolatedValue&&interpolatedValue!==0){return}if(options.axisY.showGrid){var gridElement=grid.elem("line",{x1:chartRect.x1,y1:pos,x2:chartRect.x2,y2:pos},[options.classNames.grid,options.classNames.vertical].join(" "));eventEmitter.emit("draw",{type:"grid",axis:"y",index:index,group:grid,element:gridElement,x1:chartRect.x1,y1:pos,x2:chartRect.x2,y2:pos})}if(options.axisY.showLabel){var labelPosition={x:options.chartPadding+options.axisY.labelOffset.x+(supportsForeignObject?-10:0),y:pos+options.axisY.labelOffset.y+(supportsForeignObject?-15:0)};var labelElement=Chartist.createLabel(labels,""+interpolatedValue,{x:labelPosition.x,y:labelPosition.y,width:width,height:height,style:"overflow: visible;"},[options.classNames.label,options.classNames.vertical].join(" "),supportsForeignObject);eventEmitter.emit("draw",{type:"label",axis:"y",index:index,group:labels,element:labelElement,text:""+interpolatedValue,x:labelPosition.x,y:labelPosition.y,width:width,height:height,get space(){window.console.warn("EventEmitter: space is deprecated, use width or height instead.");return this.height}})}})};Chartist.projectPoint=function(chartRect,bounds,data,index){return{x:chartRect.x1+chartRect.width()/data.length*index,y:chartRect.y1-chartRect.height()*(data[index]-bounds.min)/(bounds.range+bounds.step)}};Chartist.optionsProvider=function(options,responsiveOptions,eventEmitter){var baseOptions=Chartist.extend({},options),currentOptions,mediaQueryListeners=[],i;function updateCurrentOptions(){var previousOptions=currentOptions;currentOptions=Chartist.extend({},baseOptions);if(responsiveOptions){for(i=0;i<responsiveOptions.length;i++){var mql=window.matchMedia(responsiveOptions[i][0]);if(mql.matches){currentOptions=Chartist.extend(currentOptions,responsiveOptions[i][1])}}}if(eventEmitter){eventEmitter.emit("optionsChanged",{previousOptions:previousOptions,currentOptions:currentOptions})}}function removeMediaQueryListeners(){mediaQueryListeners.forEach(function(mql){mql.removeListener(updateCurrentOptions)})}if(!window.matchMedia){throw"window.matchMedia not found! Make sure you're using a polyfill."}else if(responsiveOptions){for(i=0;i<responsiveOptions.length;i++){var mql=window.matchMedia(responsiveOptions[i][0]);mql.addListener(updateCurrentOptions);mediaQueryListeners.push(mql)}}updateCurrentOptions();return{get currentOptions(){return Chartist.extend({},currentOptions)},removeMediaQueryListeners:removeMediaQueryListeners}};Chartist.catmullRom2bezier=function(crp,z){var d=[];for(var i=0,iLen=crp.length;iLen-2*!z>i;i+=2){var p=[{x:+crp[i-2],y:+crp[i-1]},{x:+crp[i],y:+crp[i+1]},{x:+crp[i+2],y:+crp[i+3]},{x:+crp[i+4],y:+crp[i+5]}];if(z){if(!i){p[0]={x:+crp[iLen-2],y:+crp[iLen-1]}}else if(iLen-4===i){p[3]={x:+crp[0],y:+crp[1]}}else if(iLen-2===i){p[2]={x:+crp[0],y:+crp[1]};p[3]={x:+crp[2],y:+crp[3]}}}else{if(iLen-4===i){p[3]=p[2]}else if(!i){p[0]={x:+crp[i],y:+crp[i+1]}}}d.push([(-p[0].x+6*p[1].x+p[2].x)/6,(-p[0].y+6*p[1].y+p[2].y)/6,(p[1].x+6*p[2].x-p[3].x)/6,(p[1].y+6*p[2].y-p[3].y)/6,p[2].x,p[2].y])}return d}})(window,document,Chartist);(function(window,document,Chartist){"use strict";Chartist.EventEmitter=function(){var handlers=[];function addEventHandler(event,handler){handlers[event]=handlers[event]||[];handlers[event].push(handler)}function removeEventHandler(event,handler){if(handlers[event]){if(handler){handlers[event].splice(handlers[event].indexOf(handler),1);if(handlers[event].length===0){delete handlers[event]}}else{delete handlers[event]}}}function emit(event,data){if(handlers[event]){handlers[event].forEach(function(handler){handler(data)})}if(handlers["*"]){handlers["*"].forEach(function(starHandler){starHandler(event,data)})}}return{addEventHandler:addEventHandler,removeEventHandler:removeEventHandler,emit:emit}}})(window,document,Chartist);(function(window,document,Chartist){"use strict";function listToArray(list){var arr=[];if(list.length){for(var i=0;i<list.length;i++){arr.push(list[i])}}return arr}function extend(properties,superProtoOverride){var superProto=superProtoOverride||this.prototype||Chartist.Class;var proto=Object.create(superProto);Chartist.Class.cloneDefinitions(proto,properties);var constr=function(){var fn=proto.constructor||function(){},instance;instance=this===Chartist?Object.create(proto):this;fn.apply(instance,Array.prototype.slice.call(arguments,0));return instance};constr.prototype=proto;constr.super=superProto;constr.extend=this.extend;return constr}function mix(mixProtoArr,properties){if(this!==Chartist.Class){throw new Error("Chartist.Class.mix should only be called on the type and never on an instance!")}var superPrototypes=[{}].concat(mixProtoArr).map(function(prototype){return prototype instanceof Function?prototype.prototype:prototype});var mixedSuperProto=Chartist.Class.cloneDefinitions.apply(undefined,superPrototypes);delete mixedSuperProto.constructor;return this.extend(properties,mixedSuperProto)}function cloneDefinitions(){var args=listToArray(arguments);var target=args[0];args.splice(1,args.length-1).forEach(function(source){Object.getOwnPropertyNames(source).forEach(function(propName){delete target[propName];Object.defineProperty(target,propName,Object.getOwnPropertyDescriptor(source,propName))})});return target}Chartist.Class={extend:extend,mix:mix,cloneDefinitions:cloneDefinitions}})(window,document,Chartist);(function(window,document,Chartist){"use strict";function update(){this.createChart(this.optionsProvider.currentOptions);return this}function detach(){window.removeEventListener("resize",this.resizeListener);this.optionsProvider.removeMediaQueryListeners();return this}function on(event,handler){this.eventEmitter.addEventHandler(event,handler);return this}function off(event,handler){this.eventEmitter.removeEventHandler(event,handler);return this}function Base(query,data,options,responsiveOptions){this.container=Chartist.querySelector(query);this.data=data;this.options=options;this.responsiveOptions=responsiveOptions;this.eventEmitter=Chartist.EventEmitter();this.supportsForeignObject=Chartist.Svg.isSupported("Extensibility");this.supportsAnimations=Chartist.Svg.isSupported("AnimationEventsAttribute");this.resizeListener=function resizeListener(){this.update()}.bind(this);if(this.container){if(this.container.__chartist__){this.container.__chartist__.detach()}this.container.__chartist__=this}window.addEventListener("resize",this.resizeListener);setTimeout(function(){this.optionsProvider=Chartist.optionsProvider(this.options,this.responsiveOptions,this.eventEmitter);if(this.options.plugins){this.options.plugins.forEach(function(plugin){if(plugin instanceof Array){plugin[0](this,plugin[1])}else{plugin(this)}}.bind(this))}this.createChart(this.optionsProvider.currentOptions)}.bind(this),0)}Chartist.Base=Chartist.Class.extend({constructor:Base,optionsProvider:undefined,container:undefined,svg:undefined,eventEmitter:undefined,createChart:function(){throw new Error("Base chart type can't be instantiated!")},update:update,detach:detach,on:on,off:off,version:Chartist.version,supportsForeignObject:false})})(window,document,Chartist);(function(window,document,Chartist){"use strict";var svgNs="http://www.w3.org/2000/svg",xmlNs="http://www.w3.org/2000/xmlns/",xhtmlNs="http://www.w3.org/1999/xhtml";Chartist.xmlNs={qualifiedName:"xmlns:ct",prefix:"ct",uri:"http://gionkunz.github.com/chartist-js/ct"};function Svg(name,attributes,className,parent,insertFirst){if(name instanceof SVGElement){this._node=name}else{this._node=document.createElementNS(svgNs,name);if(name==="svg"){this._node.setAttributeNS(xmlNs,Chartist.xmlNs.qualifiedName,Chartist.xmlNs.uri)}if(attributes){this.attr(attributes)}if(className){this.addClass(className)}if(parent){if(insertFirst&&parent._node.firstChild){parent._node.insertBefore(this._node,parent._node.firstChild)}else{parent._node.appendChild(this._node)}}}}function attr(attributes,ns){if(typeof attributes==="string"){if(ns){return this._node.getAttributeNS(ns,attributes)}else{return this._node.getAttribute(attributes)}}Object.keys(attributes).forEach(function(key){if(attributes[key]===undefined){return}if(ns){this._node.setAttributeNS(ns,[Chartist.xmlNs.prefix,":",key].join(""),attributes[key])}else{this._node.setAttribute(key,attributes[key])}}.bind(this));return this}function elem(name,attributes,className,insertFirst){return new Chartist.Svg(name,attributes,className,this,insertFirst)}function parent(){return this._node.parentNode instanceof SVGElement?new Chartist.Svg(this._node.parentNode):null}function root(){var node=this._node;while(node.nodeName!=="svg"){node=node.parentNode}return new Chartist.Svg(node)}function querySelector(selector){var foundNode=this._node.querySelector(selector);return foundNode?new Chartist.Svg(foundNode):null}function querySelectorAll(selector){var foundNodes=this._node.querySelectorAll(selector);return foundNodes.length?new Chartist.Svg.List(foundNodes):null}function foreignObject(content,attributes,className,insertFirst){if(typeof content==="string"){var container=document.createElement("div");container.innerHTML=content;content=container.firstChild}content.setAttribute("xmlns",xhtmlNs);var fnObj=this.elem("foreignObject",attributes,className,insertFirst);fnObj._node.appendChild(content);return fnObj}function text(t){this._node.appendChild(document.createTextNode(t));return this}function empty(){while(this._node.firstChild){this._node.removeChild(this._node.firstChild)}return this}function remove(){this._node.parentNode.removeChild(this._node);return new Chartist.Svg(this._node.parentNode)}function replace(newElement){this._node.parentNode.replaceChild(newElement._node,this._node);return newElement}function append(element,insertFirst){if(insertFirst&&this._node.firstChild){this._node.insertBefore(element._node,this._node.firstChild)}else{this._node.appendChild(element._node)}return this}function classes(){return this._node.getAttribute("class")?this._node.getAttribute("class").trim().split(/\s+/):[]}function addClass(names){this._node.setAttribute("class",this.classes(this._node).concat(names.trim().split(/\s+/)).filter(function(elem,pos,self){return self.indexOf(elem)===pos}).join(" "));return this}function removeClass(names){var removedClasses=names.trim().split(/\s+/);this._node.setAttribute("class",this.classes(this._node).filter(function(name){return removedClasses.indexOf(name)===-1}).join(" "));return this}function removeAllClasses(){this._node.setAttribute("class","");return this}function height(){return this._node.clientHeight||Math.round(this._node.getBBox().height)||this._node.parentNode.clientHeight}function width(){return this._node.clientWidth||Math.round(this._node.getBBox().width)||this._node.parentNode.clientWidth}function animate(animations,guided,eventEmitter){if(guided===undefined){guided=true}Object.keys(animations).forEach(function createAnimateForAttributes(attribute){function createAnimate(animationDefinition,guided){var attributeProperties={},animate,timeout,easing;if(animationDefinition.easing){easing=animationDefinition.easing instanceof Array?animationDefinition.easing:Chartist.Svg.Easing[animationDefinition.easing];delete animationDefinition.easing}animationDefinition.begin=Chartist.ensureUnit(animationDefinition.begin,"ms");animationDefinition.dur=Chartist.ensureUnit(animationDefinition.dur,"ms");if(easing){animationDefinition.calcMode="spline";animationDefinition.keySplines=easing.join(" ");animationDefinition.keyTimes="0;1"}if(guided){animationDefinition.fill="freeze";attributeProperties[attribute]=animationDefinition.from;this.attr(attributeProperties);timeout=Chartist.stripUnit(animationDefinition.begin||0);animationDefinition.begin="indefinite"}animate=this.elem("animate",Chartist.extend({attributeName:attribute},animationDefinition));if(guided){setTimeout(function(){animate._node.beginElement()},timeout)}if(eventEmitter){animate._node.addEventListener("beginEvent",function handleBeginEvent(){eventEmitter.emit("animationBegin",{element:this,animate:animate._node,params:animationDefinition})}.bind(this))}animate._node.addEventListener("endEvent",function handleEndEvent(){if(eventEmitter){eventEmitter.emit("animationEnd",{element:this,animate:animate._node,params:animationDefinition})}if(guided){attributeProperties[attribute]=animationDefinition.to;this.attr(attributeProperties);animate.remove()}}.bind(this))}if(animations[attribute]instanceof Array){animations[attribute].forEach(function(animationDefinition){createAnimate.bind(this)(animationDefinition,false)}.bind(this))}else{createAnimate.bind(this)(animations[attribute],guided)}}.bind(this));return this}Chartist.Svg=Chartist.Class.extend({constructor:Svg,attr:attr,elem:elem,parent:parent,root:root,querySelector:querySelector,querySelectorAll:querySelectorAll,foreignObject:foreignObject,text:text,empty:empty,remove:remove,replace:replace,append:append,classes:classes,addClass:addClass,removeClass:removeClass,removeAllClasses:removeAllClasses,height:height,width:width,animate:animate});Chartist.Svg.isSupported=function(feature){return document.implementation.hasFeature("www.http://w3.org/TR/SVG11/feature#"+feature,"1.1")};var easingCubicBeziers={easeInSine:[.47,0,.745,.715],easeOutSine:[.39,.575,.565,1],easeInOutSine:[.445,.05,.55,.95],easeInQuad:[.55,.085,.68,.53],easeOutQuad:[.25,.46,.45,.94],easeInOutQuad:[.455,.03,.515,.955],easeInCubic:[.55,.055,.675,.19],easeOutCubic:[.215,.61,.355,1],easeInOutCubic:[.645,.045,.355,1],easeInQuart:[.895,.03,.685,.22],easeOutQuart:[.165,.84,.44,1],easeInOutQuart:[.77,0,.175,1],easeInQuint:[.755,.05,.855,.06],easeOutQuint:[.23,1,.32,1],easeInOutQuint:[.86,0,.07,1],easeInExpo:[.95,.05,.795,.035],easeOutExpo:[.19,1,.22,1],easeInOutExpo:[1,0,0,1],easeInCirc:[.6,.04,.98,.335],easeOutCirc:[.075,.82,.165,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]};Chartist.Svg.Easing=easingCubicBeziers;function SvgList(nodeList){var list=this;this.svgElements=[];for(var i=0;i<nodeList.length;i++){this.svgElements.push(new Chartist.Svg(nodeList[i]))}Object.keys(Chartist.Svg.prototype).filter(function(prototypeProperty){return["constructor","parent","querySelector","querySelectorAll","replace","append","classes","height","width"].indexOf(prototypeProperty)===-1}).forEach(function(prototypeProperty){list[prototypeProperty]=function(){var args=Array.prototype.slice.call(arguments,0);list.svgElements.forEach(function(element){Chartist.Svg.prototype[prototypeProperty].apply(element,args)});return list}})}Chartist.Svg.List=Chartist.Class.extend({constructor:SvgList})})(window,document,Chartist);(function(window,document,Chartist){"use strict";var defaultOptions={axisX:{offset:30,labelOffset:{x:0,y:0},showLabel:true,showGrid:true,labelInterpolationFnc:Chartist.noop},axisY:{offset:40,labelOffset:{x:0,y:0},showLabel:true,showGrid:true,labelInterpolationFnc:Chartist.noop,scaleMinSpace:20},width:undefined,height:undefined,showLine:true,showPoint:true,showArea:false,areaBase:0,lineSmooth:true,low:undefined,high:undefined,chartPadding:5,classNames:{chart:"ct-chart-line",label:"ct-label",labelGroup:"ct-labels",series:"ct-series",line:"ct-line",point:"ct-point",area:"ct-area",grid:"ct-grid",gridGroup:"ct-grids",vertical:"ct-vertical",horizontal:"ct-horizontal"}};function createChart(options){var seriesGroups=[],bounds,normalizedData=Chartist.normalizeDataArray(Chartist.getDataArray(this.data),this.data.labels.length);this.svg=Chartist.createSvg(this.container,options.width,options.height,options.classNames.chart);bounds=Chartist.getBounds(this.svg,normalizedData,options);var chartRect=Chartist.createChartRect(this.svg,options);var labels=this.svg.elem("g").addClass(options.classNames.labelGroup),grid=this.svg.elem("g").addClass(options.classNames.gridGroup);Chartist.createXAxis(chartRect,this.data,grid,labels,options,this.eventEmitter,this.supportsForeignObject);Chartist.createYAxis(chartRect,bounds,grid,labels,options,this.eventEmitter,this.supportsForeignObject);for(var i=0;i<this.data.series.length;i++){seriesGroups[i]=this.svg.elem("g");if(this.data.series[i].name){seriesGroups[i].attr({"series-name":this.data.series[i].name},Chartist.xmlNs.uri)}seriesGroups[i].addClass([options.classNames.series,this.data.series[i].className||options.classNames.series+"-"+Chartist.alphaNumerate(i)].join(" "));var p,pathCoordinates=[],point;for(var j=0;j<normalizedData[i].length;j++){p=Chartist.projectPoint(chartRect,bounds,normalizedData[i],j);pathCoordinates.push(p.x,p.y);if(options.showPoint){point=seriesGroups[i].elem("line",{x1:p.x,y1:p.y,x2:p.x+.01,y2:p.y},options.classNames.point).attr({value:normalizedData[i][j]},Chartist.xmlNs.uri);this.eventEmitter.emit("draw",{type:"point",value:normalizedData[i][j],index:j,group:seriesGroups[i],element:point,x:p.x,y:p.y})}}if(options.showLine||options.showArea){var pathElements=["M"+pathCoordinates[0]+","+pathCoordinates[1]];if(options.lineSmooth&&pathCoordinates.length>4){var cr=Chartist.catmullRom2bezier(pathCoordinates);for(var k=0;k<cr.length;k++){pathElements.push("C"+cr[k].join())}}else{for(var l=3;l<pathCoordinates.length;l+=2){pathElements.push("L"+pathCoordinates[l-1]+","+pathCoordinates[l])}}if(options.showArea){var areaBase=Math.max(Math.min(options.areaBase,bounds.max),bounds.min);var areaPathElements=pathElements.slice();var areaBaseProjected=Chartist.projectPoint(chartRect,bounds,[areaBase],0);areaPathElements.splice(0,0,"M"+areaBaseProjected.x+","+areaBaseProjected.y);areaPathElements[1]="L"+pathCoordinates[0]+","+pathCoordinates[1];areaPathElements.push("L"+pathCoordinates[pathCoordinates.length-2]+","+areaBaseProjected.y);var area=seriesGroups[i].elem("path",{d:areaPathElements.join("")},options.classNames.area,true).attr({values:normalizedData[i]},Chartist.xmlNs.uri);this.eventEmitter.emit("draw",{type:"area",values:normalizedData[i],index:i,group:seriesGroups[i],element:area})}if(options.showLine){var line=seriesGroups[i].elem("path",{d:pathElements.join("")},options.classNames.line,true).attr({values:normalizedData[i]},Chartist.xmlNs.uri);this.eventEmitter.emit("draw",{type:"line",values:normalizedData[i],index:i,group:seriesGroups[i],element:line})}}}this.eventEmitter.emit("created",{bounds:bounds,chartRect:chartRect,svg:this.svg,options:options})}function Line(query,data,options,responsiveOptions){Chartist.Line.super.constructor.call(this,query,data,Chartist.extend({},defaultOptions,options),responsiveOptions)}Chartist.Line=Chartist.Base.extend({constructor:Line,createChart:createChart})})(window,document,Chartist);(function(window,document,Chartist){"use strict";var defaultOptions={axisX:{offset:30,labelOffset:{x:0,y:0},showLabel:true,showGrid:true,labelInterpolationFnc:Chartist.noop},axisY:{offset:40,labelOffset:{x:0,y:0},showLabel:true,showGrid:true,labelInterpolationFnc:Chartist.noop,scaleMinSpace:20},width:undefined,height:undefined,high:undefined,low:undefined,chartPadding:5,seriesBarDistance:15,classNames:{chart:"ct-chart-bar",label:"ct-label",labelGroup:"ct-labels",series:"ct-series",bar:"ct-bar",grid:"ct-grid",gridGroup:"ct-grids",vertical:"ct-vertical",horizontal:"ct-horizontal"}};function createChart(options){var seriesGroups=[],bounds,normalizedData=Chartist.normalizeDataArray(Chartist.getDataArray(this.data),this.data.labels.length);this.svg=Chartist.createSvg(this.container,options.width,options.height,options.classNames.chart);bounds=Chartist.getBounds(this.svg,normalizedData,options,0);var chartRect=Chartist.createChartRect(this.svg,options);var labels=this.svg.elem("g").addClass(options.classNames.labelGroup),grid=this.svg.elem("g").addClass(options.classNames.gridGroup),zeroPoint=Chartist.projectPoint(chartRect,bounds,[0],0);Chartist.createXAxis(chartRect,this.data,grid,labels,options,this.eventEmitter,this.supportsForeignObject);Chartist.createYAxis(chartRect,bounds,grid,labels,options,this.eventEmitter,this.supportsForeignObject);for(var i=0;i<this.data.series.length;i++){var biPol=i-(this.data.series.length-1)/2,periodHalfWidth=chartRect.width()/normalizedData[i].length/2;seriesGroups[i]=this.svg.elem("g");if(this.data.series[i].name){seriesGroups[i].attr({"series-name":this.data.series[i].name},Chartist.xmlNs.uri)}seriesGroups[i].addClass([options.classNames.series,this.data.series[i].className||options.classNames.series+"-"+Chartist.alphaNumerate(i)].join(" "));for(var j=0;j<normalizedData[i].length;j++){var p=Chartist.projectPoint(chartRect,bounds,normalizedData[i],j),bar;p.x+=periodHalfWidth+biPol*options.seriesBarDistance;bar=seriesGroups[i].elem("line",{x1:p.x,y1:zeroPoint.y,x2:p.x,y2:p.y},options.classNames.bar).attr({value:normalizedData[i][j]},Chartist.xmlNs.uri);this.eventEmitter.emit("draw",{type:"bar",value:normalizedData[i][j],index:j,group:seriesGroups[i],element:bar,x1:p.x,y1:zeroPoint.y,x2:p.x,y2:p.y})}}this.eventEmitter.emit("created",{bounds:bounds,chartRect:chartRect,svg:this.svg,options:options})}function Bar(query,data,options,responsiveOptions){Chartist.Bar.super.constructor.call(this,query,data,Chartist.extend({},defaultOptions,options),responsiveOptions)}Chartist.Bar=Chartist.Base.extend({constructor:Bar,createChart:createChart})})(window,document,Chartist);(function(window,document,Chartist){"use strict";var defaultOptions={width:undefined,height:undefined,chartPadding:5,classNames:{chart:"ct-chart-pie",series:"ct-series",slice:"ct-slice",donut:"ct-donut",label:"ct-label"},startAngle:0,total:undefined,donut:false,donutWidth:60,showLabel:true,labelOffset:0,labelInterpolationFnc:Chartist.noop,labelOverflow:false,labelDirection:"neutral"};function determineAnchorPosition(center,label,direction){var toTheRight=label.x>center.x;if(toTheRight&&direction==="explode"||!toTheRight&&direction==="implode"){return"start"}else if(toTheRight&&direction==="implode"||!toTheRight&&direction==="explode"){return"end"}else{return"middle"}}function createChart(options){var seriesGroups=[],chartRect,radius,labelRadius,totalDataSum,startAngle=options.startAngle,dataArray=Chartist.getDataArray(this.data);this.svg=Chartist.createSvg(this.container,options.width,options.height,options.classNames.chart);chartRect=Chartist.createChartRect(this.svg,options,0,0);radius=Math.min(chartRect.width()/2,chartRect.height()/2);totalDataSum=options.total||dataArray.reduce(function(previousValue,currentValue){return previousValue+currentValue},0);radius-=options.donut?options.donutWidth/2:0;labelRadius=options.donut?radius:radius/2;labelRadius+=options.labelOffset;var center={x:chartRect.x1+chartRect.width()/2,y:chartRect.y2+chartRect.height()/2};var hasSingleValInSeries=this.data.series.filter(function(val){return val!==0}).length===1;for(var i=0;i<this.data.series.length;i++){seriesGroups[i]=this.svg.elem("g",null,null,true);if(this.data.series[i].name){seriesGroups[i].attr({"series-name":this.data.series[i].name},Chartist.xmlNs.uri)}seriesGroups[i].addClass([options.classNames.series,this.data.series[i].className||options.classNames.series+"-"+Chartist.alphaNumerate(i)].join(" "));var endAngle=startAngle+dataArray[i]/totalDataSum*360;if(endAngle-startAngle===360){endAngle-=.01}var start=Chartist.polarToCartesian(center.x,center.y,radius,startAngle-(i===0||hasSingleValInSeries?0:.2)),end=Chartist.polarToCartesian(center.x,center.y,radius,endAngle),arcSweep=endAngle-startAngle<=180?"0":"1",d=["M",end.x,end.y,"A",radius,radius,0,arcSweep,0,start.x,start.y];if(options.donut===false){d.push("L",center.x,center.y)}var path=seriesGroups[i].elem("path",{d:d.join(" ")},options.classNames.slice+(options.donut?" "+options.classNames.donut:""));path.attr({value:dataArray[i]},Chartist.xmlNs.uri);if(options.donut===true){path.attr({style:"stroke-width: "+ +options.donutWidth+"px"})}this.eventEmitter.emit("draw",{type:"slice",value:dataArray[i],totalDataSum:totalDataSum,index:i,group:seriesGroups[i],element:path,center:center,radius:radius,startAngle:startAngle,endAngle:endAngle});if(options.showLabel){var labelPosition=Chartist.polarToCartesian(center.x,center.y,labelRadius,startAngle+(endAngle-startAngle)/2),interpolatedValue=options.labelInterpolationFnc(this.data.labels?this.data.labels[i]:dataArray[i],i);var labelElement=seriesGroups[i].elem("text",{dx:labelPosition.x,dy:labelPosition.y,"text-anchor":determineAnchorPosition(center,labelPosition,options.labelDirection)},options.classNames.label).text(""+interpolatedValue);this.eventEmitter.emit("draw",{type:"label",index:i,group:seriesGroups[i],element:labelElement,text:""+interpolatedValue,x:labelPosition.x,y:labelPosition.y})
}startAngle=endAngle}this.eventEmitter.emit("created",{chartRect:chartRect,svg:this.svg,options:options})}function Pie(query,data,options,responsiveOptions){Chartist.Pie.super.constructor.call(this,query,data,Chartist.extend({},defaultOptions,options),responsiveOptions)}Chartist.Pie=Chartist.Base.extend({constructor:Pie,createChart:createChart,determineAnchorPosition:determineAnchorPosition})})(window,document,Chartist);return Chartist})},{}]},{},[]);var Chartist=require("chartist");var data={labels:["1","2","3","4","5","6"],series:[{data:[1,2,3,5,8,13]}]};var options={axisX:{labelInterpolationFnc:function(value){return"Calendar Week "+value}}};var responsiveOptions=[["screen and (min-width: 641px) and (max-width: 1024px)",{showPoint:false,axisX:{labelInterpolationFnc:function(value){return"Week "+value}}}],["screen and (max-width: 640px)",{showLine:false,axisX:{labelInterpolationFnc:function(value){return"W"+value}}}]];new Chartist.Line("#my-chart",data,options,responsiveOptions);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "chartist": "0.4.3"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin