Chart Types

You can represent the data using three types of wijsparklines: Line, Area and Column. By default the type is set to Line.

Line: This type is useful for representing a continuous flow of data, such as stock values or sales data.
Area: This type draws the values as an area or region and is useful for representing cumulative data over a period of time.
Column: This type is useful for representing data where previous values and the current value don’t closely affect each other; such as sports scores and cash register receipts.

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            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>

Add the following script between the <head></head> tags to initialize the widget and set its type.

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
$(document).ready(function () {
    $("#wijsparkline").wijsparkline({
        data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8],
        type: "line"
    });
});
});
</script>

Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijsparkline widget.
```
<div id="wijsparkline" style="height:50px;width:200px" />
```
Press F5 to run the project.

What You've Accomplished

The wijsparkline will appear as shown in the image below: