Wijmo UI for the Web
Create an Area or Spline Chart
Wijmo User Guide > Widgets > Chart Widgets > LineChart > LineChart How To > Create an Area or Spline Chart
Show All
Hide All

Area Chart

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

  1. 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>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. 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.

  1. 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>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. Save your HTML file and open it in a browser. The chart appears like the live widget below.
See Also
wijlinechart API

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page