Add Curve Fittings

Building on the Quick Start example, you can add gridMajor and gridMinor objects, which contain styles for the axis grid lines.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets the text to display along the Y axis.
Creates series objects of the following types:
- Three column series objects with labels and X and Y data.
- One pie series object with the location of the center defined and the radius, as well as data and a label for each pie slice.
- One spline series object with a label and X and Y data.
- One bezier series object with a label and X and Y data.

Show Grid Lines Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: {y: {text: "Total Hardware"}}, hint: { content: function () {return this.label + '\n ' + this.y + '';} }, header: {text: "Hardware Distribution"}, seriesList: [{ type: "column", label: "West", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] } }, { type: "column", label: "Central", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } }, { type: "column", label: "East", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } }, { type: "pie", center: { x: 150, y: 150 }, radius: 60, data: [ {label: "MacBook Pro",data: 46.78}, {label: "iMac", data: 23.18}, {label: "MacBook", data: 20.25} ] }, { type: "spline", label: "Steam1", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 6, 2, 9, 5] }, markers: {visible: true, type: "box"} }, { type: "bezier", label: "Steam2", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [1, 3, 4, 7, 2] }, markers: {visible: true, type: "diamond"} }] }); }); </script>

Show Grid Lines Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    $("#wijcompositechart").wijcompositechart({
        axis: {y: {text: "Total Hardware"}},
        hint: {
            content: function () {return this.label + '\n ' + this.y + '';}
            },
        header: {text: "Hardware Distribution"},
        seriesList: [{
            type: "column",
            label: "West",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [5, 3, 4, 7, 2] }
        }, 
        {
            type: "column",
            label: "Central",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [2, 2, 3, 2, 1] }
        }, 
        {
            type: "column",
            label: "East",
            data: { 
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                y: [3, 4, 4, 2, 5] }
        }, 
        {
            type: "pie",
            center: { x: 150, y: 150 },
            radius: 60,
            data: [
                {label: "MacBook Pro",data: 46.78}, 
                {label: "iMac", data: 23.18}, 
                {label: "MacBook", data: 20.25}
                ]
        }, 
        {
            type: "spline",
            label: "Steam1",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [3, 6, 2, 9, 5]
            },
            markers: {visible: true, type: "box"}
        }, 
        {
            type: "bezier",
            label: "Steam2",
            data: {
                x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                y: [1, 3, 4, 7, 2]
            },
            markers: {visible: true, type: "diamond"}
        }]
    });
  });
</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 one in the image below, with a spline chart for the Steam1 series, and a bezier chart for the Steam2 series.

Chart with Curve Fittings

Reference

wijcompositechart API

Concepts

Chart Types