KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

FusionChart ile Grafik Oluşturma

Yorum bırakın


Bu görsel dersimizde Fusion Chart aracını kullanarak görsel grafikler oluşturarak kullanıcıları cezbeden uygulamalar nasıl geliştirebileceğimizi anlatıyor olacağım. Basit bir uygulama ile Fusion Chart’ları nasıl kullanacağımızı ve uygulamalarımızda bu güzel grafikleri nasıl oluşturacağımızı anlatıyorum.

Fusion Chart aracının ücretsiz versiyonunu buradan indirebilirsiniz..

Video – 1

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/9918070a-4b33-4639-9f9f-8fd54ed0075b/bootstrap.swf

Videoyu indir !

Video – 2

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/7fc6615d-429f-45d8-b11b-bf278d2e9426/bootstrap.swf

Videoyu indir !

Uygulamanın form görünümü..

KODLAR

Form1.cs


using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Xml.Linq;

using System.Text;

using System.Windows.Forms;

 

namespace LearnFusionChart

{

    public partial class Form1 : Form

    {

        public Form1()

        {

            InitializeComponent();

        }

 

        private void CreateXML(DataGridView dgv)

        {

            XDocument xDoc = XDocument.Load(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            XElement root = xDoc.Root;

 

            root.Elements().Remove();

 

            DataTable dt = dgv.DataSource as DataTable;

 

            root.Attribute("caption").Value = "Aylık Satışlarım";

            root.Attribute("subcaption").Value = "2009 Yılı için";

            root.Attribute("xAxisName").Value = "Aylar";

            root.Attribute("yAxisName").Value = "Satislar";

            root.Attribute("numberPrefix").Value = "TL";

            root.Attribute("yAxisMinValue").Value = dt.Compute("MIN(Satışlar)", null).ToString();

 

            foreach (DataRow dr in dt.Rows)

            {

                XElement element = new XElement("set",

                    new XAttribute("name", dr["Aylar"].ToString().Substring(0, 3)),

                    new XAttribute("value", dr["Satışlar"].ToString()),

                    new XAttribute("hoverText", dr["Aylar"].ToString()));

 

                root.Add(element);

            }

 

            xDoc.Save(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            xDoc = null;

        }

 

 

        private void btnDataTableOlustur_Click(object sender, EventArgs e)

        {

            DataTable dt = new DataTable();

            dt.Columns.AddRange(

                new DataColumn[]

                {

                    new DataColumn("Aylar"),

                    new DataColumn("Satışlar")

                });

 

 

            Random rnd = new Random();

            DataRow dr = null;

 

            for (int i = 1; i <= 12; i++)

            {

                dr = dt.NewRow();

 

                dr["Aylar"] = DateTime.Parse("01." + i.ToString() + ".2009").AddMonths(0).ToString("MMMM");

                dr["Satışlar"] = rnd.Next(0, 100).ToString();

 

                dt.Rows.Add(dr);

            }

 

            this.dataGridView1.DataSource = dt;

        }

        private void btnGrafik_Click(object sender, EventArgs e)

        {

            this.CreateXML(this.dataGridView1);

 

            this.webBrowser1.Navigate(

                Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.html");

        }

    }

}


Line2D.xml


<graph caption='Monthly Sales Summary' subcaption='For the year 2004'

       xAxisName='Month' yAxisMinValue='15000' yAxisName='Sales'

       decimalPrecision='0' formatNumberScale='0' numberPrefix='$'

       showNames='1' showValues='0'  showAlternateHGridColor='1'

       AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20'

       alternateHGridAlpha='5' >

   <set name='Jan' value='17400' hoverText='January'/>

   <set name='Feb' value='19800' hoverText='February'/>

   <set name='Mar' value='21800' hoverText='March'/>

   <set name='Apr' value='23800' hoverText='April'/>

   <set name='May' value='29600' hoverText='May'/>

   <set name='Jun' value='27600' hoverText='June'/>

   <set name='Jul' value='31800' hoverText='July'/>

   <set name='Aug' value='39700' hoverText='August'/>

   <set name='Sep' value='37800' hoverText='September'/>

   <set name='Oct' value='21900' hoverText='October'/>

   <set name='Nov' value='32900' hoverText='November' />

   <set name='Dec' value='39800' hoverText='December' />

</graph>


Line2D.html


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts Free Documentation</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

</head>

 

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

  <tr>

    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center">

        FusionCharts. </div>

      <script type="text/javascript">

           var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");

           chart.setDataURL("Data/Line2D.xml");          

           chart.render("chartdiv");

        </script> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"><a href="Data/Line2D.xml" target="_blank"><img src="../Contents/Images/BtnViewXML.gif" alt="View XML for the above chart" width="75" height="25" border="0" /></a></td>

  </tr>

</table>

</body>

</html>


Projeyi buradan indirebilirsiniz..

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s