﻿
{"id":3243,"date":"2015-09-05T15:10:36","date_gmt":"2015-09-05T15:10:36","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=3243"},"modified":"2015-09-05T15:10:36","modified_gmt":"2015-09-05T15:10:36","slug":"asp-net-mvc-chart-kontrolu-tam-sayfa-sikintisi","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvc-chart-kontrolu-tam-sayfa-sikintisi\/","title":{"rendered":"Asp.NET MVC Chart Kontrol\u00fc Tam Sayfa S\u0131k\u0131nt\u0131s\u0131"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Asp.NET MVC projelerinde istatistiksel verileri kolayca bir \u015fekilde grafiksel raporlar halinde sunmam\u0131z\u0131 sa\u011flayan Chart kontrol\u00fc hakk\u0131nda tam sayfa s\u0131k\u0131nt\u0131s\u0131 do\u011fmaktad\u0131r.<a href=\"http:\/\/www.gencayyildiz.com\/blog\/asp-net-mvc-4-0-chart-nesnesi\/\" target=\"_blank\">Asp.NET MVC 4.0 Chart Nesnesi<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Chart kontrol\u00fc nedir, nas\u0131l kullan\u0131l\u0131r teferruat\u0131yla irdelemi\u015ftik.Lakin bu yaz\u0131m\u0131z\u0131n i\u00e7eri\u011fi bu kontrol\u00fc kullanmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda ilgili alandan ziyade sadece Chart kontrol\u00fcyle sayfay\u0131 tam ekran olarak kapsama s\u0131k\u0131nt\u0131s\u0131n\u0131 nas\u0131l \u00e7\u00f6zece\u011fimizi konu\u015faca\u011f\u0131z.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;div&gt;\r\n    Grafik\r\n&lt;\/div&gt;\r\n\r\n&lt;div style=&quot;width:500px;height:500px;&quot;&gt;\r\n    @{\r\n        var GrafikCiz = new Chart(500, 500);\r\n        GrafikCiz.AddTitle(&quot;Gen\u00e7ay Y\u0131ld\u0131z Grafik&quot;).AddLegend(&quot;Gen\u00e7ay Y\u0131ld\u0131z&quot;).AddSeries(&quot;De\u011ferler&quot;, xValue: new&#x5B;] { &quot;Ahmet&quot;, &quot;Necati&quot;, &quot;Mustafa&quot;, &quot;Gen\u00e7ay&quot; }, yValues: new&#x5B;] { &quot;4&quot;, &quot;6&quot;, &quot;1&quot;, &quot;23&quot; }).Write();\r\n    }\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Yukar\u0131daki kod yap\u0131s\u0131n\u0131 ele al\u0131rsak e\u011fer, Chart kontrol\u00fc olu\u015fturuldu\u011fu esnada ilgili div i\u00e7erisinde olu\u015fturulmas\u0131n\u0131 istedi\u011fimiz halde derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi t\u00fcm sayfay\u0131 kaplar halde bulmaktay\u0131z.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131.png\" alt=\"Asp.NET MVC Chart Kontrol\u00fc Tam Sayfa S\u0131k\u0131nt\u0131s\u0131\" width=\"491\" height=\"524\" class=\"aligncenter size-full wp-image-3244\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131.png 491w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131-281x300.png 281w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/a><\/p>\n<p>Write komutuyla Chart nesnesini sayfam\u0131za bast\u0131\u011f\u0131m\u0131z anda ilgili alana basma i\u015flemini ger\u00e7ekle\u015ftirememesinin sebebi ilgili sayfan\u0131n ContentType \u00f6zelli\u011fini jpeg format\u0131na \u00e7evirmesinden kaynaklanmaktad\u0131r.Bu sebepten t\u00fcm sayfa bir image \u00f6zelli\u011fine sahip oldu\u011fu i\u00e7in sadece Chart nesnesi bas\u0131lmaktad\u0131r.<\/p>\n<p>Bu i\u015flemi atlatabilmek i\u00e7in Chart nesnesini Server taraf\u0131nda olu\u015fturup View katman\u0131na g\u00f6ndermeli ve olu\u015fturulup g\u00f6nderilen bu nesneyi ilgili alana basmal\u0131y\u0131z.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        public ActionResult GrafikOlustur()\r\n        {\r\n            var GrafikCiz = new Chart(500, 500);\r\n            GrafikCiz.AddTitle(&quot;Gen\u00e7ay Y\u0131ld\u0131z Grafik&quot;).AddLegend(&quot;Gen\u00e7ay Y\u0131ld\u0131z&quot;).AddSeries(&quot;De\u011ferler&quot;, xValue: new&#x5B;] { &quot;Ahmet&quot;, &quot;Necati&quot;, &quot;Mustafa&quot;, &quot;Gen\u00e7ay&quot; }, yValues: new&#x5B;] { &quot;4&quot;, &quot;6&quot;, &quot;1&quot;, &quot;23&quot; }).Write();\r\n\r\n            return File(GrafikCiz.ToWebImage().GetBytes(), &quot;image\/jpeg&quot;);\r\n        }\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer Chart nesnesinin Controller&#8217;da(yani serverda) \u00fcretildi\u011fini g\u00f6receksiniz.Nihayetinde grafiksel bir yap\u0131da olan bu nesneyi jpeg format\u0131nda elde edece\u011fimizden dolay\u0131 geriye File metodu ile bir image format\u0131na \u00e7evirip g\u00f6nderiyoruz.<\/p>\n<p>Bundan sonra yapmam\u0131z gereken i\u015flem bu gelen image nesnesini sayfam\u0131zda ilgili alana basmak.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;div&gt;\r\n    Grafik\r\n&lt;\/div&gt;\r\n\r\n&lt;div style=&quot;width:500px;height:500px;&quot;&gt;\r\n    &lt;img src=&quot;@Url.Action(&quot;GrafikOlustur&quot;,&quot;Home&quot;)&quot; \/&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131zdaki &#8220;GrafikOlustur&#8221; isimli Action metodundaki grafi\u011fi olu\u015fturacak metot link olarak belirtilmi\u015ftir.Yukar\u0131da da belirtti\u011fim gibi bu &#8220;GrafikOlustur&#8221; isimli Action metodumuz geriye d\u00f6nd\u00fc\u011f\u00fc nesne bir image nesnesi olaca\u011f\u0131 i\u00e7in bu nesneyi direkt link olarak belirtebiliyoruz.<\/p>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131-2.png\" alt=\"Asp.NET MVC Chart Kontrol\u00fc Tam Sayfa S\u0131k\u0131nt\u0131s\u0131 - 2\" width=\"511\" height=\"224\" class=\"aligncenter size-full wp-image-3245\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131-2.png 511w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVC-Chart-Kontrol\u00fc-Tam-Sayfa-S\u0131k\u0131nt\u0131s\u0131-2-300x132.png 300w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><\/a><\/p>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Chart kontrol\u00fc istedi\u011fimiz div eleman\u0131n\u0131n i\u00e7erisine bas\u0131lm\u0131\u015ft\u0131r.<\/p>\n<p>Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Asp.NET MVC projelerinde istatistiksel verileri kolayca bir \u015fekilde grafiksel raporlar halinde sunmam\u0131z\u0131 sa\u011flayan Chart kontrol\u00fc hakk\u0131nda tam sayfa s\u0131k\u0131nt\u0131s\u0131 do\u011fmaktad\u0131r.Asp.NET MVC 4.0 Chart Nesnesi ba\u015fl\u0131kl\u0131 yaz\u0131mda Chart kontrol\u00fc nedir, nas\u0131l kullan\u0131l\u0131r teferruat\u0131yla irdelemi\u015ftik.Lakin bu&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,600],"tags":[746,776,407,775,283],"class_list":["post-3243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-mvc","category-asp-net-mvc-5","tag-asp-net-mvc","tag-asp-net-mvc-chart-kontrolu","tag-chart","tag-chart-kontrolu","tag-mvc"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3243"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}