Portfolio

Plugins for CanvasJS JavaScript Charts

CanvasJS is an HTML5 & JavaScript based Charting Library that runs on all modern devices including iPhone, Android, Desktops, etc. Charts are beautiful and API is very simple to use.

CanvasJS Features:
  • Simple API and easy to use
  • Supports 30+ different types of Charts / Graphs
  • 10x faster than conventional Flash / SVG based Charting Libraries
  • Comes with Several beautiful looking themes
  • Well Maintained and Updated Documentation
  • Works across browsers (Chrome, Firefox, Safari, IE8+)
  • Can be integrated with Serverside and Frontend technologies like ASP.Net, PHP, Spring MVC, JSP, jQuery, Angular, React, etc.

1. WP-CanvasJS: CanvasJS Charts for WordPress Posts & Pages

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

How to add CanvasJS to your WordPress Page / Post?
  • 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 })})}" style="width:100%;height:300px"]

Note:

  • Don't add space within style. i.e. Use style="width:100%;height:300px" and avoid style="width: 100%; height: 300px"
  • This plugin requires you to have CanvasJS License. Please visit CanvasJS for more info.

GitHub Repo: WP-CanvasJS-Charts

2. Export CanvasJS Chart Data as CSV

This plugin allows you to export and save CanvasJS Chart's data as CSV.

How to Use?
  • Create and Render CanvasJS Chart
  • Call CanvasJSAsCSV method with chart and filename as parameter “` var chart = new CanvasJS.Chart("chartContainer", { . . . //Chart Options . . . }); chart.render();

CanvasJSAsCSV(chart, "filename"); “`

When exportEnabled is set to true

exportEnabled true

When exportEnabled is set to false

exportEnabled false

GitHub Repo: Export-CanvasJS-Chart-Data-as-CSV