Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ni-webchartspublic

    Webcharts Build Status Coverage Status

    Webcharts

    Web components for plotting engineering and scientific data with a focus on performance.

    Usage example:

    Import ni-webcharts

    npm install --save ni-webcharts
    

    Add a graph to a webpage:

    <html>
    <head>
        <link rel="stylesheet" href="node_modules/ni-webcharts/styles/webchartsLight.css" />
        <!-- include all script files listed in https://github.com/ni-kismet/webcharts/blob/master/exampleScripts.json -->
    </head>
     
    <body>
        <ni-cartesian-graph value="[[0, 10, 200, 3, 40, 500, 6, 70, 800], [1, 2, 3, 4, 5]]">
          <ni-cartesian-axis show label="Time" show-label axis-position="bottom"></ni-cartesian-axis>
          <ni-cartesian-axis show label="Amplitude" show-label axis-position="left"></ni-cartesian-axis>
          <ni-cartesian-plot show label="Plot 1">
            <ni-cartesian-plot-renderer line-width="1"></ni-cartesian-plot-renderer>
          </ni-cartesian-plot>
          <ni-cartesian-plot show label="Plot 2">
            <ni-cartesian-plot-renderer line-width="1"></ni-cartesian-plot-renderer>
          </ni-cartesian-plot>
        </ni-cartesian-graph>
    </body>
    </html>

    Webcharts main elements

    ni-cartesian-graph is the element that allows you to shows graphs. Add one to a html page and it will be shown as a graph, rendering the data you pass to it in the value attribute. See the Graph Data types formats section for information on the data types supported. The graph is rendered according to the options passed in a series of webcharts components nested inside the main element.

    ni-chart is the element that allows you to show charts. The difference from a graph is that the chart has an internal buffer of historical values, called a HistoryBuffer.

    ni-intensity-graph is the element that allows you to show intensity graphs. An intensity graphs shows values arranged in 2d data structure as an image with the values represented according to a specified color gradient.

    Webcharts nested elements

    ni-cartesian-axis is an element that adds a cartesian axis to one of the main elements.

    ni-cartesian-plot is an element that adds a plot description to one of the main elements.

    ni-cartesian-plot-renderer adds a plot renderer to a plot, specifying the way the data is rendered - line color, line width, bars, points, fill and many other options.

    ni-color-scale adds a color scale to an intensity chart

    Documentation

    Read the API Documentation.

    The documentation for the webcharts is written in markdown and is stored inline in the source code. The tool that extracts the documentation from the source files and updates the documents in the docs folder is invoked by typing:

    npm run docs
    

    Read Supported datatypes and decimations for current status.

    Version and Deployment

    • This package is versioned according to semantic versioning.
    • The version must be bumped using the npm version command (https://docs.npmjs.com/cli/version). This increments the version in package.json, creates a tag with the same version name, and commit both to the local repository.
    • Push the commit and tag using git push --follow-tags. With a passing CI this will automatically trigger a deployment to NPM.

    Changelog

    Read the Changelog.

    WebGL

    In order to use WebGL for drawing, the gl argument must be set to true in the address bar of any page:

    http://localhost/performance/scatter_graph.html?gl=true
    

    This drawing is still experimental and is working for points only.

    Keywords

    none

    install

    npm i ni-webcharts

    Downloadslast 7 days

    535

    version

    1.5.3

    license

    https://www.ni.com/legal/license/

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar