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.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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.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" />
<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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>