https://github.com/vishwas-r/canvasjs-data-parser
CanvasJS Data Parser - Parse Data to CanvasJS accepted Format
https://github.com/vishwas-r/canvasjs-data-parser
canvasjs charts data-parser data-visualization javascript
Last synced: about 1 year ago
JSON representation
CanvasJS Data Parser - Parse Data to CanvasJS accepted Format
- Host: GitHub
- URL: https://github.com/vishwas-r/canvasjs-data-parser
- Owner: vishwas-r
- License: mit
- Created: 2020-11-27T13:51:08.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-18T05:17:14.000Z (over 2 years ago)
- Last Synced: 2025-02-06T12:12:03.860Z (over 1 year ago)
- Topics: canvasjs, charts, data-parser, data-visualization, javascript
- Language: JavaScript
- Homepage: https://giturl.page.link/canvasjs-dataparser
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CanvasJS Chart DataParser
=========================
This plugin allows you to parse custom data-format to format accepted by [CanvasJS](https://canvasjs.com/)
#### How to Use?
### Importing Script
Import the CanvasJS & CanvasJS DataParser scripts
```
/* HTML Script Tag */
/* or */
import CanvasJS from './canvasjs.min';
window.CanvasJS = CanvasJS;
require('canvasjs-dataparser.min');
/* React */
import CanvasJSReact from './canvasjs.react';
window.CanvasJS = CanvasJSReact.CanvasJS;
require('canvasjs-dataparser.min');
```
To parse array of values to CanvasJS Chart, you can just call parseData method with array as parameter.
```
var chart = new CanvasJS.Chart("chartContainer", {
.
.
.
//Chart Options
data: [{
dataPoints: CanvasJS.parseData([71,55,50,65,95,68,28,34,14])
}]
.
.
.
.
});
chart.render();
```
To render chart with data from JSON, you can call parseDataAndRender method with url to JSON file and the keys from JSON data as parameters.
```
var chart = new CanvasJS.Chart("chartContainer", {
.
.
.
//Chart Options
data: [{
type: "line"
},{
type: "line"
}]
.
.
.
.
});
chart.parseJSONAndRender("https://api.npoint.io/6f8153fa498ba8522ab8", {x: "date", y: "units"}); //JSON file has data with the keys date and units, which are mapped to x & y in the chart
```
#### Resources:
Code: [Github Repo](https://github.com/vishwas-r/CanvasJS-Data-Parser)
Documentation: [CanvasJS Documentation](https://canvasjs.com/docs/)
##### Note:
- Plugin was last tested with **CanvasJS Chart v3.7.24GA**
- This plugin requires you to have CanvasJS License. Please visit **[CanvasJS](https://canvasjs.com/license/)** for more info.
