ASP.NET Web Pages - Chart Helper

Chart - অনেকগুলি উপযোগী ASP.NET Web Helper-এর মধ্যে একটি

Chart Helper

পূর্ববর্তী চাপে, আপনি একটি ASP.NET “হেলপার” ব্যবহার করে শিখেছেন

আপনি “WebGrid Helper”-এর মাধ্যমে গ্রিডে তথ্য প্রদর্শনের জন্য শিখেছেন

এই চাপটি চিত্রে তথ্য প্রদর্শনের জন্য কিভাবে “Chart Helper” ব্যবহার করা যায় বর্ণনা করে

“Chart Helper” বিভিন্ন ফরম্যাট এবং ট্যাগ দ্বারা বিভিন্ন ধরনের চিত্রশিল্প প্রদর্শন করতে পারে। এটি স্ট্যান্ডার্ড চিত্রশিল্প (যেমন, এলাকা চিত্র, বার চিত্র, কলম চিত্র, লাইন চিত্র এবং পাই চিত্র) এবং আরও পেশাদারী চিত্রশিল্প (যেমন, স্টক ট্রেডিং চার্ট) তৈরি করতে পারে。

চিত্রে প্রদর্শিত তথ্য আইনকোড, ডাটাবেস অথবা ফাইল থেকে এসেছে

একটি আইনকোড থেকে এসেছে চিত্র

এই উদাহরণের কোডটি একটি আইনকোডের তথ্য ব্যবহার করে চিত্র প্রদর্শন করে:

ইনস্ট্যান্স

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

ইনস্ট্যান্স চালু করুন

new Chart নতুন চিত্র অবজেক্ট তৈরি করে, এবং এর প্রস্থ এবং উচ্চতা নির্ধারণ করে

AddTitle মথুকের শিরোনাম নির্ধারণ করে

AddSeries মথুকে তথ্য যোগ করে

chartType পারামিটার যেটি চিত্রের ধরন নির্ধারণ করে

xValue পারামিটার যেটি x-অক্ষের মান নির্ধারণ করে

yValues পারামিটার যেটি y-অক্ষের মান নির্ধারণ করে

Write() মথুকের প্রদর্শন

ডাটাবেস থেকে এসেছে চিত্র

প্রথমে একবার ডাটাবেস কোয়ারি চালানো এবং ফলাফলের তথ্য ব্যবহার করে চিত্র তৈরি করা যায়:

ইনস্ট্যান্স

@{ 
var db = Database.Open("SmallBakery"); 
var dbdata = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

ইনস্ট্যান্স চালু করুন

var db = Database.Open ডাটাবেস খোলা (এবং ডাটাবেস অবজেক্টকে db ভাবে এসে ন্যাশনাল করা)

var dbdata = db.Query ডাটাবেস কোয়ারি চালানো এবং ফলাফলকে dbdata-তে সংরক্ষণ করা

new Chart নতুন চিত্র অবজেক্ট তৈরি করে, এবং এর প্রস্থ এবং উচ্চতা নির্ধারণ করে

AddTitle মথুকের শিরোনাম নির্ধারণ করে

DataBindTable মথুকের তথ্যসূত্রকে বাঁধা দেয়

Write() মথুকের প্রদর্শন

DataBindTable মথুকের পরিবর্তে এখানে AddSeries (আগের উদাহরণ দেখুন) ব্যবহার করা যায়। DataBindTable ব্যবহার করা সহজ, কিন্তু AddSeries-এর স্পর্শদক্ষতা আরও বেশি, কারণ এটি চিত্র এবং তথ্যকে আরও সঠিকভাবে নির্দিষ্ট করতে পারে:

ইনস্ট্যান্স

@{ 
var db = Database.Open("SmallBakery"); 
var dbdata = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

ইনস্ট্যান্স চালু করুন

XML ডাটা থেকে চার্ট

চার্ট তৈরি করার তৃতীয় একটি বিকল্প একটি XML ফাইলকে চার্টের ডাটা হিসাবে ব্যবহার করা হয়:

ইনস্ট্যান্স

@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet.Tables[0]);
var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Sales Per Employee")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

ইনস্ট্যান্স চালু করুন