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.