Available in the Full Version
Linear Gauge - Grid Integration
This sample demonstrates how to use the igLinearGauge control in a grid.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to use the igLinearGauge control in a grid.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 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" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<table id="grid"></table>
<script type="text/javascript" src="/data-files/wind.js"></script>
<script type="text/javascript">
var lg;
$(function () {
$("#grid").igGrid({
height: 500,
primaryKey:"id",
columns: [
{ headerText: "id", key: "id", dataType: "number", hidden: true},
{ headerText: "Time", key: "Time", dataType: "string", width: 80 },
{ headerText: "Wind Speed (mph)", key: "WindSpeed", dataType: "number", width: 160 },
{ headerText: "Wind Speed Gauge (mph)", key: "gauge", width: 370, template: "<div class='linear-gauge' ></div>" }
],
dataSource: data,
autoGenerateColumns: false,
rowsRendered: function (evt, ui) {
$(".linear-gauge").each(function (i) {
var item = data[i];
$(this).igLinearGauge({
height: "60px",
width: "100%",
backingBrush: "transparent",
backingOutline: "transparent",
minimumValue: 0,
maximumValue: 9,
scaleEndExtent: 0.9,
labelsPostInitial: 1,
value: item.WindSpeed,
needleBrush: "white",
needleOutline: "#2582a9",
ranges: [
{ name: "calm", startValue: 0, endValue: 1 },
{ name: "lightAir", startValue: 1, endValue: 4 },
{ name: "lightBreeze", startValue: 4, endValue: 7 },
{ name: "gentleBreeze", startValue: 7, endValue: 9 }
],
transitionDuration: 1200,
labelInterval: 2,
interval: 1
});
});
},
features: [
{
name: "Updating",
enableAddRow: false,
editMode: "cell",
enableDeleteRow: false,
showReadonlyEditors: false,
enableDataDirtyException: false,
columnSettings: [
{
columnKey: "WindSpeed",
editorType: "numeric",
validation: true,
editorOptions: { minValue: 0, maxValue: 9, required: true }
},
{
columnKey: "Time",
readOnly: true
},
{
columnKey: "gauge",
readOnly: true
}
],
editCellEnding: function (evt, ui) {
if (ui.value != ui.oldValue) {
lg = $(".linear-gauge").eq(ui.rowID).detach();
}
},
editCellEnded: function (evt, ui) {
if (ui.value != ui.oldValue) {
$(".linear-gauge").eq(ui.rowID).remove();
ui.owner.element.find("tr[data-id=" + ui.rowID + "]>td:eq(2)").append(lg);
if (ui.columnKey == "WindSpeed") {
$(".linear-gauge").eq(ui.rowID).igLinearGauge("option", "value", ui.value);
}
}
}
}],
caption: "Raw Data from NOAA. Wind information from Los Angeles (07\\16\\2013) weather station."
});
});
</script>
</body>
</html>
/*
Raw Data from NOAA.
Wind information from Los Angeles weather station.
*/
var data = [
{ "Date": 2013 - 07 - 16, "Time": "10:00", "WindSpeed": 3.305, "WindDirection": 141, id: 0 },
{ "Date": 2013 - 07 - 16, "Time": "11:00", "WindSpeed": 5.832, "WindDirection": 181, id: 1 },
{ "Date": 2013 - 07 - 16, "Time": "12:00", "WindSpeed": 5.637, "WindDirection": 179, id: 2 },
{ "Date": 2013 - 07 - 16, "Time": "13:00", "WindSpeed": 8.747, "WindDirection": 196, id: 3 },
{ "Date": 2013 - 07 - 16, "Time": "14:00", "WindSpeed": 8.553, "WindDirection": 208, id: 4 },
{ "Date": 2013 - 07 - 16, "Time": "15:00", "WindSpeed": 7.581, "WindDirection": 207, id: 5 },
{ "Date": 2013 - 07 - 16, "Time": "16:00", "WindSpeed": 7.775, "WindDirection": 211, id: 6 },
{ "Date": 2013 - 07 - 16, "Time": "17:00", "WindSpeed": 6.026, "WindDirection": 214, id: 7 },
{ "Date": 2013 - 07 - 16, "Time": "18:00", "WindSpeed": 6.803, "WindDirection": 208, id: 8 },
{ "Date": 2013 - 07 - 16, "Time": "19:00", "WindSpeed": 0.583, "WindDirection": 236, id: 9 },
{ "Date": 2013 - 07 - 16, "Time": "20:00", "WindSpeed": 6.609, "WindDirection": 307, id: 10 },
{ "Date": 2013 - 07 - 16, "Time": "21:00", "WindSpeed": 0.000, "WindDirection": 357, id: 11 }
];