cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Line Graph with Raphael.js</h1>
<div id="line-graph" class="line-graph"></div>
            
          
!
            
              @import "compass/css3";

h1 {
  width: 1023px;
  margin: 20px auto 0;
}
.line-graph {
		width: 1023px;
		height: 322px;
		margin: 20px auto 10px;
		background-image: url(data:image/png;base64,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);
}
            
          
!
            
              $(document).ready(function(){
  initLineGraph();
});

/* I am fully aware that all of this code should be made into a class or jQuery plugin */

/* point attributes object to pass to raphael.js*/
var pointOptions = {
	'fill' : '#333333',
	'stroke' : '#7a7a7a',
	radius : 6
}

/* line attributes object to pass to raphael.js*/    
var lineOptions = {
  'stroke': 'rgba(102, 102, 102, .08)',
  'stroke-width': 2,
  'fill': '#000',
  /* nice inner shadow for line, requires line be convex and closed off */
  'fill-opacity': 0.03 /* <-- doesn't work in old IEs */
}

/* initialize graph */    
function initLineGraph () {
	/* set up raphael.js canvas with the elements of the graph element */
  var paper = new Raphael(document.getElementById('line-graph'), $('#line-graph').width(), $('#line-graph').height());  
  graphData.paper = paper;
  
  /* create initial line*/
  var path = createPathString(graphData);
  /* draw intial line with raphael.js */
  var line = paper.path(path); 
  
  /* set line drawing attributes */
  line.attr(lineOptions);
	
  /* save line to our global(I know, I know) data object */
  graphData.line = line;

  /* draw initial points */
  drawPoints(graphData, pointOptions);
  
  /* set graph auto changing (for demo purposes) */
  setInterval(function(){
    advanceGraph();
  }, 3000);

}

/* changes between data sets in global graph object */
function advanceGraph() {
  if(graphData.current < graphData.charts.length -1) {
    graphData.current++;
  }
  else {
    graphData.current = 1;
  }
  
  /* animate to new data positions */
  animatePoints(graphData, graphData.charts[graphData.current]);
}

/* draw initial points */
function drawPoints(data, options) {
  
  /* point radius */
  var radius = options.radius;
  /* set points to initial data set */
  var points = data.charts[0].points;
	
	/* iterate through points */
  for (var i = 0, length = points.length; i < length; i++) {
    /* calculate x and y positions: x delta is a constant, y value is intially set to start at 0 on y axis */
    /* xOffset and yOffets values are the locations within the canvas where the x and y axes are located */
    var xPos = data.xOffset + (i * data.xDelta);
		var yPos = data.yOffset;
    
    /* draw */
    var circle = data.paper.circle(xPos, yPos, radius);
		circle.attr(pointOptions);
    /* store raphael.js point object in global data set */
		points[i].point = circle;
	}
}

/* animate points into new positions */
/* data is the global data object, newData is the new dataset to animate to*/
function animatePoints(data, newData) {
	/* varibale to hold new raphael path string */
  var newPath = '';
	/* upper and lower limits are the limits of the data set and are used to scale the data values into pixel positions */
  var upperLimit = parseInt(newData.upper);
	if(isNaN(upperLimit)) {
		/* don't set to 0 to avoid divide by 0 error */
    upperLimit = 1;
	}
	var lowerLimit = parseInt(newData.lower);
	if(isNaN(lowerLimit)) {
		lowerLimit = 0;
	}
  
  /* used to calculate pixel positions based on limits */ 
	var scaleFactor = data.yOffset / (upperLimit - lowerLimit) ; 

  /* get initial points from global data  */
  var points = data.charts[0].points;
  
  /* loop through points */
	for (var i = 0, length = points.length; i < length; i++) {
		/* if this is the first point add an 'M' set to start drawing the raphael.js path  or use and 'L' set */
    if(i == 0) {
      /* I have hard coded the start of the line, sorry */
      newPath += 'M 25 291 L ';
			/* since the x axis is constant, pass along the original x coordinate */
      newX = data.xOffset + ' ';
			newPath += newX;
			/* calculate the new y value using scale factor and limits */
      newY = data.yOffset - ((newData.points[i].value - lowerLimit) * scaleFactor) + ' ';
			/* add new y to path string */
      newPath += newY;
		}
		else {
			newPath += ' L ';
			newX = data.xOffset + (i * data.xDelta) + ' ';
			newPath += newX;
			newY = data.yOffset - ((newData.points[i].value - lowerLimit) * scaleFactor);
			newPath += newY;
		}
    
    /* animate raphael.js points to new positions */
		points[i].point.animate({
				cy : data.yOffset - ((newData.points[i].value - lowerLimit) * scaleFactor)
			},
			800,
			'ease-in-out'
		);
	}
  /* add end of path string, sorry hardcoded again */
	newPath += ' L 989 291 Z';
  
  /* animate raphael.js line into new position */
  data.line.animate({path : newPath}, 800, 'ease-in-out');
}

/* create a raphael.js path string based on a data set */
function createPathString(data) {

  var points = data.charts[data.current].points;

  
	var path = 'M 25 291 L ' + data.xOffset + ' ' + (data.yOffset - points[0].value);
	var prevY = data.yOffset - points[0].value;

	for (var i = 1, length = points.length; i < length; i++) {
		path += ' L ';
		path += data.xOffset + (i * data.xDelta) + ' ';
		path += (data.yOffset - points[i].value);

		prevY = data.yOffset - points[i].value;
	}
	path += ' L 989 291 Z';
	return path;
}

/**** Global Data Object *****/
  var graphData = {
    current     : 0,
    /* constant distance between points on the x axis */
    xDelta      : 69,
    /* location of y axis in horizontal space */
    xOffset     : 214,
    /* location of x axis in vertical space */
    yOffset     : 289,
    charts      :[
        /* initial data set */
        {
            /* lower limit of the data set (can be used to flatten or exaggerate the graph) */
            lower  : 0,
            /* upper limit is the upper limit of the data set (set it a bit above your highest data point)*/
            /* used to convert data values into pixel positions */
            upper  : 200,
            points : [
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0},
                { value : 0}
            ]
        },
        {
            lower  : 0,
            upper  : 200,
            points : [
                { value : 58},
                { value : 64},
                { value : 12},
                { value : 90},
                { value : 101},
                { value : 87},
                { value : 53},
                { value : 72},
                { value : 88},
                { value : 109},
                { value : 45},
                { value : 37}
            ]
        },
        {
            lower  : 0,
            upper  : 200,
            points : [
                { value : 132},
                { value : 112},
                { value : 124},
                { value : 73},
                { value : 92},
                { value : 47},
                { value : 67},
                { value : 35},
                { value : 112},
                { value : 90},
                { value : 75},
                { value : 62}
            ]
        }
    ]
};
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console