Quick Start

In this quick start, you'll learn how to add the LineChart widget to an HTML project using HTML markup and jQuery script.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.

Drop down and copy markup

Paste in Notepad.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

Drop down and copy references to paste inside the head tags

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20133.19.js" type="text/javascript"></script>

Add the following markup within the <body> tags to create the widget. The <div> element creates the widget, and we call its id attribute in jQuery to initialize it.

Drop down and copy markup to paste inside the body tags

Markup	Copy Code
<div id="wijlinechart" style="width: 400px; height: 300px"> </div>

Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data.

Drop down and copy script to paste inside the head tags

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ showChartLabels: false, hint: { content: function () { return this.y; } }, header: { text: "World of Warcraft Players by Region" }, axis: { y: {labels: {style: {rotation: -45}}}, x: {labels: {style: {rotation: -45}}} }, seriesList: [ { label: "North America", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000] }, markers: {visible: true, type: "circle"} }, { label: "Europe", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000] }, markers: {visible: true, type: "circle"} }, { label: "Asia", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000] }, markers: {visible: true, type: "circle"} } ], seriesStyles: [ {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1} ], }); var resizeTimer = null; $(window).resize(function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { var jqLine = $("#wijlinechart"), width = jqLine.width(), height = jqLine.height(); if (!width \|\| !height) { window.clearTimeout(resizeTimer); return; } jqLine.wijlinechart("redraw", width, height); }, 250); }); }) </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            showChartLabels: false,
            hint: {
                content: function () {
                    return this.y;
                }
            },
            header: {
                text: "World of Warcraft Players by Region"
            },
            axis: {
                y: {labels: {style: {rotation: -45}}},
                x: {labels: {style: {rotation: -45}}}
            },               
            seriesList: [
                {
                    label: "North America",
                    legendEntry: true,
                    data: {
                        x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), 
                            new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                        y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                    },
                    markers: {visible: true, type: "circle"}
                },
                {
                     label: "Europe",
                     legendEntry: true,
                     data: {
                         x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), 
                             new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                         y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                     },
                     markers: {visible: true, type: "circle"}
                },
                {
                      label: "Asia",
                      legendEntry: true,
                      data: {
                          x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), 
                              new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                          y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                      },
                      markers: {visible: true, type: "circle"}
                }
            ],
            seriesStyles: [
                {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1}
            ],
        });
                var resizeTimer = null;
               $(window).resize(function () {
                    window.clearTimeout(resizeTimer);
                    resizeTimer = window.setTimeout(function () {
                        var jqLine = $("#wijlinechart"),
                    width = jqLine.width(),
                    height = jqLine.height();
                        if (!width || !height) {
                            window.clearTimeout(resizeTimer);
                            return;
                        }
                        jqLine.wijlinechart("redraw", width, height);
                    }, 250);
                });
            })
 </script>

Save your HTML file and open it in a browser. The widget appears like the following live widget.

See Also

How To

Reference