Chart.js Series Chart

Chart.Series.js

(function() {
  "use strict";

  var Chart = this.Chart;
  var helpers = Chart.helpers;

  Chart.SeriesScale = Chart.Scale.extend({
	calculateXLabelRotation : function() {
	  this.xLabelWidth = 0;
	  this.xScalePaddingRight = this.padding;
	  this.xScalePaddingLeft = Math.max(this.yLabelWidth + 10, this.padding);
	},
	calculateYRange: helpers.noop,
	draw : function(){
	  var ctx = this.ctx;
	  var yLabelGap = (this.endPoint - this.startPoint) / this.steps;
	  var xStart = Math.round(this.xScalePaddingLeft);

	  if (!this.display) {
		return;
	  }

	  ctx.fillStyle = this.textColor;
	  ctx.font = this.font;

	  helpers.each(this.yLabels, function(labelString,index){
		var yLabelCenter = this.endPoint - (yLabelGap * index);
		var linePositionY = Math.round(yLabelCenter);

		ctx.textAlign = "right";
		ctx.textBaseline = "middle";
		if (this.showLabels){
		  ctx.fillText(labelString,xStart - 10,yLabelCenter);
		}
		ctx.beginPath();
		if (index > 0){
		  // This is a grid line in the centre, so drop that
		  ctx.lineWidth = this.gridLineWidth;
		  ctx.strokeStyle = this.gridLineColor;
		} else {
		  // This is the first line on the scale
		  ctx.lineWidth = this.lineWidth;
		  ctx.strokeStyle = this.lineColor;
		}

		linePositionY += helpers.aliasPixel(ctx.lineWidth);

		ctx.moveTo(xStart, linePositionY);
		ctx.lineTo(this.width, linePositionY);
		ctx.stroke();
		ctx.closePath();

		ctx.lineWidth = this.lineWidth;
		ctx.strokeStyle = this.lineColor;
		ctx.beginPath();
		ctx.moveTo(xStart - 5, linePositionY);
		ctx.lineTo(xStart, linePositionY);
		ctx.stroke();
		ctx.closePath();

	  },this);

	  var renderedLabelPosX = 0;

	  // Don't skip first and last labels but everything between if labels would overlap
	  helpers.each(this.xLabels,function(label, index) {
		var xPos = this.calculateX(index) + helpers.aliasPixel(this.lineWidth);
		// Check to see if line/bar here and decide where to place the line
		var linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + helpers.aliasPixel(this.lineWidth);

		ctx.beginPath();

		if (index > 0){
		  // This is a grid line in the centre, so drop that
		  ctx.lineWidth = this.gridLineWidth;
		  ctx.strokeStyle = this.gridLineColor;
		} else {
		  // This is the first line on the scale
		  ctx.lineWidth = this.lineWidth;
		  ctx.strokeStyle = this.lineColor;
		}

		ctx.moveTo(linePos, this.endPoint);
		ctx.lineTo(linePos, this.startPoint - 3);
		ctx.stroke();
		ctx.closePath();

		ctx.lineWidth = this.lineWidth;
		ctx.strokeStyle = this.lineColor;

		// Small lines at the bottom of the base grid line
		ctx.beginPath();
		ctx.moveTo(linePos, this.endPoint);
		ctx.lineTo(linePos, this.endPoint + 5);
		ctx.stroke();
		ctx.closePath();

		var labelWidth = ctx.measureText(label).width;

		if (xPos - labelWidth/2 > renderedLabelPosX && (xPos + this.xScalePaddingLeft) + labelWidth/2 < this.width) {
		  ctx.save();
		  ctx.translate(xPos, this.endPoint + 8);
		  ctx.font = this.font;
		  ctx.textAlign = "center";
		  ctx.textBaseline = "top";
		  ctx.fillText(label, 0, 0);
		  ctx.restore();

		  renderedLabelPosX = xPos + labelWidth / 2;
		}
	  },this);
	}
  });
}).call(this);


(function(){
  "use strict";

  var root = this,
	Chart = root.Chart,
	helpers = Chart.helpers;

  Chart.types.Line.extend({
	name : "Series",

	initialize : function(data) {
	  Chart.types.Line.prototype.initialize.apply(this, arguments);
	},
	buildScale : function(labels){
	  var self = this;

	  var dataTotal = function(){
		var values = [];
		self.eachPoints(function(point){
		  values.push(point.value);
		});

		return values;
	  };

	  var scaleOptions = {
		templateString : this.options.scaleLabel,
		height : this.chart.height,
		width : this.chart.width,
		ctx : this.chart.ctx,
		textColor : this.options.scaleFontColor,
		fontSize : this.options.scaleFontSize,
		fontStyle : this.options.scaleFontStyle,
		fontFamily : this.options.scaleFontFamily,
		valuesCount : labels.length,
		beginAtZero : this.options.scaleBeginAtZero,
		integersOnly : this.options.scaleIntegersOnly,
		calculateYRange : function(currentHeight){
		  var updatedRanges = helpers.calculateScaleRange(
			dataTotal(),
			currentHeight,
			this.fontSize,
			this.beginAtZero,
			this.integersOnly
		  );
		  helpers.extend(this, updatedRanges);
		},
		xLabels : labels,
		font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
		lineWidth : this.options.scaleLineWidth,
		lineColor : this.options.scaleLineColor,
		gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
		gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
		padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
		showLabels : this.options.scaleShowLabels,
		display : this.options.showScale
	  };

	  if (this.options.scaleOverride){
		helpers.extend(scaleOptions, {
		  calculateYRange: helpers.noop,
		  steps: this.options.scaleSteps,
		  stepValue: this.options.scaleStepWidth,
		  min: this.options.scaleStartValue,
		  max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
		});
	  }

	  this.scale = new Chart.SeriesScale(scaleOptions);
	}
  });
}).call(this);