Available in the Full Version

Shape Chart - Overview

The igShapeChart is an HTML5 control that is a simplified version of the igDataChart and. This lightweight and highly performant chart can be easily configured to display scatter data or shape data using an extremely simple and intuitive API. All you need to do is bind your data (an array of data objects or an array of arrays of data objects) and the chart takes care of everything else. Also this chart has many more features listed in the menu.

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

Show In JsFiddle

Copy to Clipboard

                    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);

            // 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,
           
        }

                    <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>

                    .chart {
    display: inline-block;
}

                    <!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>

Ignite UI for jQuery | Samples

Search Results

Shape Chart - Overview

Code View