Wijmo UI for the Web
Quick Start
Show AllShow All
Hide AllHide All

In this quick start, you will learn how to add the CompositeChart widget to an HTML project and how to customize it.

  1. In Notepad, create a new HTML page, add the following code and save the document with an .html extension.

    Drop down and copy markup to paste in Notepad

  2. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

    Drop down and copy references to paste inside the head tags

  3. Within the <body> tags, add markup like the following. The </div> element creates the widget, and its id option is set to 'wijcompositechart', which we call in the jQuery script to initialize the widget. This markup also sets the height and width of the widget.

    Drop down and copy markup to paste inside the body tags

  4. Within the <head> tags, below the references, add the following script to initialize the jQuery widget. This script sets several widget options.
      • The X and Y axes are set to show title text.
      • The tooltip (hint) content is set to show data labels.
      • The header displays title text.
      • Chart types, labels, and data, (as well as radius for the pie chart and marker types for the line chart) are added to the seriesList.

    Drop down and copy markup to paste inside the head tags

  5. Save your HTML file and open it in a browser. The widget appears like the following.

See Also

How To

Reference

Concepts

 
Support Options