Whether Infragistics chart supports IE8 browser version?
If it's support how to we can do changes in Infragistics Chart in Ie8 browser version.
Hi,
Currently the igDataChart only supports browsers that support the HTML5 canvas. The first IE browser to support canvas is IE version 9. It may technically be possible to use a Javascript library that emulates the Canvas funtionality on top of VML to support earlier browsers. But this is not a tested or supported scenario. What scenarios are you interested in for IE8? Display? Tooltips? Interactivity? I would recommend filing a feature request describing your usage scenarios for ie8.
-Graham
Infragitics chart support IE8 browser mode but it doesn't support IE8 browser document mode.
Below i have attached screen shot(SS1).
Scenario : how to enable the canvas functionality and to enable the Infragitics chart features in IE8 browser (IE8 browser document mode).
Below i have attached screen shot(SS2).
SS1:
SS2:
Hi, the chart depends on canvas, which is part of IE9, but not earlier versions. You can see my blog for one way of showing the chart in older IE browsers:
http://ko.infragistics.com/community/blogs/engineering/archive/2012/10/04/using-node-js-to-show-our-jquery-chart-in-older-browsers.aspx
You also may have some luck with libraries that attempt to emulate the HTML5 canvas. However, since the chart uses a pretty broad spectrum of canvas features, you need to find a pretty complete emulation for it to work, or you need to go about disabling chart features that interfere with the emulation.
Due to the unknown quality of these emulation methods, I'm not sure we can officially support that kind of emulation, but you may find some way to get things working. Our official support statement for the chart is IE9+
For example, this demonstration shows how you can attempt to load the chart using the Explorer Canvas api, which emulates the canvas element for older browsers. You will note, though, that I have disabled the axis labels in the chart. This is because Explorer Canvas does not seem to emulate any of the text rendering API that is part of the canvas spec.
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> function isCanvasSupported() { var canvas = document.createElement('canvas'); return !!(canvas.getContext && canvas.getContext('2d')); } var oldIE = !isCanvasSupported(); </script> <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script> <script> if (oldIE) { var oldHtml = jQuery.parseHTML; jQuery.parseHTML = function(data, context, scripts) { var ret = oldHtml(data,context,scripts); for (var i = 0; i < ret.length; i++) { if (ret[i].tagName === "canvas") { G_vmlCanvasManager.initElement(ret[i]); } } return ret; } CanvasRenderingContext2D.prototype.getImageData = function (sx, sy, sw, sh) { return { width: sw, height: sh, data: [0,0,0,0] } } } </script> <script type="text/javascript" src="js/infragistics.loader.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script id="tooltipTemplate1" type="text/x-jquery-tmpl"> <div id="tooltip"> <span id="tooltipValue">Value: ${item.Value1}</span> </div> </script> <script id="tooltipTemplate2" type="text/x-jquery-tmpl"> <div id="tooltip"> <span id="tooltipValue">Value: ${item.Value2}</span> </div> </script> <script type="text/javascript"> var test = isCanvasSupported(); console.log(test); $.ig.loader({ scriptPath: "js/", cssPath: "css/", resources: "igDataChart.Category" }); $.ig.loader(function () { $.ig.dvCommonWidget.prototype._isCanvasSupported = function() { return true; } var currData, currDataSource, doGeneration; currData = [ { Label: "A", Value1: 1, Value2: 2 }, { Label: "B", Value1: 2, Value2: 4 }, { Label: "C", Value1: 3, Value2: 3 }, { Label: "D", Value1: 4, Value2: 4 }, { Label: "E", Value1: 2, Value2: 1 }, { Label: "F", Value1: 2, Value2: 2 }, { Label: "G", Value1: 3, Value2: 2 }, { Label: "H", Value1: 1, Value2: 3 } ]; $.support.cors = true; var initOptions = { width: "700px", height: "400px", dataSource: currData, axes: [{ name: "xAxis", type: "categoryX", label: "Label", labelVisibility: "collapsed" }, { name: "yAxis", type: "numericY", labelVisibility: "collapsed" }], series: [{ name: "series1", type: "line", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "Value1", showTooltip: true, tooltipTemplate: "tooltipTemplate1", thickness: 5 }, { name: "series2", type: "line", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "Value2", showTooltip: true, tooltipTemplate: "tooltipTemplate2", thickness: 5 }], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate" } $("#chart").igDataChart(initOptions); }); </script> <style type="text/css"> #chart { position: relative; float: left; margin-right: 10px; } .selectionOptions { margin-bottom: 10px; } </style> </head> <body> <div id="chart"></div> </body> </html>
I've tried your solution mixed with my need but it failed in IE8.
Can you help me ?
Kind Regards.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script> function isCanvasSupported() { var canvas = document.createElement('canvas'); return !!(canvas.getContext && canvas.getContext('2d')); }
var oldIE = !isCanvasSupported(); </script> <!--[if IE]><script type="text/javascript" src="../../../Scripts/excanvas.js"></script><![endif]--> <script src="../../../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="../../../Scripts/modernizr.custom.46160.js" type="text/javascript"></script> <script src="../../../Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script> if (oldIE) { var oldHtml = jQuery.parseHTML; jQuery.parseHTML = function (data, context, scripts) { var ret = oldHtml(data, context, scripts);
for (var i = 0; i < ret.length; i++) { if (ret[i].tagName === "canvas") { G_vmlCanvasManager.initElement(ret[i]); } }
return ret; } CanvasRenderingContext2D.prototype.getImageData = function (sx, sy, sw, sh) { return { width: sw, height: sh, data: [0, 0, 0, 0] } } } </script> <script type="text/javascript" src="../../../Scripts/infragistics.loader.js"></script> <script type="text/javascript" src="../../../Scripts/json2.js"></script>
<script type="text/javascript"> var test = isCanvasSupported(); //console.log(test);
</script>
<link href="~/Styles/SiteTwoColumn.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" id="webDataGrid" src="../../../Scripts/WebDataGridMgt.js"></script><%-- <script src="../../../Scripts/excanvas.js" type="text/javascript"></script> <script src="../../../Scripts/modernizr.custom.46160.js" type="text/javascript"></script>--%> <link href="../../../Styles/themes/redmond/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../../Scripts/infragistics.loader.js" type="text/javascript"></script>
$.ig.loader({ scriptPath: '../../../Scripts/', cssPath: '../../../Styles/', resources: "igReportViewer", theme: '' });
$.ig.loader(function () { $.ig.dvCommonWidget.prototype._isCanvasSupported = function () { return true; } $.support.cors = true;
// Create Report Viewer $("#report").igReportViewer({ //width: 943, height: 685, pageFit: 'fitToWidth', renderSettings: { definitionUri: 'PERSEE.Report;component/StaffWorkingCalc.igr', serviceEndpointUri: "/ReportService.svc/ajaxAddress/" } }); });
<div id="report"> </div> </ContentTemplate> </asp:UpdatePanel> </form></body></html>
You will note that I said that the explorer canvas solution was not very satisfactory as it does not support text rendering, so you are likely to get errors if your axes contain labels (the default case). We can't support these methods of loading the chart because they have varying degrees of quality, and do not necessarily support all of the functionality required to load the chart. But this example gives you an idea of how you might approach using a library that emulates the canvas' behavior to load the chart in older browsers.
There are one or two canvas emulation APIs out there that support text rendering, so you may have more luck with them.
Thanks you for the answer.
In two words, i'm still blocked with my html 5 reportviewer.. :(
As i'm lost, could you give me a name of one of them ?
Kind Regards
By the way, i've already test flashcanvas without any success....