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 Editing The Code

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 Editing The Code

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

8 Comments

  1. Subham Das says:

    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. michael9xhp says:

    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