source: main/trunk/ibisph-view/src/main/webapp/xslt/html/DataViz.xslt @ 19890

Last change on this file since 19890 was 19890, checked in by GarthBraithwaite_STG, 2 years ago

view - TEMP COMMIT. Changed webapp context prefix path to base request path so it is not confused with just the context path. put font icon ref into general. added contextnav css back into layout for topic indexes. css file import ordering tweaks.

File size: 23.0 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<xsl:stylesheet version="3.0"
4        xmlns:xsl ="http://www.w3.org/1999/XSL/Transform" 
5        xmlns:xs  ="http://www.w3.org/2001/XMLSchema"
6        xmlns:ibis="http://www.ibisph.org"
7
8        exclude-result-prefixes="ibis xs xsl"
9>
10
11        <ibis:doc>
12                <name>html/DataViz</name>
13                <summary>Templates that create the appropriate HTML code for Kendo objects and Leaflet maps</summary>
14                <description>
15                        Provides templates that creates the title, height, and chart URL then
16                        calls the graphic.chart template to generate the appropriate HTML
17                        code needed for a query result map/chart.
18                </description>
19        </ibis:doc>
20
21
22        <xsl:param name="MapName"
23                ibis:doc="Specifies the type of map to be displayed.  This value is set
24                        via the Java servlet transformation controller with the value coming
25                        either directly from the page request URL or from an HTTP request parameter. 
26                "
27        />
28        <xsl:param name="ChartName" ibis:doc="Optional user selected and injected param."/>
29        <xsl:param name="GridName"  ibis:doc="Optional user selected and injected param."/>
30
31        <xsl:param name="DataViz.noneName" select="'None'" ibis:doc="No Chart chart name."/>
32
33
34        <xsl:function name="ibis:DataViz.getMapName" as="xs:string"
35                ibis:doc="localizes checking the MapName param.  Rules:
36                        1) Use page request URL/HTTP request parameter via the request
37                                params model map and the Java servlet transformation. 
38                        2) Else use supplied chart name param.
39                        3) Else use the none name.
40                "
41        >
42                <xsl:param name="mapName" ibis:doc="Map name unless param override."/>
43
44                <xsl:choose>
45                        <xsl:when test="string-length($MapName) != 0">
46                                <xsl:value-of select="$MapName"/>
47                        </xsl:when>
48                        <xsl:when test="string-length($mapName) != 0">
49                                <xsl:value-of select="$mapName"/>
50                        </xsl:when>
51                        <xsl:otherwise><xsl:value-of select="$DataViz.noneName"/></xsl:otherwise>
52                </xsl:choose>
53        </xsl:function>
54
55        <xsl:function name="ibis:DataViz.showMap" as="xs:boolean"
56                ibis:doc="Checking the supplied mapname and the series or cat dim being
57                        a geo.  Prior to 1/2019 had code that tested constant but this is not
58                        needed as constant have one singular value by definition.
59                "
60        >
61                <xsl:param name="mapName" ibis:doc="Map config name to test."/>
62                <xsl:param name="categoryDimensionName" ibis:doc="cat dim that could be geo."/>
63                <xsl:param name="seriesDimensionName" ibis:doc="series dim that could be geo."/>
64                <xsl:param name="dimensions" ibis:doc="dims used for is geo lookup."/>
65
66                <xsl:variable name="mapNameToTest" select="if(0 != string-length($mapName)) then $mapName else ibis:DataViz.getMapName($mapName)"/>
67                <xsl:variable name="isNoneMapName" select="$DataViz.noneName = $mapNameToTest"/>
68                <xsl:variable name="isCategoryGeoDimension" select="exists($dimensions/DIMENSION[NAME=$categoryDimensionName]/GEOGRAPHY_FLAG)"/>
69                <xsl:variable name="isSeriesGeoDimension"   select="exists($dimensions/DIMENSION[NAME=$seriesDimensionName]/GEOGRAPHY_FLAG)"/>
70                <xsl:value-of select="not($isNoneMapName) and ($isCategoryGeoDimension or isSeriesGeoDimension)"/>
71        </xsl:function>
72
73
74        <xsl:function name="ibis:DataViz.getChartName" as="xs:string"
75                ibis:doc="localizes checking the ChartName param.  Rules:
76                        1) page request URL/HTTP request parameter via the request params
77                                model map and the Java servlet transformation. 
78                        2) Supplied chart name param.
79                        3) IP view chart name.
80                        4) QM view chart name.
81                        5) 'DEFAULT'.
82                "
83        >
84                <xsl:param name="chartName" ibis:doc="Chart name unless param override."/>
85
86                <xsl:choose>
87                        <xsl:when test="string-length($ChartName) != 0">
88                                <xsl:value-of select="$ChartName"/>
89                        </xsl:when>
90                        <xsl:when test="string-length($chartName) != 0">
91                                <xsl:value-of select="$chartName"/>
92                        </xsl:when>
93                        <xsl:otherwise>DEFAULT</xsl:otherwise> 
94                </xsl:choose>
95        </xsl:function>
96
97        <xsl:function name="ibis:DataViz.showChart" as="xs:boolean"
98                ibis:doc="localizes checking the supplied chartName against the 'None' value."
99        >
100                <xsl:param name="chartName" ibis:doc="Chart name to test."/>
101                <xsl:value-of select="$chartName != $DataViz.noneName"/>
102        </xsl:function>
103
104       
105        <xsl:function name="ibis:DataViz.getGridName" as="xs:string"
106                ibis:doc="localizes checking the GridName param.  Rules same as chart."
107        >
108                <xsl:param name="gridName" ibis:doc="Chart name unless param override."/>
109
110                <xsl:choose>
111                        <xsl:when test="string-length($GridName) != 0">
112                                <xsl:value-of select="$GridName"/>
113                        </xsl:when>
114                        <xsl:when test="string-length($gridName) != 0">
115                                <xsl:value-of select="$gridName"/>
116                        </xsl:when>
117                        <xsl:otherwise>DEFAULT</xsl:otherwise> 
118                </xsl:choose>
119        </xsl:function>
120
121
122        <xsl:template name="DataViz.chartContainer" ibis:doc="Kendo chart container HTML code.">
123                <xsl:param name="containerID" select="'chart'" ibis:doc="Value that is used as an ID for chart.  Default = 'chart'."/>
124                <xsl:param name="title"/>
125                <xsl:param name="defaultContent"><img src="{$ibis.baseRequestPath}image/processing.gif" class="Wait"/></xsl:param>
126                <xsl:param name="footerContent" ibis:doc="typically chart narrative."/>
127
128                <figure class="DataViz Chart">
129                        <xsl:if test="0 != string-length($title)"><h3><xsl:value-of select="$title"/></h3></xsl:if>
130                        <div id="{$containerID}"><xsl:copy-of select="$defaultContent"/></div>
131                        <xsl:if test="0 != string-length($footerContent)">
132                        <footer>
133                                <xsl:copy-of select="$footerContent"/>
134                        </footer>
135                        </xsl:if>
136                </figure>
137        </xsl:template>
138
139       
140        <xsl:template name="DataViz.gridContainer" ibis:doc="Kendo Grid container HTML code.">
141                <xsl:param name="containerID" select="'grid'" ibis:doc="Value that is used as an ID for the grid.  Default = 'grid'."/>
142                <xsl:param name="title"/>
143                <xsl:param name="valueAttributeNames"/>
144                <xsl:param name="valueAttributes"/>
145
146                <figure class="DataViz Grid ScrollableContainer">
147                        <xsl:if test="0 != string-length($title)"><h3><xsl:value-of select="$title"/></h3></xsl:if>
148                        <div id="{$containerID}"></div>
149                        <xsl:call-template name="DataViz.valueAttributeFootnote">
150                                <xsl:with-param name="valueAttributeNames" select="$valueAttributeNames"/>
151                                <xsl:with-param name="valueAttributes"     select="$valueAttributes"/>
152                        </xsl:call-template>
153                </figure>
154        </xsl:template>
155
156
157        <xsl:template name="DataViz.mapContainer" ibis:doc="Leaflet map container HTML code.">
158                <xsl:param name="containerID" select="'map'" ibis:doc="Value that is used as an ID for map.  Default = 'map'."/>
159                <xsl:param name="title"/>
160                <xsl:param name="defaultContent"></xsl:param>
161                <xsl:param name="footerContent" ibis:doc="typically map narrative."/>
162
163                <figure class="DataViz Map">
164                        <xsl:if test="string-length($title) != 0"><h3><xsl:value-of select="$title"/></h3></xsl:if>
165                        <div id="{$containerID}"><xsl:copy-of select="$defaultContent"/></div>
166                        <xsl:if test="0 != string-length($footerContent)">
167                        <footer>
168                                <xsl:copy-of select="$footerContent"/>
169                        </footer>
170                        </xsl:if>
171                </figure>
172        </xsl:template>
173
174
175        <xsl:template name="DataViz.choroplethMapJavaScript">
176                <script type="text/javascript" src="{$ibis.baseRequestPath}js/leaflet-src.js"/>
177                <script type="text/javascript" src="{$ibis.baseRequestPath}js/jquery.leaflet.js"/>
178                <script type="text/javascript" src="{$ibis.baseRequestPath}js/geostats.js"/>
179
180                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.GeoJSON.Interactive.js"/>
181                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.GeoJSON.Interactive.Choropleth.js"/>
182                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.LayerSets.js"/>
183                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Control.LayerSets.js"/>
184                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Control.Choropleth.js"/>
185                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Control.Zoom.Min.js"/>
186                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Map.ContextMenu.js"/> 
187        </xsl:template>
188
189        <xsl:template name="DataViz.selectionMapJavaScript">
190                <script type="text/javascript" src="{$ibis.baseRequestPath}js/leaflet-src.js"/>
191                <script type="text/javascript" src="{$ibis.baseRequestPath}js/jquery.leaflet.js"/>
192
193                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.GeoJSON.Interactive.js"/>
194                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.GeoJSON.Interactive.Selection.js"/>
195                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.LayerSets.js"/>
196                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Control.LayerSets.js"/>
197                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Control.Zoom.Min.js"/>
198                <script type="text/javascript" src="{$ibis.baseRequestPath}js/L.Map.ContextMenu.js"/>
199        </xsl:template>
200
201
202        <xsl:template name="DataViz.valueAttributeFootnote">
203                <xsl:param name="valueAttributeNames"/>
204                <xsl:param name="valueAttributes"/>
205
206                <xsl:if test="0 != count($valueAttributeNames)">
207                        <footer class="Footnotes ValueAttribute">
208                                <ul>
209                                        <xsl:for-each select="$valueAttributes//VALUE_ATTRIBUTE">
210                                                <xsl:sort select="SORT_ORDER" order="ascending" data-type="number"/>
211                                                <xsl:if test="exists(current()[NAME = $valueAttributeNames])">
212                                        <li>
213                                                <span><xsl:value-of select="CODE"/></span> 
214                                                <span><xsl:value-of select="DEFINITION"/></span>
215                                        </li>
216                                                </xsl:if>
217                                        </xsl:for-each>
218                                </ul>
219                        </footer>
220                </xsl:if>
221        </xsl:template>
222
223
224
225        <xsl:template name="DataViz.leafletKendoScript" ibis:doc="Provides the kendo and leaflet javascript.">
226                <xsl:param name="scriptContainerID"/>
227                <xsl:param name="dimensions"/>
228                <xsl:param name="datasetRecords"/>
229                <xsl:param name="recordDimensionFields"/>
230                <xsl:param name="recordAncillaryValueFields"/>
231
232                <xsl:param name="measure"/>
233                <xsl:param name="measureValueFormatPattern"/>
234
235                <xsl:param name="recordsJavascriptVariableName"         select="'records'"/>
236                <xsl:param name="leafletMapJavascriptVariableName"      select="'leafletMap'"/>
237                <xsl:param name="kendoDataSourceJavascriptVariableName" select="'kendoDataSource'"/>
238                <xsl:param name="kendoGridJavascriptVariableName"       select="'kendoGrid'"/>
239                <xsl:param name="kendoChartJavascriptVariableName"      select="'kendoChart'"/>
240
241                <xsl:param name="showMap" select="false()"/>
242                <xsl:param name="mapName"/>
243                <xsl:param name="mapContainerID" select="'map'"/>
244                <xsl:param name="geoJSONName"/>
245                <xsl:param name="geoIDFieldName"/>
246                <xsl:param name="geoIDFieldValuePrefixToRemove"/>
247                <xsl:param name="geoTypeTitle"/>
248                <xsl:param name="mapComparisonValue"/>
249                <xsl:param name="mapDimensionFieldInclusionCriteria"/>
250
251                <xsl:param name="showGrid" select="false()"/>
252                <xsl:param name="gridName"/>
253                <xsl:param name="gridContainerID" select="'grid'"/>
254                <xsl:param name="showValueAttributeColumn" select="false()"/>
255                <xsl:param name="showLabelColumn"          select="false()"/>
256                <xsl:param name="showNoteColumn"           select="false()"/>
257
258                <xsl:param name="showChart" select="false()"/>
259                <xsl:param name="chartName"/>
260                <xsl:param name="chartContainerID" select="'chart'"/>
261                <xsl:param name="chartTitle"/>
262
263                <xsl:param name="baseExportFilename" select="'export'"/> 
264<xsl:message select="'mapDimensionFieldInclusionCriteria'"/>
265<xsl:message select="$mapDimensionFieldInclusionCriteria"/>
266
267                <script type="text/javascript">
268                        <xsl:if test="0 != string-length($scriptContainerID)">
269                                <xsl:attribute name="id" select="$scriptContainerID"/>
270                        </xsl:if>
271                        var <xsl:value-of select="$recordsJavascriptVariableName"/> =
272                        [<xsl:text>&#10;</xsl:text>
273                                <xsl:call-template name="Dataset.getDatasetRecordsJSON">
274                                        <xsl:with-param name="dimensions"                 select="$dimensions"/>
275                                        <xsl:with-param name="datasetRecords"             select="$datasetRecords"/>
276                                        <xsl:with-param name="recordDimensionFields"      select="$recordDimensionFields"/>
277                                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
278                                        <xsl:with-param name="measureValueFormatPattern"  select="$measureValueFormatPattern"/>
279                                </xsl:call-template>
280                        ];
281
282                        <xsl:if test="$showMap">
283                        var <xsl:value-of select="$leafletMapJavascriptVariableName"/>ConstructorJSON = $.extend
284                                (true, {}
285,<xsl:call-template name="LeafletMap.baseJSON"/>
286,<xsl:call-template name="LeafletMap.namedConfigurationJSON">
287        <xsl:with-param name="configurationName" select="$mapName"/>
288</xsl:call-template>
289,<xsl:call-template name="LeafletMap.requestJSON"> 
290<!--    <xsl:with-param name="mapTitle"      select="'Choropleth'"/> -->
291        <xsl:with-param name="mapType"       select="'choropleth'"/>
292</xsl:call-template>
293,<xsl:call-template name="LeafletMap.choroplethJSON">
294        <xsl:with-param name="javascriptRecordArrayVariableName" select="$recordsJavascriptVariableName"/>
295        <xsl:with-param name="geoJSONName"    select="$geoJSONName"/>
296        <xsl:with-param name="geoIDFieldName" select="$geoIDFieldName"/> 
297        <xsl:with-param name="geoIDFieldValuePrefixToRemove" select="$geoIDFieldValuePrefixToRemove"/>
298        <xsl:with-param name="legendTitle"    select="$measure/TITLE"/>
299        <xsl:with-param name="geoTypeTitle"   select="$geoTypeTitle"/>
300        <xsl:with-param name="reverseColors"  select="$measure/DESIRABLE_VALUE = 'HIGH'"/>
301        <xsl:with-param name="desirableValue" select="$measure/DESIRABLE_VALUE"/>
302        <xsl:with-param name="comparisonValue" select="$mapComparisonValue"/>
303        <xsl:with-param name="dimensionFieldInclusionCriteria" select="$mapDimensionFieldInclusionCriteria"/>
304</xsl:call-template>
305                                );
306                        </xsl:if>
307
308                        <xsl:if test="$showChart or $showGrid">
309                        var <xsl:value-of select="$kendoDataSourceJavascriptVariableName"/> = new kendo.data.DataSource(
310                                <xsl:call-template name="Kendo.dataSourceConstructorJSON">
311                                        <xsl:with-param name="javascriptRecordArrayVariableName" select="$recordsJavascriptVariableName"/>
312                                        <xsl:with-param name="recordDimensionFields"      select="$recordDimensionFields"/>
313                                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
314                                </xsl:call-template>
315                        );
316                        </xsl:if>
317
318                        <xsl:if test="$showGrid">
319                        var <xsl:value-of select="$kendoGridJavascriptVariableName"/>ConstructorJSON = $.extend
320                        (true, {}
321                                ,<xsl:call-template name="Kendo.baseGridJSON"/>
322                                ,<xsl:call-template name="Kendo.namedConfigurationJSON">
323                                        <xsl:with-param name="configurationName" select="'IndicatorProfileGrid'"/>
324                                </xsl:call-template>
325                                ,<xsl:call-template name="Kendo.requestGridJSON">
326                                        <xsl:with-param name="kendoDataSourceJavascriptVariableName" select="$kendoDataSourceJavascriptVariableName"/>
327                                        <xsl:with-param name="measure" select="$measure"/>
328                                        <xsl:with-param name="recordDimensionFields"      select="$recordDimensionFields"/>
329                                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
330                                        <xsl:with-param name="showValueAttributeColumn" select="$showValueAttributeColumn"/>
331                                        <xsl:with-param name="showLabelColumn"          select="$showLabelColumn"/>
332                                        <xsl:with-param name="showNoteColumn"           select="$showNoteColumn"/>
333                                </xsl:call-template>
334                        );
335                        </xsl:if>
336
337
338                        <xsl:if test="$showChart">
339                        var <xsl:value-of select="$kendoChartJavascriptVariableName"/>ConstructorJSON = $.extend
340                        (true, {}
341                                ,<xsl:call-template name="Kendo.baseChartJSON"/>
342                                ,<xsl:call-template name="Kendo.namedConfigurationJSON">
343                                        <xsl:with-param name="configurationName" select="$chartName"/>
344                                </xsl:call-template>
345                                ,<xsl:call-template name="Kendo.requestChartJSON">
346                                        <xsl:with-param name="kendoDataSourceJavascriptVariableName" select="$kendoDataSourceJavascriptVariableName"/>
347                                        <xsl:with-param name="title"         select="$chartTitle"/>
348                                        <xsl:with-param name="seriesTitle"   select="$recordDimensionFields/RECORD_DIMENSION_FIELD[USAGE='series']/TITLE"/>
349                                        <xsl:with-param name="categoryTitle" select="$recordDimensionFields/RECORD_DIMENSION_FIELD[USAGE='category']/TITLE"/>
350                                        <xsl:with-param name="valueTitle"    select="$measure/TITLE"/>
351
352                                        <xsl:with-param name="seriesFieldName"    select="$recordDimensionFields/RECORD_DIMENSION_FIELD[USAGE='series']/NAME"/>
353                                        <xsl:with-param name="categoryFieldName"  select="$recordDimensionFields/RECORD_DIMENSION_FIELD[USAGE='category']/NAME"/>
354
355                                        <xsl:with-param name="includeDatasetSeries" select="1 &lt; $recordDimensionFields/RECORD_DIMENSION_FIELD[USAGE='series']/VALUE_COUNT"/>
356                                        <xsl:with-param name="recordAncillaryValueFields" select="$recordAncillaryValueFields"/>
357                                </xsl:call-template>
358                        );
359                        </xsl:if>
360
361
362                        var $<xsl:value-of select="$kendoGridJavascriptVariableName"/>;
363                        var $<xsl:value-of select="$kendoChartJavascriptVariableName"/>;
364                        var $<xsl:value-of select="$leafletMapJavascriptVariableName"/>;
365
366                        $(document).ready(function()
367                        {
368                        <xsl:if test="$showMap">
369                                $<xsl:value-of select="$leafletMapJavascriptVariableName"/> = $("#<xsl:value-of select="$mapContainerID"/>").leaflet(<xsl:value-of select="$leafletMapJavascriptVariableName"/>ConstructorJSON);
370                        </xsl:if>
371                        <xsl:if test="$showChart">
372                                $<xsl:value-of select="$kendoChartJavascriptVariableName"/> = $("#<xsl:value-of select="$chartContainerID"/>").kendoChart(<xsl:value-of select="$kendoChartJavascriptVariableName"/>ConstructorJSON);
373                        </xsl:if>
374                        <xsl:if test="$showGrid">
375                                $<xsl:value-of select="$kendoGridJavascriptVariableName"/>  = $("#<xsl:value-of select="$gridContainerID"/>").kendoGrid(<xsl:value-of select="$kendoGridJavascriptVariableName"/>ConstructorJSON);
376                        </xsl:if>
377
378                                // "read" fires the "change" event of the dataSource and any objects
379                                // that ref the data source will be bound.  This needs to occur
380                                // after the grid and chart are created because .autoBind = false.
381                                // Can also fire load by issuing a sort:
382                                // $kendoGrid.getKendoGrid().dataSource.sort({field: "CategorySortOrder", dir: "asc"});
383                                <xsl:value-of select="$kendoDataSourceJavascriptVariableName"/>.read();
384
385                                // Kendo charts have an issue sizing the widget to the full width
386                                // when the chart's container starts out hidden.  Tried numerous
387                                // things with timers and setting the width to the main content
388                                // control to firing resize when the control's input is changed.
389                                // If set the width then even as the window resizes the chart does
390                                // NOT change its size.  So below code was commented out and the
391                                // input on change calls the resize func. 
392                        <xsl:if test="$showChart">
393                                var chartContainerWidth = $(".ExpandableContent").innerWidth();
394//                              $<xsl:value-of select="$kendoChartJavascriptVariableName"/>.getKendoChart().options.chartArea.width = chartContainerWidth;
395                        </xsl:if>
396                        }); //~~~~~~~~~~~~~~~~~~~~ End of Ready Function ~~~~~~~~~~~~~~~~~~~
397
398
399
400
401
402
403// GARTH TODO: Clean up the resize and export stuff....
404
405
406// have to manually add this because Kendo can't.  See:
407// https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages
408// another option: $(window).on("resize", function() { kendo.resize($(".chart-wrapper")); });
409$(window).resize(resizeKendoChart);
410
411
412                        // Called via the chart's expandable content input element's onchange
413                        // firing this code.  Also bound to the windonws resize event to
414                        // properly resize the chart to fit the container.
415                        function resizeKendoChart()
416                        {
417                                kendo.resize( $(".k-chart") );
418                                // another option: $kendoChart.getKendoChart().resize();
419                        } //~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~
420               
421
422                        var baseExportFilename = "<xsl:value-of select="$baseExportFilename"/>";
423
424                        function exportGrid()
425                        {
426                                var grid = $kendoGrid.getKendoGrid();
427                                grid.options.excel.fileName = baseExportFilename + " - data.xlsx";
428                                grid.saveAsExcel();
429                        } //~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~
430
431                        function exportChart()
432                        {
433                                var chart = $kendoChart.getKendoChart();
434
435                                chart.exportImage().done
436                                (
437                                        function(data)
438                                        {
439                                                kendo.saveAs
440                                                ({
441                                                        "dataURI": data
442                                                        ,"fileName": baseExportFilename + ".png"
443                                                });
444                                        }
445                                );
446
447                                chart.exportPDF().done
448                                (
449                                        function(data)
450                                        {
451                                                kendo.saveAs
452                                                ({
453                                                        "dataURI": data
454                                                        ,"fileName": baseExportFilename + " - chart.pdf"
455                                                });
456                                        }
457                                );
458                               
459                                chart.exportSVG().done
460                                (
461                                        function(data)
462                                        {
463                                                kendo.saveAs
464                                                ({
465                                                        "dataURI": data
466                                                        ,"fileName": baseExportFilename + " - chart.svg"
467//                    ,"proxyURL": "https://demos.telerik.com/kendo-ui/service/export"
468                                                });
469                                        }
470                                );
471                        } //~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~
472
473                        function exportMap()
474                        {
475                                alert("Map export is not current supported.");
476                        } //~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~
477                </script>
478
479        </xsl:template>
480
481
482
483        <xsl:template name="DataViz.tieGridAndChart" ibis:doc="">
484                <xsl:param name="gridContainerID"  select="'grid'"  ibis:doc="Value that is used as an ID for the grid.   Default = 'grid'."/>
485                <xsl:param name="chartContainerID" select="'chart'" ibis:doc="Value that is used as an ID for the chart.  Default = 'chart'."/>
486                <xsl:param name="hideToolTipName"  select="'Series'" ibis:doc=".  Default = 'Series'."/>
487
488                <script>
489/*
490var data = [{ Id: 1, Name: "Object 1", Date: new Date(), Amount: 100 }, { Id: 2, Name: "Object 2", Date: new Date(), Amount: 200 }];
491var series = { name: "Series Name", type: "scatter", xField: "Date", yField: "Amount", data: data };
492*/
493
494                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseenter", function () {
495                                var row = $("#grid").data("kendoGrid").dataItem(this); //get the data item attached to this row being hovered
496                                var chart = $("#chart").data("kendoChart"); //get the chart
497                                chart.toggleHighlight(true, function(point) { return point.dataItem.Id === row.Id; }); //highlight the point where the Ids match
498                                chart.showTooltip(function(point) { return point.dataItem.Id === row.Id; }); //show the tooltip for the point where the Ids match
499                        });
500
501                        $("#<xsl:value-of select="$gridContainerID"/> .k-grid-content tr[role='row']").on("mouseleave", function () {
502                                var chart = $("#<xsl:value-of select="$chartContainerID"/>").data("kendoChart"); //get the chart
503                                chart.toggleHighlight(false, "Series"); //remove all highlights for the Series the point is in
504                                chart.hideTooltip("<xsl:value-of select="$hideToolTipName"/>"); //hide tooltips for all points in the Series the point is in
505                        });
506
507        var chart = $("#chart").data("kendoChart"); //get the chart
508$("#grid tr[role='row']").on("mouseenter mouseover", function () {
509        var row = $("#grid").data("kendoGrid").dataItem(this); //get the data item attached to this row being hovered
510        chart.toggleHighlight(true,
511                function(point)
512                {
513                        return point.dataItem.Id === row.rowID;
514                }
515        ); //highlight the point where the Ids match
516        chart.showTooltip(
517                function(point)
518                {
519                        return point.dataItem.Id === row.Id;
520                }
521        ); //show the tooltip for the point where the Ids match
522});
523
524                </script>
525        </xsl:template>
526
527</xsl:stylesheet>
528<!-- ============================= End of File ============================= -->
529
Note: See TracBrowser for help on using the repository browser.