Create high-quality Web graphs in minutes with Plotr

By
-
43

Author: Dmitri Popov

Need to add professional-looking graphs to your Web site? Using Plotr, you can do this in no time and with minimum fuss.

Plotr is a lightweight charting framework that allows you to create bar, line, and pie charts using just a few lines of JavaScript code inside plain HTML files.

Grab the latest version of the Plotr archive and unpack it. Rename the resulting directory to, for example, plotr. Since Plotr requires the Prototype framework, you have to download it, too. Create a prototype folder in the plotr/lib/ directory and move the downloaded prototype.js file into it. Upload the entire plotr directory to your Web server, and you are ready to go.

Adding the actual chart to an HTML page is straightforward, especially if you are familiar with the JavaScript basics. Let’s say you want to create a chart showing how many vegetables you consume every day. First of all, you have to specify the paths to the required JavaScript files and CSS styles in the header of your HTML page. This could look something like this:

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Plotr Chart Example</title>
    <script src="/lib/prototype/prototype.js" type="text/javascript"></script>
    <script src="/lib/plotr/excanvas.js" type="text/javascript"></script>
    <script src="/lib/plotr/Plotr.js" type="text/javascript"></script>
    <style type="text/css">
      body{font-size:11px;font-family:"Lucida Grande", Arial, sans
  serif;color:#6d6d6d;background:#acc95f; width: 500px; margin:10px auto; text-align:center;}
        a:link,a:visited{text-decoration:none;color:#4c4c4c;font-weight:700;}
        a:hover,a:focus{text-decoration:underline;color:#6a6a6a;}
        #footer{}
    </style>
  </head>

Next, you have to define a canvas for the graph. This requires one line of code containing the height and width of the canvas:

  <div><canvas id="plotr" height="300" width="500"></canvas></div>

Now you can specify a dataset for use with the chart:

  <script type="text/javascript">
    var dataset = {
      'VegetablesDataset': [[0, 11], [1, 13], [2, 9], [3, 3], [4, 5.5], [5, 1], [6, 2[[
    };

The VegetablesDataset array consists of sets containing position numbers (starting with 0) and values. In our case, the values in each set represent the number of each vegetable — for example, 11 tomatoes, 13 cucumbers, 9 potatoes, etc. Each set will be represented as a bar in the bar chart.

Next step is to specify the graph’s options:

  var options = {
    padding: {left: 30, right: 0, top: 10, bottom: 30},
    backgroundColor: '#dbdbdb',
    colorScheme: 'red',
      xTicks: [{v:0, label:'Tomatoes'},
        {v:1, label:'Cucumbers'},
        {v:2, label:'Potatoes'},
        {v:3, label:'Carrots'},
        {v:4, label:'Onions'},
        {v:5, label:'Broccoli'},
        {v:6, label:'Beans'},
        ]
  };

This code is pretty self-explanatory, and it uses only a few of the available options: backgroundColor, colorScheme, and xTicks. While Plotr is not particularly well-documented, you can see all the available options and their brief descriptions directly in the Plotr_uncompressed.js file in the project’s SVN repository.

Finally, initialize the chart using the specified options and dataset:

  var bar = new Plotr.BarChart('plotr',options);
    bar.addDataset(dataset);
    bar.render();
  </script>

The code above generates a bar chart, but you can easily create a line or pie chart by using the Plotr.LineChart and Plotr.PieChart respectively. For example:

  var bar = new Plotr.PieChart('plotr',options);
    bar.addDataset(dataset);
    bar.render();

Plotr also supports multiple datasets, which allows you to create more advanced charts. For example, if you want to create a chart of how many carrots, cucumbers, and potatoes you consume every day of the week, you can create three datasets for each vegetable and use them in the chart as follows:

  var dataset = {
    'Carrots': [[0, 11], [1, 13], [2, 9.5], [3, 3.75], [4, 5.25], [5, 1], [6, 0.7[[,
    'Cucumbers': [[0, 3], [1, 1], [2, 7], [3, 5], [4, 8], [5, 1], [6, 9[[,
    'Potatoes': [[0, 5], [1, 6], [2, 9], [3, 10], [4, 1], [5, 3], [6, 6[[
  };

  var options = {
    padding: {left: 30, right: 0, top: 10, bottom: 30},
    backgroundColor: '#dbdbdb',
    colorScheme: 'green',
    xTicks: [{v:0, label:'Monday'},
    {v:1, label:'Tuesday'},
    {v:2, label:'Wednesday'},
    {v:3, label:'Thursday'},
    {v:4, label:'Friday'},
    {v:5, label:'Saturday'},
    {v:6, label:'Sunday'},
    ]
  };

As you can see, adding charts to Web pages using Plotr doesn’t have to be either difficult or time-consuming.

Dmitri Popov is a freelance writer whose articles have appeared in Russian, British, US, German, and Danish computer magazines.

RELATED ARTICLESMORE FROM AUTHOR