Last Updated:

How to Create a Beautiful Chart for Your Website

On sites that use diagrams, you can often see simple and dull schemes for using information, I decided in this lesson to tell you how to get out of this situation and use the raphael library to create an unusual animated diagram for the site, the essence of the scheme is that when you hover the mouse cursor, a slide occurs with the output of the chart information, the idea is very simple: we will draw several arcs using mathematical functions, based on some data. And so, then we look at what we got out of it..

First we need to create HTML markup, the HTML structure will consist of a main container with the 'get' class. Here will be stored all the information we need to draw arcs. Next, we create an element with an id 'diagram' that will serve as a container for the chart elements:


The second step will be to create the styles of our diagram, for this we will use CSS, here we need to arrange only 2 things: hide all elements with the 'get' class and set the block sizes with id 'diagram':



Next, we will use JavaScript, or rather the raphael library, first of all we need to create a raphael object (the 'r' variable) and draw the first circle with the radius that is stored in the 'rad' variable.



Now let's take a look at the raphael attributes directly:

  • alpha – arc angle
  • random – random number from the range
  • sx, sy – start drawing at points
  • x, y is the end of drawing at points
  • M – define the starting point. All these paths must be accompanied by the 'moveto' command.
  • A – radius-x, radius-y x-axis-rotation, arc flag, sweep flag, x, y


We gave our chart a percentage ratio, an arc radius, and an arc animation. In fact, the Raphael library has great features and is very interesting for developers, then we will try to develop topics dedicated to this library, that's all.