فیوژن چارت

فیوژن چارت چیست؟

گاهی لازم است در برنامه خود برای نمایش اطلاعات از چارت ها استفاده کنید. در این گونه موارد گزینه های گوناگونی پیش روی شماست. اما یکی از ابزار خوب و ساده برای این کار FusionCharts است. چارت هایی که توسط فیوژن چارت می توان تولید کرد به دو نوع فلشی و جاوا اسکریپتی تقسیم می شود. ظاهر چارت ها زیبا و متحرک است و در زمان بسیار کوتاهی می توانید آنها را تولید کنید.

برای کسب اطلاعات بیشتر در مورد آن می توانید به این آدرس مراجعه کنید:
http://www.fusioncharts.com/free/Overview.asp

این هم نمونه ای از چارت ها:
http://www.fusioncharts.com/free/demos/Blueprint/

شروع کار بار فیوژن چارت

در اینجا می خواهیم با مثال ساده ای کار با فیوژن چارت را بررسی کنیم.

0- ابتدا باید فیوژن چارت را تهیه کنید. می توانید نسخه کاملی از آن را از این آدرس دانلود کنید:

http://www.fusioncharts.com/download/

یا سورس کدهای نمونه را از این جا بگیرید ( پایین صفحه ):

http://www.fusioncharts.com/download/?bypass#BP

1- حالا یک پروژه از نوع web application بسازید.
یک فولدر به پروژه خود اضافه کنید و نام آن را FusionCharts قرار دهید و محتویات فولدری با همین نام را در سورس کدهای نمونه ای که دانلود کردید، بیافزایید.

2- به فایل aspx خود و در داخل تگ head، این کد را اضافه کنید تا بتوانید از توابع جاوا اسکریپت لازم استفاده کنید:

<script language="javascript" src="FusionCharts/FusionCharts.js" type="text/javascript">
</script>

3- برای اضافی کاری نکردن از کدهای ارائه شده همراه کدهای نمونه برای انجام برخی کارها استفاده میکنیم. پس فایل FusionChart.cs را به پروژه خود اضافه کنید. این فایل در فولدری به نام source در سورس کد های نمنه ایست که دانلود کردید.

4- حالا یک کنترل Literal به صفحه اضافه کنید. مقدار ویژگی Text کدهای html یی است که برای نمایش چارت لازم است. تنها کاری که باید انجام دهید این است که اطلاعات خود را به متدی به نام RenderChartHTML ارائه دهید و خروجی این متد را در ویژگی text کنترل literal یی که ساختید قرار دهید. این متد در داخل کلاسی به نام FusionChart و در فایلی است که به پروژه در مرحله 3 افزودید.

شما می توانید یک url به این تابع ارائه دهید تا اطلاعات را از آن تهیه کند یا اطلاعات را به صورت یک رشته به آن ارسال کنید. در هر صورت فرمت اطلاعات یکسان و به صورت xml خواهید بود.

مثلا چیزی شبیه این:

<chart caption='z' showValues='0' formatNumberScale='0' showBorder='1'>

<set label='1360' value='50' />

<set label='1370' value='60' />

<set label='1380' value='65' />

<set label='1390' value='75' />

</chart>

پس از تهیه اطلاعات آن را به صورت زیر به متد مذکور ارسال می کنیم: 

RenderChartHTML("FusionCharts/Column3D.swf","",xmlData),"chart1","500","300",false);

پارامتر اول نام فایلی است که به عنوان موتور رسم چارت در نظر دارید. به عبارتی ساده تر، نوع چارتی را تعیین می کنید که مایلید اطلاعات در آن نوع نمایش داده شود. ما نمودار میله ای - سه بعدی را انتخاب کرده ایم.
انتخاب های گوناگونی برای نوع چارت در اختیار شماست. با مشاهده فایل های swf که در فولدر FusionChart قرار دارد می بینید که انواع مختلفی چارت وجود دارد. که البته برای به دست آوردن ساختار اطلاعاتی که برای هر یک ارسال می کنید ( و ممکن است با بقیه متفاوت باشند ) باید به مستندات موجود مراجعه کنید.
پارمتر دوم آدرس URL اطلاعات است. ما در اینجا از URL استفاده نمی کنیم و اطلاعات را به صورت یک متغیر رشته ای به نام xmlData به متد می فرستیم. پس این پارامتر را خالی رها کرده و پارامتر سوم را متغیر رشته ای مذکور قرار می دهیم.
پارامتر چهارم شناسه چارت است که در تگ های HTML مورد استفاده قرار می گیرد. سعی کنید این شناسه در فایل html یکتا باشد. پارامتر های بعدی عرض و طول چارت و فعال/غیر فعال بودن حالت اشکال زدایی است.

 مقدار متغیر xmlData را می توانید چیزی شبیه این قرار دهید:

<chart caption='z' showValues='0' formatNumberScale='0' showBorder='1'>

<set label='1360' value='50' />

<set label='1370' value='60' />

<set label='1380' value='65' />

<set label='1390' value='75' />

</chart>

5- حال اگر پروژه خود را اجرا کنید می توانید خروجی را ببینید.