Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vishwas-r/wp-canvasjs

WP CanvasJS plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library.
https://github.com/vishwas-r/wp-canvasjs

canvasjs canvasjs-charts chart charting-library graphs html5-charts html5-stockcharts javascript-charts javascript-library javascript-stockchart stockchart wordpress wordpress-page

Last synced: about 2 months ago
JSON representation

WP CanvasJS plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library.

Awesome Lists containing this project

README 

        
# CanvasJS for WordPress



This plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library. It creates responsive high-performance Charts & StockCharts that renders across devices including iPhone, iPad, Android, Mac & PCs.



### Documentation

* [Plugin Documentation](https://github.com/vishwas-r/WP-CanvasJS/wiki): https://github.com/vishwas-r/WP-CanvasJS/wiki

* [CanvasJS Official API Documentation](https://canvasjs.com/docs/): https://canvasjs.com/docs/



## CanvasJS Library

CanvasJS is built from ground up for high performance data visualization and can render millions of data points in a matter of milliseconds.



Note:

- This plugin requires you to have CanvasJS License. Please visit [CanvasJS](https://canvasjs.com/license/) for more info.



## CanvasJS Gallery / Demos

[CanvasJS Chart Gallery](https://canvasjs.com/javascript-charts/)

[CanvasJS StockChart Gallery](https://canvasjs.com/javascript-stockcharts/)



## How to add CanvasJS to your WordPress Page / Post?

#### CanvasJS Chart

- Add shortcode `[canvasjschart]`

- Pass chart-options to the chart as 'options'.

  >[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}"]

or

- **Save chart options as json file & pass it as 'optionsurl'.**

  >[canvasjschart optionsurl="URL"]

  

#### CanvasJS StockChart

- Add shortcode `[canvasjsstockchart]`

- Pass chart-options to the chart as 'options'.

  >[canvasjsstockchart options="{title:{text: 'CanvasJS StockChart'}, charts: new Array({data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})})}"]

or

- **Save chart options as json file & pass it as 'optionsurl'.**

  >[canvasjsstockchart optionsurl="URL"]

  

## Styling Chart Container

You can pass style the chart / stockchart container by passing style parameter 

 >[canvasjschart optionsUrl="https://api.npoint.io/5448b28da1502b036561" style="width:100%;height:360px"]



 >[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}" style="width:100%;height:360px"]



Note:

- Don't add space within style. i.e. Use `style="width:100%;height:300px"` and avoid `style="width: 100%; height: 300px"`



#### Plugin Testing

- Last Tested with: WordPress 6.4.3, CanvasJS Charts v3.7.43 & CanvasJS StockCharts v1.7.43

- Last Tested on: Mar 13, 2024



#### License

MIT



BuyMeACoffee