CanvasJS StockChart jQuery Integration

One of our primary goal has been to make it as simple as possible for you to create and add StockCharts into your websites/applications. Given that jQuery is being used widely over the web, we have built a simple jQuery plugin that would allow you to integrate CanvasJS StockCharts using jQuery! So if you find $(“selector”).someAction() way of adding StockChart convenient, you can do so with CanvasJS StockChart Plugin for jQuery.

In case you have any suggestions/feedback please post it in our forum.

Here is how you can create a simple StockChart using the jQuery Plugin.

Here are couple of things that you need to remember while working with the jQuery StockChart plugin.

1. You no longer have to call render() method.
2. CanvasJSStockChart(options) method returns jQuery object which allows you to chain other methods. For example: $(“#stockChartContainer”).CanvasJSStockChart(options).css(“border”, “2px solid black”);/li>
3. After creating a StockChart you can call CanvasJSStockChart() method without passing any parameter to get the StockChart reference – using which you can update the StockChart. For example: $(“#stockChartContainer”).CanvasJSStockChart().
4. Once you get reference to the StockChart object using $(“#stockChartContainer”).CanvasJSStockChart() you can update any of the options – like $(“#stockChartContainer”).CanvasJSStockChart().options.animationEnabled = true. Refer Updating StockChart Options/Data for more information.
5. If a selector returns multiple DOM elements, StockChart is created only in the first element.

Below is an example showing StockChart with data from JSON data-source.

Refer to the StockChart Options section for complete list of options available. Also refer to Updating StockChart Options / Data section for tutorial on updating StockChart dynamically.