The HTML markup for a wijBarChart widget looks like this.
Markup |
Copy Code |
---|---|
<div id="wijbarchart" style="width: 450px; height: 350px"> </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.wijbarchart"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ header: {text: "Big Ten Championships"}, horizontal: false, seriesList: [{ label: "Big Ten Championships", legendEntry: false, data: { x: ['Illinois', 'Indiana', 'Iowa', 'Michigan', 'Michigan State', 'Minnesota', 'Nebraska', 'Northwestern', 'Ohio State', 'Penn State', 'Purdue', 'Wisconsin'], y: [230, 167, 105, 351, 84, 178, 3, 69, 185, 57, 69, 183] } }] }); }); }); </script> |
The markup and script featured here results in the following live widget. Mouse over BarChart to see the animation.