Home › docs › charts › integration › jQuery

Pages

open all | close all

jQuery Integration Overview

Since the version 1.0 of CanvasJS our primary goal has been to make it as simple as possible for you to create and add charts. Given that jQuery is being used widely over the web, we thought of building a simple jQuery plugin that would allow you to integrate CanvasJS Charts the jQuery way! So if you find $(“selector”).someAction() way of adding chart convenient, you can do so with CanvasJS Charting Plugin for jQuery.

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


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

Try it Yourself by Editing the Code below.

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

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

Below is a simple example that shows how you can update chart once it has been created.

Try it Yourself by Editing the Code below.

Have a look into our reference section for complete set of options that are available. In order to make it simpler we have also created examples of various chart types using jQuery Plugin.


If you have any questions, please feel free to ask in our forums.Ask Question

Comments 8

  1. How can we do something like “say for a column/bar chart, user clicks on a column/bar and an event is triggered with its attributes’ values”.
    e.g., A column chart with two columns, namely A and B with values 10 and 20 respectively are shown, when we hover over these columns we can view the values. Now, say I click on A, I want that object/selector so that I can get the value 10 and use the same to trigger a function.

  6. please help me collection data with ajax.
    it like this:
    $.ajax({
    type: ‘GET’,
    url: ‘http://example/functions.php’,
    data: { get_param: ‘value’ },
    dataType: ‘json’,
    success: function (data) {
    $.each(data, function(index, element) {
    $(‘body’).append($(”, {
    text: element.name
    }));
    });
    }
    });

If you have any questions, please feel free to ask in our forums. Ask Question

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix