Data can be loaded remotely from a url. The url should contain either the data itself or a two dimensional array with the information for the data sets. Please see the examples below.
<!-- 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/canvasXpress.min.js"></script> <!-- 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.json("https://canvasxpress.org/data/dsmall.json", function(err, json) { if (err) { alert(err); return; } else { var data = { y: { smps: ['carat', 'depth', 'table', 'price', 'x', 'y', 'z'], vars: [], data: [] }, z: { 'cut': [], 'color': [], 'clarity': [] } } var config = { graphType: "Scatter2D", colorBy: "cut", xAxis: ['carat'], yAxis: ['price'] } var h = json.shift(); for (var i = 0; i < json.length; i++) { data.y.vars.push('Id' + json[i][0]); data.y.data.push([json[i][1], json[i][5], json[i][6], json[i][7], json[i][8], json[i][9], json[i][10]]); data.z.cut.push(json[i][2]); data.z.color.push(json[i][3]); data.z.clarity.push(json[i][4]); } var c = new CanvasXpress("remotegraphs7", data, config); } }); </script>