@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijbarchart").wijbarchart({
                axis: {
                    y: {
                        text: "Total Hardware"

                    },
                    x: {
                        text: ""
                    }
                },
                hint: {
                    content: function () {
                        return this.data.label + '\n ' + this.y + '';
                    }
                },
                header: {
                    text: "Hardware Distribution"
                },
                seriesList: [{
                    label: "West",
                    legendEntry: true,
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
                }, {
                    label: "Central",
                    legendEntry: true,
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
                }, {
                    label: "East",
                    legendEntry: true,
                    data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
                }]
            });
        });
    </script>
}
<h2>
    Overview</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px;
        height: 475px">
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <!-- End options markup -->
    </div>
</div>
@section description
{
    <p>
        The Wijmo Bar Chart widget (wijbarchart) allows you to create customized bar charts
        from various data sources. The samples in this section highlight some of the unique
        features of this widget. This particular sample demonstrates some of the basic features
        of the wijtextbar widget. The source in this sample will show you how to set the
        text of the X axis and Y axis; how to add a header to the chart; how to add label
        text to the legend; and how to populate the chart with data.
    </p>
}
