Available in the Full Version

Shape Chart - Chart Types

This example showcases the different chart types in the igShapeChart.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

    <title>ShapeChart Types</title>

</head>

<body>

    <style>
        .chart {
            display: inline-block;
        }
    </style>

    <div id="pointChart" class="chart"></div>
    <div id="bubbleChart" class="chart"></div>
    <div id="areaChart" class="chart"></div>
    <div id="splineChart" class="chart"></div>
    <div id="lineChart" class="chart"></div>
    <div id="highDensityChart" class="chart"></div>
    <div id="contourChart" class="chart"></div>
    <div id="polylineChart" class="chart"></div>
    <div id="polygonChart" class="chart"></div>

    <script> 
        var scatterData = [
            { "X": 20, "Y": 20, "R": 10, "Value": 10 },
            { "X": 20, "Y": 80, "R": 30, "Value": 10 },
            { "X": 80, "Y": 80, "R": 30, "Value": 90 },
            { "X": 80, "Y": 20, "R": 10, "Value": 90 }
        ];  
        var shapeData = [ [GetRectShapes(20, 20)] ];

        var highDensityData = GetDensityData(20, 20);

        $(function () {
            // CODE SNIPPET
            $("#pointChart").igShapeChart({
                chartType: "point",
                dataSource: scatterData,
                title: "Point", 
            });

            $("#bubbleChart").igShapeChart({
                chartType: "bubble",
                dataSource: scatterData, 
                title: "Bubble", 
            });

            $("#areaChart").igShapeChart({
                chartType: "area",
                dataSource: scatterData, 
                title: "Area", 
            });

            $("#polygonChart").igShapeChart({
                chartType: "polygon",
                dataSource: shapeData, 
                title: "Polygon", 
            });

            $("#lineChart").igShapeChart({
                chartType: "line",
                dataSource: scatterData, 
                title: "Line", 
            });

            $("#highDensityChart").igShapeChart({
                chartType: "highDensity",
                dataSource: highDensityData, 
                title: "High Density", 
            });

            $("#contourChart").igShapeChart({
                chartType: "contour",
                dataSource: scatterData, 
                title: "Contour", 
            });

            $("#polylineChart").igShapeChart({
                chartType: "polyline",
                dataSource: shapeData, 
                title: "Polyline", 
            });

            $("#splineChart").igShapeChart({
                chartType: "spline",
                dataSource: scatterData, 
                title: "Spline", 
            }); 
            // CODE SNIPPET

            StyleChart("#pointChart");
            StyleChart("#bubbleChart");
            StyleChart("#areaChart");
            StyleChart("#splineChart");
            StyleChart("#lineChart");
            StyleChart("#highDensityChart");
            StyleChart("#contourChart");
            StyleChart("#polylineChart");
            StyleChart("#polygonChart");
        });

        function GetRectShapes(x, y) {
            x = x || 0;
            y = y || 0;
            var shapes = [
                { "value": 5, "radius": 5, "x": x + 10, "y": y + 10, "points": [GetRectPoints(x, y)] },
                { "value": 50, "radius": 50, "x": x + 60, "y": y + 10, "points": [GetRectPoints(x, y + 40)] }];
            return shapes;
        }

        function GetRectPoints(x, y) {
            return [
                { "x": x, "y": y },
                { "x": x + 60, "y": y },
                { "x": x + 60, "y": y + 20 },
                { "x": x, "y": y + 20 },
                { "x": x, "y": y }];
        }

        function GetDensityData(x, y) {
            x = x || 0;
            y = y || 0;
            var density = [];

            var points = [
                { "x": x, "y": y , },
                { "x": x + 60, "y": y, },
                { "x": x, "y": y + 60, },
                { "x": x + 60, "y": y + 60 }];

            var range1 = 5;
            var range2 = 2.5;
            for (i = 0; i < points.length; i++) {
                for (p = 0; p < 500; p++) {
                    var dx = points[i].x + (GetRandom(-range1, range1) * Math.random());
                    var dy = points[i].y + (GetRandom(-range1, range1) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
                for (p = 0; p < 100; p++) {
                    var dx = points[i].x + (GetRandom(-range2, range2) * Math.random());
                    var dy = points[i].y + (GetRandom(-range2, range2) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
            }
            return density;
        }

        function GetRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function StyleChart(chartID) {

            $(chartID).igShapeChart({
                width: "33%",
                height: "200px",
                xAxisInterval: 20,
                yAxisInterval: 20,
                xAxisMinimumValue: 0,
                yAxisMinimumValue: 0,
                xAxisMaximumValue: 100,
                yAxisMaximumValue: 100,
                xAxisTickLength: 5,
                yAxisTickLength: 5,
                xAxisTickStrokeThickness: 1,
                yAxisTickStrokeThickness: 1,
                xAxisTickStroke: "gray",
                yAxisTickStroke: "gray",
                thickness: 2,
                markerTypes: [ "circle" ],
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
            });
        }

    </script>

</body>

</html>