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

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.

See Also

Widgets

Reference