CanvasXpress with command line

NodeJS

Node module to run CanvasXpress in the command line

Installation

                
npm install canvasxpress-cli --save
                
              

                
cd path/to/install/directory
 
node_modules/canvasxpress-cli/bin/canvasxpress help
 
    canvasxpress [command] 
 
    png ................ create a png file from an existing CanvasXpress file or url
    svg ................ create a svg file from an existing CanvasXpress file or url
    json ............... create a json file from an existing CanvasXpress file or url
    csv ................ create a CanvasXpress png file from a local csv file or url
    reproduce .......... create CanvasXpress png files from a local file or url
    canvas ............. run scripts files to test CanvasXpres
    test ............... test package. Creates images and json file in test directory
    version ............ show this package version
    help ............... show this help. Add command to show corresponding help
              
            

CanvasXpress React

NodeJS

Node module to use CanvasXpress with React. Code hosted at npm

Installation

                
npm install canvasxpress-react --save
                
              

Step-By-Step instructions

  1. Create a React App
    Refer to documentation on Creating a New React App for more info.
  2. Install canvasxpress-react
    See above!
  3. Import CanvasXpress React Component
    Add the following code to your app.

                
import React from 'react';
import ReactDOM from 'react-dom';
import CanvasXpressReact from 'canvasxpress-react';
class Bar extends React.Component {
 
  render() {
 
    var target = "canvas";
     
    var data =  {
      "y" : {
        "vars" : ["Variable1"],
        "smps" : ["Sample1", "Sample2", "Sample3"],
        "data" : [[33, 48, 55]]
      }
    };
 
    var config = {
      "graphOrientation": "vertical",
      "graphType": "Bar",
      "theme": "CanvasXpress",
      "title": "Simple Bar graph"
    };
   
    return (
      <CanvasXpressReact target={target} data={data} config={config} width={500} height={500} />
    )
     
  }
 
}
var reactapp = document.createElement("div");
document.body.appendChild(reactapp);
ReactDOM.render(<Bar />, reactapp)
                
              

CanvasXpress Angular

NodeJS

File example to run CanvasXpress with Angular.

app.component.ts

                
import { Component, OnInit } from '@angular/core';
import CanvasXpress from 'canvasxpress';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
 
export class AppComponent implements OnInit {
  ngOnInit() {
    let cX = new CanvasXpress.init("targetId", 
      {
        "y" : {
          "vars" : ["Variable1"],
          "smps" : ["Sample1", "Sample2", "Sample3"],
          "data" : [[33, 48, 55]]
        }			
      }, {
        "graphOrientation": "vertical",
        "graphType": "Bar",
        "theme": "CanvasXpress",
        "title": "Simple Bar graph"
      });
  });
}
                
              

app.component.html

                
<div id="targetId"></div>