Available in the Full Version

Category Chart - Marker Types

This is a basic example showing the types of marker which can be displayed on a category chart.
Use the combo below to change the Marker 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 marker which can be displayed on a category chart.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Category Chart Marker Types</title>
    <!-- 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" />
    <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 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>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <script type="text/javascript">
        var data = [
            { "Label": "1995", "United States": 266000000, "India": 920000000,  "China": 1117000000 },
            { "Label": "2000", "United States": 275000000, "India": 990000000,  "China": 1166000000 },
            { "Label": "2005", "United States": 295000000, "India": 1090000000, "China": 1216000000 },
            { "Label": "2010", "United States": 314000000, "India": 1121000000, "China": 1271000000 },
            { "Label": "2015", "United States": 322000000, "India": 1251000000, "China": 1361000000 },
            { "Label": "2020", "United States": 332000000, "India": 1331000000, "China": 1389000000 },
            { "Label": "2025", "United States": 356000000, "India": 1396000000, "China": 1394000000 },
            { "Label": "2030", "United States": 373000000, "India": 1526000000, "China": 1422000000 }
        ];

        var comboData = [
            { "MarkerType": "automatic"}, { "MarkerType": "circle"     },
            { "MarkerType": "triangle" }, { "MarkerType": "pyramid"    },
            { "MarkerType": "square"   }, { "MarkerType": "diamond"    },
            { "MarkerType": "pentagon" }, { "MarkerType": "hexagon"    },
            { "MarkerType": "tetragram"}, { "MarkerType": "pentagram"  },
            { "MarkerType": "hexagram" }, { "MarkerType": "none"       },
        ];

        $(function () {
            $("#chart").igCategoryChart({
                dataSource: data,
                chartType: "line",
                markerTypes: ["automatic"],
                thickness: 2.0,
                xAxisAbbreviateLargeNumbers: true,
                title: "A comparison of population over time",
            });

            $("#markerTypePicker").igCombo({
                dataSource: comboData,
                mode: "dropdown",
                valueKey: "MarkerType",
                textKey: "MarkerType",
                placeHolder: "Select Marker type",
                dropDownOnFocus: true,
                selectionChanged: function (evt, ui) {
                    var selectedMarker = $("#markerTypePicker").igCombo("value");
                    // setting marker type for all series in the chart
                    $("#chart").igCategoryChart("option", "markerTypes", [ selectedMarker ] );
                }
            });
            $("#markerTypePicker").igCombo("value", "automatic");
        });
    </script>
    <div style="font-size:17px;">Use the combo below to change the Marker type.</div>
    <select id="markerTypePicker"></select>
    <br />
    <div id="chart" style="width:800px;height:400px"></div>
</body>
</html>