{"action":"created","issue":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/1183","labels_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1183/labels{/name}","comments_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1183/comments","events_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1183/events","html_url":"https://github.com/nnnick/Chart.js/issues/1183","id":86638495,"number":1183,"title":"my issue and solution to running Chart.js pie-chart in MVC in IE11 with EnterpriseMode=Checked and EnterpriseMode=NotChecked","user":{"login":"mkamoski","id":795941,"avatar_url":"https://avatars.githubusercontent.com/u/795941?v=3","gravatar_id":"","url":"https://api.github.com/users/mkamoski","html_url":"https://github.com/mkamoski","followers_url":"https://api.github.com/users/mkamoski/followers","following_url":"https://api.github.com/users/mkamoski/following{/other_user}","gists_url":"https://api.github.com/users/mkamoski/gists{/gist_id}","starred_url":"https://api.github.com/users/mkamoski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkamoski/subscriptions","organizations_url":"https://api.github.com/users/mkamoski/orgs","repos_url":"https://api.github.com/users/mkamoski/repos","events_url":"https://api.github.com/users/mkamoski/events{/privacy}","received_events_url":"https://api.github.com/users/mkamoski/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-06-09T15:30:16Z","updated_at":"2015-06-09T23:20:09Z","closed_at":null,"body":"All -- \r\n\r\nThis is just FYI (as I could not find a forum for Chart.js online?), anyway here is some info in the hopes that it will help someone like me get by the hurdles that I faced.\r\n\r\nProblem... In an MVC5 site, show a simple pie-chart in IE11 and make sure it works OK with both EnterpriseMode=Checked and EnterpriseMode=NotChecked, and note that EnterpriseMode=Checked means \"behave like IE8\" in general but the state for browser-detection is not exactly reported as \"being IE8\", it seems to me.\r\n\r\nWorkaround Solution... This is culled from various sources online, but not finding anything exactly like mine, and this is a workaround to be fair (and probably a hack to some), but it does work for me and maybe it will help you too. Include excanvas.js (via nugget) along with Chart.js (via nugget), detect EnterpriseMode state, create canvas dynamically if EnterpriseMode=Checked, do not use animation or labels or tooltips, etc. So the code is probably not the best, but it is simple, it is easy, it is clear, and it works, AFAICT.\r\n\r\nCode is below.\r\n\r\nCSHTML_BEGIN\r\n\r\n...\r\n\r\nscript src=\"@Url.Content(\"~/Scripts/excanvas.js\")\"></script>\r\n\t\t\t\t<script src=\"@Url.Content(\"~/Scripts/Chart.js\")\"></script>\r\n\t\t\t\t<canvas id=\"pieChartLoc\" height=\"200\" width=\"200\"></canvas>\r\n\t\t\t\t<script>\r\n\r\n\t\t\t\t\t$(document).ready(function()\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tvar myCanvas;\r\n\r\n\t\t\t\t\t\tif (IsEnterpriseMode() === true)\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tmyCanvas = document.createElement('canvas');\r\n\t\t\t\t\t\t\tdocument.getElementById(\"pieChartLoc\").appendChild(myCanvas);\r\n\t\t\t\t\t\t\tmyCanvas.setAttribute(\"width\", 200);\r\n\t\t\t\t\t\t\tmyCanvas.setAttribute(\"height\", 200);\r\n\t\t\t\t\t\t\tmyCanvas = G_vmlCanvasManager.initElement(myCanvas);\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tvar myPieChartData =\r\n\t\t\t\t\t\t[\r\n\t\t\t\t\t\t\t{ value: @ViewBag.CountOfOpenValue, color: \"blue\" },\r\n\t\t\t\t\t\t\t{ value: @ViewBag.CountOfSubmittedValue, color: \"yellow\" },\r\n\t\t\t\t\t\t\t{ value: @ViewBag.CountOfPendingValue, color: \"red\" },\r\n\t\t\t\t\t\t\t{ value: @ViewBag.CountOfInsufficientValue, color: \"green\" }\r\n\t\t\t\t\t\t];\r\n\r\n\t\t\t\t\t\tvar myPieChartOptions = {\r\n\t\t\t\t\t\t\tanimation : false,\r\n\t\t\t\t\t\t\tscaleShowLabels : false,\r\n\t\t\t\t\t\t\tshowTooltips: false\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (IsEnterpriseMode() === true)\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tvar myLine1 = \r\n\t\t\t\t\t\t\t\tnew Chart(myCanvas.getContext(\"2d\")).Pie(myPieChartData, myPieChartOptions);\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tvar myLine2 = \r\n\t\t\t\t\t\t\t\tnew Chart(document.getElementById(\"pieChartLoc\").getContext(\"2d\")).Pie(myPieChartData, myPieChartOptions);\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t</script>\r\n\r\n...\r\n\r\nCSHTML_END\r\n\r\n\r\n\r\nCUSTOM_JS_BEGIN\r\n\r\n...\r\n\r\n//This is a helper that allows a developer to check if the string-to-search containst the value-to-find.\r\nfunction ContainsString(targetStringToSeach, targetValueToFind)\r\n{\r\n\tvar myIsContainedFlag = false;\r\n\ttargetStringToSeach = (targetStringToSeach + \"\").toLowerCase();\r\n\ttargetValueToFind = (targetValueToFind + \"\").toLowerCase();\r\n\tvar myIndex = targetStringToSeach.indexOf(targetValueToFind);\r\n\r\n\tif (myIndex === -1)\r\n\t{\r\n\t\tmyIsContainedFlag = false;\r\n\t}\r\n\telse\r\n\t{\r\n\t\t//If the index-of is not -1, then the value-to-find was matched in the string-to-search.\r\n\t\tmyIsContainedFlag = true;\r\n\t}\r\n\r\n\t//Uncomment here for testing and debugging.\r\n\t//\r\n\t//alert(\"ContainsString.targetStringToSeach='\" + targetStringToSeach + \"'\");\r\n\t//alert(\"ContainsString.targetValueToFind='\" + targetValueToFind + \"'\");\r\n\t//alert(\"ContainsString.myIndex='\" + myIndex.toString() + \"'\");\r\n\t//alert(\"ContainsString.myIsContainedFlag='\" + myIsContainedFlag.toString() + \"'\");\r\n\t\r\n\treturn myIsContainedFlag;\r\n}\r\n\r\n//This is a helper that allows a developer to check if IE is running in Enterprise Mode.\r\nfunction IsEnterpriseMode()\r\n{\r\n\tvar myIsEnterpriseModeFlag = false;\r\n\r\n\tvar myNavigatorUserAgent = (navigator.userAgent + \"\").trim().toLowerCase();\r\n\tvar myIndicatorForIE8 = \"MSIE 8.0\".trim().toLowerCase();\r\n\tmyIsEnterpriseModeFlag = ContainsString(myNavigatorUserAgent, myIndicatorForIE8);\r\n\r\n\t//Uncomment here for testing and debugging.\r\n\t//\r\n\t//alert(\"IsEnterpriseMode.myNavigatorUserAgent='\" + myNavigatorUserAgent + \"'\");\r\n\t//alert(\"IsEnterpriseMode.myIndicatorForIE8='\" + myIndicatorForIE8 + \"'\");\r\n\t//alert(\"IsEnterpriseMode.myIsEnterpriseModeFlag='\" + myIsEnterpriseModeFlag + \"'\");\r\n\r\n\t//Note, as of 2015-06-09...\r\n\t//\r\n\t//With EnterpriseMode=Off, this...\r\n\t//alert(\"navigator.userAgent='\" + navigator.userAgent + \"'\");\r\n\t//...yields this...\r\n\t//navigator.userAgent='Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; \r\n\t//.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko'\r\n\t//\r\n\t//With EnterpriseMode=On, this...\r\n\t//alert(\"navigator.userAgent='\" + navigator.userAgent + \"'\");\r\n\t//...yields this...\r\n\t//navigator.userAgent='Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; \r\n\t//.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)'\r\n\r\n\treturn myIsEnterpriseModeFlag;\r\n}\r\n\r\n\r\n...\r\n\r\nCUSTOM_JS_END\r\n\r\n\r\nSo, HTH, your mileage may vary, have fun, etc.\r\n\r\nThanks.\r\n\r\n-- Mark Kamoski\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/comments/110530510","html_url":"https://github.com/nnnick/Chart.js/issues/1183#issuecomment-110530510","issue_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1183","id":110530510,"user":{"login":"mackuba","id":28465,"avatar_url":"https://avatars.githubusercontent.com/u/28465?v=3","gravatar_id":"","url":"https://api.github.com/users/mackuba","html_url":"https://github.com/mackuba","followers_url":"https://api.github.com/users/mackuba/followers","following_url":"https://api.github.com/users/mackuba/following{/other_user}","gists_url":"https://api.github.com/users/mackuba/gists{/gist_id}","starred_url":"https://api.github.com/users/mackuba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mackuba/subscriptions","organizations_url":"https://api.github.com/users/mackuba/orgs","repos_url":"https://api.github.com/users/mackuba/repos","events_url":"https://api.github.com/users/mackuba/events{/privacy}","received_events_url":"https://api.github.com/users/mackuba/received_events","type":"User","site_admin":false},"created_at":"2015-06-09T23:20:09Z","updated_at":"2015-06-09T23:20:09Z","body":"No problem :)"}}