Version

Series Requirements

In this topic

This topic contains the following sections:

Setting ChartType Property

As described in the Chart Types topic the chart can render different types of chart with a simple change of a property.

To assign chart type during initialization:

In Javascript:

<script type="text/javascript">
    $(function () 
    {
        $("#shapeChart").igShapeChart(
            {  
              chartType: "bubble",
            }
        });
    });

</script>
Chart Type x y value radius points*
Point ⏺ ⏺
Line ⏺ ⏺
Spline ⏺ ⏺
HighDensity ⏺ ⏺
Bubble ⏺ ⏺ ⏺
Area ⏺ ⏺ ⏺
Contour ⏺ ⏺ ⏺
Polyline ⏺
Polygon ⏺

Creating Data Items

This section provides examples that show the minimum requirements for each chart type. Each data class below includes properties that are responsible for rending the visual data on the chart.

When setting ChartType property to Point, Line, Spline, or HighDensity value, use:

In Javascript:

<script>
    function ScatterPoints() 
    { 
        var dataItems = 
        [ 
            { "x": 10, "y": 10 },  
            { "x": 20, "y": 20 }, 
        ];
        return dataItems;
    }
</script>

When setting ChartType property to Bubble value, use:

In Javascript:

<script>
    function ScatterBubbles() 
    { 
        var dataItems = 
        [ 
            { "x": 10, "y": 10, "radius": 10 },  
            { "x": 20, "y": 20, "radius": 10 }, 
        ];
        return dataItems;
    }
</script>

When setting ChartType property to Area or Contour value, use:

In Javascript:

<script>
    function ScatterValues() 
    { 
        var dataItems = 
        [ 
            { "x": 10, "y": 10, "value": 10 }, 
            { "x": 20, "y": 20, "value": 10 }, 
        ];
        return dataItems;
    }
</script>

When setting ChartType property to Polyline or Polygon value, use:

<script>
    function ScatterShapes(x, y, w, h) 
    {
        function createShape(x, y, w, h) 
        {
            return [
                { "x": x, "y": y },
                { "x": x + w, "y": y },
                { "x": x + w, "y": y + h },
                { "x": x, "y": y + h },
                { "x": x, "y": y }];
        }
        var data = 
        [ 
           { "points": [createShape(10, 10, 10, 10)]},
           { "points": [createShape(20, 20, 10, 10)]},
        ];    

        return data;
    }
</script>

Related topics:

View on GitHub