@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var data = [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8];
            $("#wijsparklineDefault").wijsparkline({
                data: data
            });
            $("#wijsparklineArea").wijsparkline({
                data: data,
                type: "area"
            });
            $("#wijsparklineColumn").wijsparkline({
                data: data,
                type: "column"
            });
        });
    </script>
}

<h2>Overview</h2>
<div class="main demo">
            <!-- Begin demo markup -->
			<h3>Line</h3>
            <div id="wijsparklineDefault" style="height:50px;width:200px">
            </div>
			<h3>Area</h3>
			<div id="wijsparklineArea" style="height:50px;width:200px">
            </div>
			<h3>Column</h3>
			<div id="wijsparklineColumn" style="height:50px;width:200px">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>

@section description
{
    <p>
                This sample demonstrates the overview of line and area sparkline.
            </p>
            <h3>Test the features</h3>
            <ul>
                <li>Hover over a data point to see the tooltip.</li>
            </ul>
}

