Wijmo UI for the Web
CompositeChart Markup and Scripting
Wijmo User Guide > Widgets > Chart Widgets > CompositeChart > CompositeChart Markup and Scripting

The HTML markup for a wijCompositeChart widget looks like this.

Markup
Copy Code
<div id="wijcompositechart" style="width: 500px; height: 400px">
</div>

You can initialize the widget with the following jQuery script.

Script
Copy Code
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {
        $(document).ready(function () {
    $("#wijcompositechart").wijcompositechart({
        //Sets title text vertically along the Y axis.
        axis: {y: {text: "Total Hardware"}},
        //Creates the tooltip text to display on each column, line, 
        //and pie wedge using the label supplied for each data 
        //series in the seriesList.
        hint: {
            content: function () {return this.label + '\n ' + this.y + '';}
        },
        //Sets title text to display above the chart. 
        header: {text: "Hardware Distribution"},
        //Creates an array of series objects to display in the 
        //chart, including the type of chart, label, and x 
        //and y data values.
        seriesList: [
        {
            type: "column",
            //Sets the label to use in the legend, and for this chart, 
            //it is called to display in the hint as well.
            label: "West",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [5, 3, 4, 7, 2] }
        }, 
        {
            type: "column",
            label: "Central",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [2, 2, 3, 2, 1] }
        }, 
        {
            type: "column",
            label: "East",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [3, 4, 4, 2, 5] }
        }, 
        {
            type: "pie",
            label: "asdfdsfdsf",
            center: { x: 150, y: 150 },
            radius: 60,
            data: [
                {label: "MacBook Pro", data: 46.78}, 
                {label: "iMac", data: 23.18}, 
                {label: "MacBook", data: 20.25}]
        }, 
        {
            type: "line",
            label: "Steam1",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [3, 6, 2, 9, 5]
                },
            markers: {visible: true, type: "circle"}
        }, 
        {
            type: "line",
            label: "Steam2",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [1, 3, 4, 7, 2]
            },
            markers: {visible: true, type: "tri"}
        }
    ]
});
        });
    });
</script>

The markup and script featured here results in the following live widget. Mouse over CompositeChart to see the animation.

See Also

How To

KO

Reference

Concepts