1:
// >
2: jQuery.support.cors = true;
3: $.ig.loader({
4: scriptPath: "/Scripts/Infragistics/js/", //local files version
5: cssPath: "/Content/Infragistics/css/",
6: resources: "igGrid.Selection.Paging.Sorting,igMap,igDataChart.*",
7: theme: "metro"
8: });
9: $.ig.loader(function () {
10: var data = [];
11: var selected;
12:
13: $("#map").igMap({
14: width: "500px",
15: height: "500px",
16: panModifier: "control",
17: horizontalZoomable: true,
18: verticalZoomable: true,
19: windowResponse: "immediate",
20: overviewPlusDetailPaneVisibility: "visible",
21: seriesMouseLeftButtonUp: function (ui, args) {
22: var tets = args;
23: }
24: });
25:
26:
27: $("#chart").igDataChart({
28: width: "650px",
29: height: "220px",
30: dataSource: "/Home/Orders",
31: axes: [{ name: "xAxis", type: "categoryX", label: "OrderID", labelVisibility: "visible" },
32: { name: "yAxis", type: "numericY", labelVisibility: "visible"}],
33: series: [
34: { name: "series",
35: title: "Order Freight Series",
36: type: "line",
37: xAxis: "xAxis",
38: yAxis: "yAxis",
39: valueMemberPath: "Freight", trendLineThickness: 6, thickness: 4,
40: trendLineBrush: "cyan",
41: transitionDuration: 1500,
42: trendLineType: "exponentialAverage"
43: }],
44: horizontalZoomable: true,
45: verticalZoomable: true,
46: windowResponse: "immediate",
47: overviewPlusDetailPaneVisibility: "visible"
48: });
49:
50: $('#grid').igGrid({
51: virtualization: false, height: 280, width: 650,
52: dataSource: "/Home/Customers",
53: autoGenerateColumns: false,
54: columns: [
55: { headerText: "Customer ID", key: "CustomerID", width: "120px", dataType: "string" },
56: { headerText: "Country", key: "Country", width: "150px", dataType: "string" },
57: { headerText: "City", key: "City", dataType: "string" },
58: { headerText: "Contact Name", key: "ContactName", dataType: "string" },
59: {headerText: "Phone", key: "Phone", dataType: "string" }
60: ],
61: features: [
62:
63: {
64: name: 'Selection',
65: mode: 'row',
66: multipleSelection: false,
67: rowSelectionChanged: function (ui, args) {
68: $("#chart").igDataChart({
69: dataSource: "/Home/Orders?userID=" + args.row.element[0].cells[0].textContent
70: });
71:
72: selected = args.row.element[0].cells[0].textContent; //keep track of selected user
73: var url = "http://nominatim.openstreetmap.org/search/" + args.row.element[0].cells[1].textContent + "?format=json";
74: $.getJSON(url,
75: function (json, text) {
76: var name, lat, lon;
77: $.each(json, function (index, value) {
78: if (value.class === "place" && value.type === "country") {
79: name = value.display_name;
80: lat = parseFloat(value.lat);
81: lon = parseFloat(value.lon);
82: //alert(lat);
83: }
84: });
85: data = [{ Name: name, Latitude: lat, Longitude: lon}];
86: //add or override existing series named 'Countries'
87: //adding this series *after* the shapefile ones will cause the markers to appear above the shape lines, which is what we want
88: $("#map").igMap({
89: series: [{
90: name: "Countries",
91: type: "geographicSymbol",
92: longitudeMemberPath: "Longitude",
93: latitudeMemberPath: "Latitude",
94: /*
95: The provided object should have properties called render and optionally measure.
96: These are functions which will be called that will be called to handle the user specified custom rendering.
97: */
98: markerTemplate: {
99: render: function (renderInfo) {
100: var ctx = renderInfo.context; //2d canvas context
101: var x = renderInfo.xPosition;
102: var y = renderInfo.yPosition;
103:
104: if (renderInfo.isHitTestRender) {
105: // This is called for tooltip hit test only
106: // Rough marker rectangle size calculation
107: ctx.fillStyle = "yellow";
108: ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight);
109: } else {
110: //actual marker drawing is here:
111: var markerData = renderInfo.data;
112: var name = markerData.item()["Name"];
113: //set font or measure will be for the default one
114: ctx.font = '10pt Segoe UI';
115: var textWidth = ctx.measureText(name).width;
116:
117: //Move the path point to the desired coordinates:
118: ctx.moveTo(x, y);
119: //Draw lines:
120: ctx.beginPath();
121: ctx.lineTo(x - (textWidth / 2) - 5, y + 5);
122: ctx.lineTo(x - (textWidth / 2) - 5, y + 40); // 35width rect.
123: ctx.lineTo(x + (textWidth / 2) + 5, y + 40); // full textWidth line plus 5 margin
124: ctx.lineTo(x + (textWidth / 2) + 5, y + 5); // 35 up
125: ctx.lineTo(x, y);
126: //finish the shape
127: ctx.closePath();
128: ctx.fillStyle = "rgba(78,183,226,0.7)";
129: ctx.fill();
130: ctx.lineWidth = 0.5;
131: ctx.strokeStyle = "#185170";
132: ctx.stroke();
133: //add a point at the start
134: ctx.beginPath();
135: ctx.fillStyle = "black";
136: ctx.arc(x, y, 1.5, 0, 2 * Math.PI, true);
137: ctx.fill();
138:
139: // Draw text
140: ctx.textBaseline = "top";
141: ctx.fillStyle = "black";
142: ctx.textAlign = 'center';
143: ctx.fillText(selected, x, y + 8);
144: ctx.fillText(name, x, y + 20);
145: }
146: }
147: },
148: dataSource: data
149: }]
150: });
151: //}
152: });
153:
154: }
155: }
156: ,
157:
158: {
159: name: 'Sorting',
160: type: "remote"
161: },
162: {
163: name: 'Paging',
164: type: "local",
165: pageSize: 10
166: }]
167: ,
168: rendered: function (ui, args) {
169: //set up on-load selection
170: $('#grid').igGridSelection("selectRow", 0);
171: //another way to get cell value independant of event parameters
172: var id = $('#grid').igGrid("getCellValue", 0, "CustomerID");
173: $("#chart").igDataChart({
174: dataSource: "/Home/Orders?userID=" + id
175: });
176:
177:
178: }
179: });
180: });
181:
// ]]>
