Create an Area or Spline Chart

Area Chart

Building on the Quick Start example, you can change the wijlinechart into an area chart using the type option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the type option to "area."

Drop down and copy code

ViewModel Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ type: "area", 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

ViewModel Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            type: "area",
            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

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the live widget below.

Spline Area Chart

You can also use the fitType property of the seriesList option to smooth the angles in the lines and create a spline area chart.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the fitType option of each series in the seriesList to "spline."

Drop down and copy code

ViewModel Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ type: "area", 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", fitType: "spline", 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: "cross"} }, { label: "Europe", fitType: "spline", 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: "box"} }, { label: "Asia", fitType: "spline", 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: "diamond"} } ], 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

ViewModel Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            type: "area",
            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",
                    fitType: "spline",
                    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: "cross"}
                },
                {
                     label: "Europe",
                     fitType: "spline",
                     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: "box"}
                },
                {
                      label: "Asia",
                      fitType: "spline",
                      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: "diamond"}
                }
            ],
            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

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the live widget below.

Area Chart

Spline Area Chart

See Also