# Overview

CanvasXpress is a standalone JavaScript library that works in all modern browsers on mobile, tablets and desktop devices. The basic usage is very simple:

  1. Include the JavaScript and the CSS CanvasXpress library files in the <head> element of the web page.
  2. Include a script to handle the data, the configuration, and the constructor of the CanvasXpress object in the <head> element of the web page. An advanced use is included in the initialization section.
  3. Include a <canvas> element inside the <body> element where the visualization will be displayed.

Example:

<html>

  <head>

    <!-- 1. Include the CanvasXpress library -->
    <link rel="stylesheet" href="path-to-canvasXpress.css" type="text/css"/>
    <script type="text/javascript" src="path-to-canvasXpress.min.js"></script>

    <!-- 2. Include script to initialize object -->
    <script>
      onReady(function () {

        // Data
        var data = { "y": {
                       "vars": [ "Gene1"],
                       "smps": [ "Smp1", "Smp2", "Smp3" ],
                       "data": [ [ 10, 35, 88 ] ]
                     }
                   };

        // Configuration
        var conf = { "graphType": "Bar" };

        // Initialize object
        var cX = new CanvasXpress("canvasId", data, conf);

      });
    </script>

  </head>

  <body>

    <!-- 3. DOM element where the visualization will be displayed -->
    <canvas  id="canvasId" width="540" height="540"></canvas>

  </body>

</html>

You can copy the snippet above to an .html file on your computer and open it in your browser to display a live bar graph like the one below.