Dynamic Visualization: Fetch Remote URL Data

Remote Graphs in CanvasXpress let users create dynamic visualizations by fetching data from remote sources. Instead of embedding static data, Remote Graphs retrieve data via APIs or external servers, keeping visualizations up-to-date. This is ideal for large datasets or real-time updates, allowing users to integrate external data into their graphs without manual effort.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      CanvasXpress.csv(https://www.canvasxpress.org/data/csv/chickwts.csv, function(err, csv) {
        if (err) {
          alert(err);
          return;
        } else {
          var arr = csv.split("\n").map(function (line) {
            return line.split(",");
          });
          var data = {
            y: {
              smps: [],
              vars: ['weight'],
              data: [[]]
            },
            x: {
              'feed': []
            }
          }
          var config = {
            graphType: "Boxplot",
            groupingFactors: ["feed"],
            graphOrientation: "vertical",
            smpLabelRotate: 90
          }
          arr.shift();
          arr.pop();
          for (var i = 0; i < arr.length; i++) {
            data.y.smps.push('Id' + arr[i][0].replace(/"/g, ''));
            data.y.data[0].push(Number(arr[i][1]));
            data.x.feed.push(arr[i][2].replace(/"/g, ''));
          }
          var c = new CanvasXpress("remotegraphs8", data, config);
        }
      });

    </script>

  </body>

</html>