ni-webcharts
Advanced tools
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/niControlStyles.css" />
<link rel="import" href="node_modules/ni-webcharts/sources/webcharts.html"/>
<script type="text/javascript" src="node_modules/webcomponents-lite/webcomponents-lite.js"></script>
</head>
<body>
<ni-cartesian-graph value="[[0, 10, 200, 3, 40, 500, 6, 70, 800], [1, 2, 3, 4, 5]]">
<ni-cartesian-axis show show-tick-labels label="Time" axis-position="bottom" auto-scale></ni-cartesian-axis>
<ni-cartesian-axis show label="Amplitude" show-tick-labels axis-position="left" auto-scale></ni-cartesian-axis>
<ni-cartesian-plot show="true" label="Plot 1">
<ni-cartesian-plot-renderer line-width="2"></ni-cartesian-plot-renderer>
</ni-cartesian-plot>
<ni-cartesian-plot show label="Plot 2">
<ni-cartesian-plot-renderer line-width="2"></ni-cartesian-plot-renderer>
</ni-cartesian-plot>
</ni-cartesian-graph>
</body>
</html>
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.
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
You can pass to the digital graph one of the following data types to render
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
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.git push --follow-tags. With a passing CI this will automatically trigger a deployment to NPM.FAQs
webcharts graph, chart, intensity graphs, plots and axes
We found that ni-webcharts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.