Available in the Full Version

Category Chart - Overview

The igCategoryChart 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 category 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.

Use the combo below to change the Category Chart type.

This sample is designed for a larger screen size.

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

This is a basic example showing the types of chart which can be created with the category chart.

Code View

Show In JsFiddle

Copy to Clipboard

                    var data = [
    { "Year": "1995", "China": 1297, "India": 920,  "United States": 266 },
    { "Year": "2005", "China": 1216, "India": 1090, "United States": 295 },
    { "Year": "2010", "China": 1271, "India": 1131, "United States": 314 },
    { "Year": "2015", "China": 1361, "India": 1251, "United States": 322 },
    { "Year": "2020", "China": 1381, "India": 1341, "United States": 342 },
    { "Year": "2025", "China": 1394, "India": 1466, "United States": 361 }
];

var ChartTypes = [
    { "ChartType": "column" },
    { "ChartType": "point" },
    { "ChartType": "line" },
    { "ChartType": "spline" },
    { "ChartType": "splineArea" },
    { "ChartType": "area" },
    { "ChartType": "stepLine" },
    { "ChartType": "stepArea" },
    { "ChartType": "auto" },
];

    // CODE SNIPPET
    $("#chart").igCategoryChart({
        dataSource: data,
        chartType: "column",
    });
    // CODE SNIPPET

    $("#chart").igCategoryChart({ title: "Population per Country" });
    $("#chart").igCategoryChart({
        yAxisFormatLabel: function (value) {
            return value + " M";
        }
    });

    $("#chartTypePicker").igCombo({
        dataSource: ChartTypes,
        mode: "dropdown",
        valueKey: "ChartType",
        textKey: "ChartType",
        placeHolder: "Select Chart type",
        dropDownOnFocus: true,
        initialSelectedItems: [ { index: 0 } ],
        selectionChanged: function (evt, ui) {
            var type = $("#chartTypePicker").igCombo("value");

            $("#chart").igCategoryChart("option", "chartType", type);

            if (type == "column" || type == "auto")  
                $("#chart").igCategoryChart("option", "markerTypes", [ "none" ]);
            else
                $("#chart").igCategoryChart("option", "markerTypes", ["circle"]);

        }
    });

                    <div style="font-size:17px;">Use the combo below to change the Category Chart type.</div>
<select id="chartTypePicker">
</select>
<br /><br />
<div id="chart" style="width:800px;height:400px"></div>

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Category Chart Types</title>

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

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

</head>
<body>
    <div style="font-size:17px;">Use the combo below to change the Category Chart type.</div>
    <select id="chartTypePicker" >
    </select>
    <br /><br />
    <div id="chart" style="width:800px;height:400px"></div>

    <script type="text/javascript">
        var data = [
            { "Year": "1995", "China": 1297, "India": 920,  "United States": 266 },
            { "Year": "2005", "China": 1216, "India": 1090, "United States": 295 },
            { "Year": "2010", "China": 1271, "India": 1131, "United States": 314 },
            { "Year": "2015", "China": 1361, "India": 1251, "United States": 322 },
            { "Year": "2020", "China": 1381, "India": 1341, "United States": 342 },
            { "Year": "2025", "China": 1394, "India": 1466, "United States": 361 }
        ];

        var ChartTypes = [
            { "ChartType": "column" },
            { "ChartType": "point" },
            { "ChartType": "line" },
            { "ChartType": "spline" },
            { "ChartType": "splineArea" },
            { "ChartType": "area" },
            { "ChartType": "stepLine" },
            { "ChartType": "stepArea" },
            { "ChartType": "auto" },
        ];

        $(function () {
            // CODE SNIPPET
            $("#chart").igCategoryChart({
                dataSource: data,
                chartType: "column",
            });
            // CODE SNIPPET

            $("#chart").igCategoryChart({ title: "Population per Country" });
            $("#chart").igCategoryChart({
                yAxisFormatLabel: function (value) {
                    return value + " M";
                }
            });

            $("#chartTypePicker").igCombo({
                dataSource: ChartTypes,
                mode: "dropdown",
                valueKey: "ChartType",
                textKey: "ChartType",
                placeHolder: "Select Chart type",
                dropDownOnFocus: true,
                initialSelectedItems: [ { index: 0 } ],
                selectionChanged: function (evt, ui) {
                    var type = $("#chartTypePicker").igCombo("value");

                    $("#chart").igCategoryChart("option", "chartType", type);

                    if (type == "column" || type == "auto")  
                        $("#chart").igCategoryChart("option", "markerTypes", [ "none" ]);
                    else
                        $("#chart").igCategoryChart("option", "markerTypes", ["circle"]);

                }
            });
        });

    </script>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Category Chart - Overview

Code View