Initializing CanvasXpress Objects

This section covers the convenient initialization methods for CanvasXpress objects that no other library provides.

Creating a New Visualizations

There are many convenient ways to initialize CanvasXpress objects in a web page with previously saved data in either images or JSON, or by including the data in a regular table and adding the class 'CanvasXpress'. CanvasXpress configuration parameters can be embedded in the data attributes of the DOM object making sure the camel case pattern is followed according to the HTML definitions.

1. From a JSON Source

Here is the HTML code where the data is embedded in a <canvas> object of a class 'CanvasXpress', containing a 'data-src' attribute pointing to a JSON file in a URL:

<html>
  <head>
    <!-- The CanvasXpress library -->
    <link rel="stylesheet" href="https://canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script type="text/javascript" src="https://canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>
  <body>
    <!-- canvas element with a "data-src attribute" -->
    <canvas id="canvasId1" class="CanvasXpress" width="540" height="540" data-graph-type="Scatter2D" data-src="https://raw.githubusercontent.com/neuhausi/Rdatasets/master/json/datasets/AirPassengers.json"></canvas>

    <!-- Initialization script -->
    <script>
      // Init all canvas elements in web page of class CanvasXpress
      CanvasXpress.initCanvas();
    </script>
  </body>
</html>

2. From a PNG Image

Here is the HTML code with the data embedded in an <img> object of a class 'CanvasXpress' where the 'src' attribute points to a PNG file in a URL:

<html>
  <head>
    <!-- The CanvasXpress library -->
    <link rel="stylesheet" href="https://canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script type="text/javascript" src="https://canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>
  <body>
    <!-- img element -->
    <img id="canvasId2" class="CanvasXpress" width="540" height="540" src="https://www.canvasxpress.org/assets/images/Ex-bar-9.png" title="CanvasXpress Bar Graph">

    <!-- Initialization script -->
    <script>
      // Init all img elements in web page of class CanvasXpress
      CanvasXpress.initImage();
    </script>
  </body>
</html>

3. From an HTML Table

Here is the HTML code where the data is in a regular <table> of the class 'CanvasXpress':

<html>
  <head>
    <!-- The CanvasXpress library -->
    <link rel="stylesheet" href="https://canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script type="text/javascript" src="https://canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>
  <body>
    <!-- table element -->
    <table id="canvasTable" class="CanvasXpress" data-width="540" data-height="540" data-graph-type="Bar" data-graph-orientation="vertical">
      <tr>
        <td></td>
        <td>Smp1</td>
        <td>Smp2</td>
        <td>Smp3</td>
      </tr>
      <tr>
        <td>Gene1</td>
        <td>10</td>
        <td>35</td>
        <td>88</td>
      </tr>
    </table>

    <!-- Initialization script -->
    <script>
      // Init all table elements in web page of class CanvasXpress
      CanvasXpress.initTable();
    </script>
  </body>
</html>

	Smp1	Smp2	Smp3
Gene1	10	35	88