{"id":2069,"date":"2016-12-08T14:25:04","date_gmt":"2016-12-08T13:25:04","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=2069"},"modified":"2016-12-08T14:42:12","modified_gmt":"2016-12-08T13:42:12","slug":"asp-net-pie-chartstortendiagramme-ueber-url-befuellen-und-anzeigen","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=2069","title":{"rendered":"ASP.NET: Generate Pie Charts over GET params from URL \/ Tortendiagramme \u00fcber URL Get Request generieren"},"content":{"rendered":"<h1>Problem<\/h1>\n<p>Es sollen Tortendiagramme in ASP.NET angezeigt werden.<\/p>\n<h1>Ansatz<\/h1>\n<p>Runterladen von<\/p>\n<ul>\n<li><a href=\"https:\/\/jquery.com\/download\/\">JQuery<\/a><\/li>\n<li><a href=\"http:\/\/www.highcharts.com\/download\">HighChart<\/a><\/li>\n<\/ul>\n<p>Die Diagramme k\u00f6nnen \u00fcber einen Request-Parameter erstellt werden:<\/p>\n<p><small>http:\/\/localhost:51241\/PieChartGetParams.aspx?headline=Ich mag Bier&amp;pieces=ein;20;komisches;50;Tortendiagramm;40<\/small><\/p>\n<ul>\n<li><strong>Headline<\/strong>: Ist die \u00dcberschrift des Tortendiagramms<\/li>\n<li><strong>Pieces<\/strong>: Abwechselnd durch Semikolon getrennt immer Tortenst\u00fcck1;Wert1;Tortenst\u00fcck2;Wert2;&#8230;;Tortenst\u00fcckN;WertN<\/li>\n<\/ul>\n<h1>L\u00f6sung &#8211; Solution<\/h1>\n<p>Laden Sie HighCharts runter und passen Sie untenstehenden Quellcode an:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;pfad\/zu\/highcharts.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;charts\/zu\/exporting.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;Pfad\/zu\/jquery-1.4.1.min.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Erstellen Sie eine ASP.NET-Seite mit folgendem Inhalt:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&amp;lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;PieChartGetParams.aspx.cs&quot; Inherits=&quot;PieChart&quot; %&amp;gt;\r\n \r\n &lt;script type=&quot;text\/javascript&quot; src=&quot;Scripts\/jquery-1.4.1.min.js&quot;&gt;&lt;\/script&gt;&lt;script src=&quot;charts\/highcharts.js&quot;&gt;&lt;\/script&gt;&lt;script type=&quot;text\/javascript&quot;&gt;\r\n  $(function () {\r\n    function drawPieChart(seriesData) {\r\n       $(&#039;#container&#039;).highcharts({\r\n\t chart: {\r\n\t   plotBackgroundColor: null,\r\n           plotBorderWidth: null,\r\n           plotShadow: false,\r\n           type: &#039;pie&#039;\r\n\t },\r\n\ttitle: {\r\n          text: &#039;&lt;%=Request.Params&amp;#91;&quot;headline&quot;&amp;#93; %&gt;&#039;\r\n\t},\r\n\ttooltip: {\r\n          pointFormat: &#039;{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;\/b&gt;&#039;\r\n        },\r\n        plotOptions: {\r\n           pie: {\r\n            allowPointSelect: true,\r\n            cursor: &#039;pointer&#039;,\r\n            dataLabels: {\r\n              enabled: true,\r\n              format: &#039;&lt;b&gt;{point.name}&lt;\/b&gt;: {point.y} &#039;,\r\n              style: {\r\n               color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || &#039;black&#039;\r\n              }\r\n           }\r\n        }\r\n     },\r\n     series: &#x5B;{\r\n       name: &quot;Percentage&quot;,\r\n       colorByPoint: true,\r\n       data: seriesData\r\n     }]\r\n  });\r\n }\r\n\r\n function addToPieChart(arr, key, value)\r\n {\r\n    var obj = {};\r\n    obj.name = key;\r\n    obj.y = value;\r\n    arr.push(obj);\r\n }\r\n\r\n var arr = &#x5B;]\r\n\r\n &lt;% if (Request.Params&amp;#91;&quot;pieces&quot;&amp;#93; != null) { string piecesParam = Request.Params&amp;#91;&quot;pieces&quot;&amp;#93;; char&amp;#91;&amp;#93; splitchar = { &#039;;&#039;}; int i = 0; string label = &quot;&quot;; foreach(string s in piecesParam.Split(splitchar)) { if(i%2==0) { label = s; } else { Response.Write(&quot;addToPieChart(arr, &#039;&quot; + label + &quot;&#039;, &quot; + s + &quot;);&quot;); } i++; } } %&gt;\r\n\r\n  var myJsonString = JSON.stringify(arr);\r\n  var jsonArray = JSON.parse(JSON.stringify(arr));\r\n\r\n  drawPieChart(jsonArray);\r\n});\r\n&lt;\/script&gt;\r\n    \r\n    &lt;script src=&quot;charts\/modules\/exporting.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<form id=\"form1\">&nbsp;<\/p>\n<div>\n<p>&nbsp;<\/p>\n<div id=\"container\" style=\"width: 500px; height: 500px;\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<\/form>\n<p>&nbsp;<\/p>\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fwww.capri-soft.de%2Fblog%2F%3Fp%3D2069&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px;margin-top:5px;\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>Problem Es sollen Tortendiagramme in ASP.NET angezeigt werden. Ansatz Runterladen von JQuery HighChart Die Diagramme k\u00f6nnen \u00fcber einen Request-Parameter erstellt werden: http:\/\/localhost:51241\/PieChartGetParams.aspx?headline=Ich mag Bier&amp;pieces=ein;20;komisches;50;Tortendiagramm;40 Headline: Ist die \u00dcberschrift des Tortendiagramms Pieces: Abwechselnd durch Semikolon getrennt immer Tortenst\u00fcck1;Wert1;Tortenst\u00fcck2;Wert2;&#8230;;Tortenst\u00fcckN;WertN L\u00f6sung &#8211; Solution Laden Sie HighCharts runter und passen Sie untenstehenden Quellcode an: &lt;script src=&quot;pfad\/zu\/highcharts.js&quot;&gt;&lt;\/script&gt; &lt;script src=&quot;charts\/zu\/exporting.js&quot;&gt;&lt;\/script&gt; &lt;script &hellip; <a href=\"https:\/\/www.capri-soft.de\/blog\/?p=2069\" class=\"more-link\"><span class=\"screen-reader-text\">ASP.NET: Generate Pie Charts over GET params from URL \/ Tortendiagramme \u00fcber URL Get Request generieren<\/span> weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4,33,34],"tags":[],"class_list":["post-2069","post","type-post","status-publish","format-standard","hentry","category-net","category-c","category-microsoft-iis-server"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4yGeN-xn","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2069"}],"version-history":[{"count":5,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2069\/revisions"}],"predecessor-version":[{"id":2075,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2069\/revisions\/2075"}],"wp:attachment":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}