رسم المخططات البيانية

نكمل اليوم مع النوع الاول من الرسومات البيانية الا وهو المخططات الدائرية أو Pie Charts

ساقوم بشرح خطوات كتابة الكود مع شرح الاوامر التابعة لذلك وفق الخطوات الخمس السابقة التي قمت بشرحها في المشاركة السابقة

تبدأ على بركة الله.

1- create a dataset أي عمل وتهيئة البيانات والمعلومات التي نود رسمها بالمخطط البياني

			// create a dataset...
			DefaultPieDataset dataset = new DefaultPieDataset();
			dataset.setValue("Category 1", 43.2);
			dataset.setValue("Category 2", 27.9);
			dataset.setValue("Category 3", 79.5);

الصنف DefaultPieDataset هو المسؤول عن البيانات التي سترسم وعليه قمنا بعمل كائن اسمه dataset وبواسطته سنقوم باضافة البيانات والاحصائيات التي تريدها وفق القاعدة التالية

dataset.setValue("lable",value);

حيث الـ lable هي اسم الجزء المراد تمثيله بيانياً

اما الـ value فهو قيمة هذا الجزء المراد تمثبه بيانياً

فنعود للكود ونلاحظ اننا نريد تمثبل 3 اجزاء قمنا بتسميتها تباعاً Category 1, Category 2, Category 3 واعطينا لكل جزء القيمة الخاصة به

2- create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

			// create a chart...
			JFreeChart chart = ChartFactory.createPieChart(
			"Sample Pie Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

حيث الصنف JFreeChart هو المسؤول عن رسم المخططات البيانية واضافة البيانات والعناوين والاسماء اليها

حيث ان Sample Pie Chart هو العنوان والاسم الاساسي الذي سنراه على هذا المخطط البياني

اما الـ dataset فهي الاجزاء البيانية التي سيتم رسمها وتمثيلها والي تم صناعتها في الخطوة الاولى

أما الـ legend فهي تاخد قيم بولين اما true or false وهي هنا تحدد فيما اذا اردنا عرض الشريط السفلي في المخطط البياني والمسؤول عن توضيح اجزاء الرسم البياني

اما الـ tooltips أيضا تاخد قيم بولين اما true or false وهي هنا تحدد فيما اذا اردنا ان نرى شرح صغير او توضيح او لمحة عامة لكل جزء من البيانات التي تم صنعها في الخطوة الاولى لدى الضغظ والتاشير عليها

أما الـ URLs يضا تاخد قيم بولين اما true or false هل تريد اضافة روابط ام لا

على كل حال انا انصح ان تجرب في كل مرة ان تغير القيم السابقة من true الى false وبالعكس لترى الفرق

3- add the chart to a panel وهي الخطوة المقصود بها صنع اللوحة الذتي سيوضع عليها المخطط البياني وتحديد حجم ابعاد هذا اللوحة

			// add the chart to a panel...
			ChartPanel chartPanel = new ChartPanel(chart, false);
			chartPanel.setPreferredSize(new Dimension(500, 270));
			setContentPane(chartPanel);

هنا نقوم بصنع اللوحة (panel) التي سيتوضع عليها المخطط البياني الذي قمنا بصنعه في الخطوة الثانية ولنا حرية اختيار حجم الـ panel

4- Extras and the modifications كما قلنا سابقا ان هذه الخطوة ليس ضرورية لكنها مفيدة لما فيها من ادوات تعطينا خيارات اوسع لتغيير وتعديل بعض الاشياء في الرسم

			// Extras and the modifications
			PiePlot plot = (PiePlot) chart.getPlot();
			plot.setSectionPaint("Category 1", Color.yellow);
			plot.setSectionOutlinesVisible(false); //Outline Visibility

الصنف PiePlot هو المسؤول عن الالوان والخلفية والظلال لذلك اذا اردنا تغيير لون جزء معين من الرسم البياني لدينا الامر التالي

plot.setSectionPaint("lable name", The color);

فكما رأينا أننا قمنا بتغيير لون الجزء الاول والذي هو Category 1 الى اللون الاصفر وفق الامر التالي

plot.setSectionPaint("Category 1", Color.yellow);

أما في حال أحببنا تعطيل خاصية الـ outline والي تكون مفعلة بشكل تلقائي فان الامر التالي يحل هذه المسالة

plot.setSectionOutlinesVisible(false);

5- Starting point for the demonstration application اي الميثود الرئيسية لتشغيل البرنامج

		public static void main(String[] args) {
			PieChart1 demo = new PieChart1("Pie Demo 1");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

أعتقد انها واضحة ولا تحتاج لشرح

اما الآن سأقوم بكتابة الكود كاملا

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartFrame;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PiePlot;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

	public class PieChart1 extends ApplicationFrame {
		public PieChart1(String title) {
			super(title);

			// create a dataset...
			DefaultPieDataset dataset = new DefaultPieDataset();
			dataset.setValue("Category 1", 43.2);
			dataset.setValue("Category 2", 27.9);
			dataset.setValue("Category 3", 79.5);

			// create a chart...
			JFreeChart chart = ChartFactory.createPieChart(
			"Sample Pie Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

			// add the chart to a panel...
			ChartPanel chartPanel = new ChartPanel(chart, false);
			chartPanel.setPreferredSize(new Dimension(500, 270));
			setContentPane(chartPanel);

			// Extras and the modifications
			PiePlot plot = (PiePlot) chart.getPlot();
			plot.setSectionPaint("Category 1", Color.yellow);
			plot.setSectionOutlinesVisible(false); //Outline Visibility

	}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			PieChart1 demo = new PieChart1("Pie Demo 1");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}

عند التشغيل ستحصل على الشكل التالي

أرجو ان يكون الشرح جيد وان تكون الفكرة قد وصلت وشكرا

السلام عليكم

الموضوع اكثر من رائع

ساكمل قراءتها بعد الامتحانات إن شاء الله

واصل

الرجاء من المشرف التثبيت

جزاكم الله كل خير :)

استمر اخى الكريم وفققك الله

السلام عليكم وباسم الله الرحمن الرحيم نيدأ

اليوم ساتكلم عن الـ Bar Charts أو مخططات الأعمدة البيانية وخطوات هذا المخطط قريبة كثيرا من كود المخططات الدائرية او الـ pie charts فالافضل استيعاب وهضم الشرح السابق ليسهل استيعاب هذا النوع من المخططات البيانية

نبدأ على بركة الله

1- create a dataset أي عمل وتهيئة البيانات والمعلومات التي نود رسمها بالمخطط البياني

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(1.0, "Row 1", "Column 1");
		dataset.addValue(5.0, "Row 1", "Column 2");
		dataset.addValue(3.0, "Row 1", "Column 3");
		dataset.addValue(2.0, "Row 2", "Column 1");
		dataset.addValue(3.0, "Row 2", "Column 2");
		dataset.addValue(2.0, "Row 2", "Column 3");
		dataset.addValue(4.0, "Row 3", "Column 1");
		dataset.addValue(1.5, "Row 3", "Column 3");

هنا نلاحظ ان الصنف DefaultCategoryDataset هو صنف مهم ومسؤول عن تقديم والتجهيز بيانات هذا النوع من المخططات ونوع آخر من البيانات سنراه في الدرس القادم ان شاء الله

فقط ملاحظة وهي يرجى توخي الفرق بين هذا الصنف DefaultCategoryDataset والصنف السابق DefaultPieDataset المسؤول عن رسم المخططات الدائرية

الآن من الصنف DefaultCategoryDataset نقوم بعمل كائن اسمه dataset وبواسطته سنقوم باضافة البيانات والاحصائيات التي تريدها وفق القاعدة التالية:

dataset.addValue(value, "X", "Y");

حيث الـ value فهو قيمة هذا العامود المراد تمثبه بيانياً

اما الـ X فهي تكون مجموعة الاعمدة التي ستشترك في خصائص معينة اهمها اللون بمعنى الأعمدة التي سيتاخذ نفس الرمز X (أو أي اسم كان) فانها ستأخذ نفس اللون

أما الـ Y فهي مجموعة الاعمدة التي ستتوضع مع بعضها في مجموعة بمعنى أن الأعمدة التي سيتاخذ نفس الرمز Y (أو أي اسم كان) فانها ستتمركز مع بعضها في مجموعة لوحدها حتى لو اختلفت الوانها

لاحظ في الكود قمت بعمل ثلاثة مجموعات Column 1 و Column 2 و Column 3 والملاحظ ان كلا من المجوعتين الاولى والثالثة تحوي على 3 اعمدة فيما المجموعة الثانية تحتوي فقط على عامودين

بشكل عام لك حرية الاختيار بعدد المجموعات وعدد الاعمدة في كل مجموعة او بالاحرى حسب متطلبات البرنامج

2- create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

		// create a chart...
		JFreeChart chart = ChartFactory.createBarChart(
		"Bar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

كما رأينا في كود المخططات الدائرية فان الصنف JFreeChart هو المسؤول عن رسم المخططات البيانية واضافة البيانات والعناوين والاسماء اليها

-Bar Chart Demo سيكون العنوان الرئيسي للمخطط

-Category سكون العنوان الممثل بشكل أفقي وبمعنى الآخر الدال عن المجموعات

-Value سيكون العنوان الممثل بشكل عامودي والدال على كل قيمة من قيم الاعمدة

-dataset فهي الاجزاء البيانية التي سيتم رسمها وتمثيلها والي تم صناعتها في الخطوة الاولى

-PlotOrientation وتاخذ احدى القيمتين اما VERTICAL وعندها سيتم رسم الاعمدة بشكل عامودي من الاسفل للاعلى او القيمة HORIZONTAL اي رسم الاعمدة بشكل افقي من اليسار الى اليمين على كل حال الأفضل تبديل القيم والتجريب لترى الفرق

-legend اخد قيم بولين اما true or false وهي هنا تحدد فيما اذا اردنا عرض الشريط السفلي في المخطط البياني والمسؤول عن توضيح اجزاء الرسم البياني

-tooltips أيضا تاخد قيم بولين اما true or false وهي هنا تحدد فيما اذا اردنا ان نرى شرح صغير او توضيح او لمحة عامة لكل جزء من البيانات التي تم صنعها في الخطوة الاولى لدى الضغظ والتاشير عليها

-أما الـ URLs يضا تاخد قيم بولين اما true or false هل تريد اضافة روابط ام لا

على كل حال انا انصح ان تجرب في كل مرة ان تغير القيم السابقة من true الى false وبالعكس لترى الفرق

3- add the chart to a panel وهي الخطوة المقصود بها صنع اللوحة الذتي سيوضع عليها المخطط البياني وتحديد حجم ابعاد هذا اللوحة

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);

نفس الشرح في الدرس السابق

4- Extras and the modifications كما قلنا سابقا ان هذه الخطوة ليس ضرورية لكنها مفيدة لما فيها من ادوات تعطينا خيارات اوسع لتغيير وتعديل بعض الاشياء في الرسم

وقد قمت يتجزئته لعدد من الخيارات سأبدأ بعرضها كلُ على حدا ليسهل الفهم

أولاً: تحديد لون الخلفية الخارجية ( اللون الافتراضي هو رمادي فاتح قريب للابيض)

		//1- set colors for External background  
				chart.setBackgroundPaint(Color.green);

ثانياً: تحديد لون الخلفية الداخلية ( اللون الافتراضي هو رمادي)

		//2- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.blue);

ثالثاً: تحديد لون الخطوط داخل الخلفية الداخلية وهذه الخطوط هي التي تدل على قيمة كل عامود

		//3- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

رابعاً: تحديد لون كل عامود في كل مجموعة وهنا تجدر الاشارة انه نفس الالوان ستتكرر في كل مجموعة

                //4 - set colors for renderers
				BarRenderer renderer = (BarRenderer) plot.getRenderer();
				renderer.setSeriesPaint(0, Color.green);// color of first renderer of each group
				renderer.setSeriesPaint(1, Color.yellow);// color of second renderer of each group
				renderer.setSeriesPaint(2, Color.red); // color of third renderer of each group

خامساً: خاصية الـ outline

renderer.setDrawBarOutline(true);

سادساً: وهي المسافة بين الأعمدة في كل مجموعة هل أريد المسافة بينهما كبيرة ام صغيرة فلنا حرية الاختيار والتجربة خير برهان

renderer.setItemMargin(0.1);// determine the empty space between renderers

5- Starting point for the demonstration application اي الميثود الرئيسية لتشغيل البرنامج

public static void main(String[] args) {
			BarChart demo = new BarChart("Bar Demo 1");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

الكود كاملا

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

public class BarChart extends ApplicationFrame {

	public BarChart(String title) {
		super(title);

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(1.0, "Row 1", "Column 1");
		dataset.addValue(5.0, "Row 1", "Column 2");
		dataset.addValue(3.0, "Row 1", "Column 3");
		dataset.addValue(2.0, "Row 2", "Column 1");
		dataset.addValue(3.0, "Row 2", "Column 2");
		dataset.addValue(2.0, "Row 2", "Column 3");
		dataset.addValue(4.0, "Row 3", "Column 1");
		dataset.addValue(1.5, "Row 3", "Column 3");

		// create a chart...
		JFreeChart chart = ChartFactory.createBarChart(
		"Bar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);


		// Extras and the modifications...

		//1- set colors for External background  
				chart.setBackgroundPaint(Color.green);

		//2- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.blue);

		//3- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

		//4 - set colors for renderers
				BarRenderer renderer = (BarRenderer) plot.getRenderer();
				renderer.setSeriesPaint(0, Color.green);// color of first renderer of each group
				renderer.setSeriesPaint(1, Color.yellow);// color of second renderer of each group
				renderer.setSeriesPaint(2, Color.red); // color of third renderer of each group

				renderer.setDrawBarOutline(true);
				renderer.setItemMargin(0.1);// determine the empty space between renderers

		}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			BarChart demo = new BarChart("Bar Demo 1");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}

الرسم البياني الذي سنحصل عليه

السلام عليكم

في هذا الدرس سنتطرق لشرح نوع أخر من الرسومات البيانية ألا وهو الـ Line Charts أو رسومات الخط البياني

نبدأ على بركة الله

1- create a dataset أي عمل وتهيئة البيانات والمعلومات التي نود رسمها بالمخطط البياني

		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(212, "Classes", "JDK 1.0");
		dataset.addValue(504, "Classes", "JDK 1.1");
		dataset.addValue(1520, "Classes", "SDK 1.2");
		dataset.addValue(1842, "Classes", "SDK 1.3");
		dataset.addValue(2991, "Classes", "SDK 1.4");

من الصنف DefaultCategoryDataset نقوم بعمل كائن اسمه dataset وبواسطته سنقوم باضافة البيانات والاحصائيات التي تريدها وفق القاعدة التالية:

dataset.addValue(value, "X", "Y");

حيث الـ value فهو قيمة هذا النقطة المراد تمثبه بيانياً ليتم رسمها في المخطط البياني وفق قيمتها

الـ X فهي اذا كانت تفس القيمة او نفس الرمز فهي ستكون عبارة عن نفس شكل النقاط التي سترسم والتي سيتم توصيلها ببعضها البعض وفق خط يوصل جميع هذه النقاط التي تحمل نفس القيمة

اما اذا وجدنا ان القيمة X تختلف مثلا فانه يتم رسم نقاط بشكل أخر ولن يتم توصيل النقاط هذه بالنقاط التي تحمل رمز او اسم مختلف وليتم هضم الفكرة يرجى تغيير الكود ليصبح مثلا كما يلي

		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(212, "First", "JDK 1.0");
		dataset.addValue(504, "First", "JDK 1.1");
		dataset.addValue(1520, "First", "SDK 1.2");
		dataset.addValue(1842, "Second", "SDK 1.3");
		dataset.addValue(2991, "Second", "SDK 1.4");

أما الـ Y فهي تمثل اسم كل نقطة من النقاط المراد تمثيلها وهنا تجدر الاشارة انه يجب ان يكون لكل نقطة اسم مختلف والا فانه اذا كان لنقطتين او اكثر نفس الاسم فانه سيتم عمل overwritting لهذه النقاط اي سيتم رسمها فوق بعضها البعض فمثلا بالكود التالي لاحظ معي ما يلي

		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(212, "Classes", "label 1");
		dataset.addValue(504, "Classes", "lable 2");
		dataset.addValue(1520, "Classes", "lable 2");
		dataset.addValue(1842, "Classes", "lable 2");
		dataset.addValue(2991, "Classes", "lable 3");

هنا المفروض انه ستم رسم خمس نقاط لكنه يتم فقط رسم ثلاثة نقاط !!!

السبب بذلك هو انه نلاحظ ان النقطة التي تحمل اسم lable 2 سيتم رسمها 3 مرات اي انها في المرة الأولى يتم رسمها بالقيمة 504 ثم في المرة الثانية 1520 ويتم محو القيمة القديمة وفي المرة الثالثة يم رسمها بالقيمة 1842 ويتم محو النقطة ذات القيمة السابقة وهكذا كل ما تكررت نقطة تحمل نفس الاسم فانه سيتم اعتماد فقط النقطة التي يتم رسمها اخيرا ويتم اهمال الأقدم.

2- create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

		// create the chart...
		JFreeChart chart = ChartFactory.createLineChart(
		"Java Standard Class Library", // chart title
		"Release", // domain axis label
		"Class Count", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips
		false // urls
		);

في هذه الخطوة يرجى مراجعة نفس الخطوة من الدرس السابق لانها مطابقة للدرس السابق تماما

3- add the chart to a panel وهي الخطوة المقصود بها صنع اللوحة الذتي سيوضع عليها المخطط البياني وتحديد حجم ابعاد هذا اللوحة

نفس الكود ونفس الشرح في الدرس السابق

4- Extras and the modifications كما قلنا سابقا ان هذه الخطوة ليس ضرورية لكنها مفيدة لما فيها من ادوات تعطينا خيارات اوسع لتغيير وتعديل بعض الاشياء في الرسم

وقد قمت يتجزئته لعدد من الخيارات سأبدأ بعرضها كلُ على حدا ليسهل الفهم

أولاً: تحديد لون الخلفية الخارجية ( اللون الافتراضي هو رمادي فاتح قريب للابيض)

		//1- set colors for External background 
		chart.setBackgroundPaint(Color.green);

ثانياً: تحديد لون الخلفية الداخلية ( اللون الافتراضي هو رمادي)

		//2- set colors for Internal background
		CategoryPlot plot = (CategoryPlot) chart.getPlot();
		plot.setBackgroundPaint(Color.white);

ثالثاً: تحديد لون الخطوط داخل الخلفية الداخلية وهذه الخطوط هي التي تدل على قيمة كل نقطة

		//3- set colors for grid lines
		plot.setRangeGridlinePaint(Color.orange);

رابعاً: خاصية تقوم بعرض قيم (Value) لكل نقطة فقط باعداد صحيحة يعني Integer يعني بدون هذه الخاصية سيتم عرض القيم مع فواصل عشرية حتى لو كتبنا القيم بدون فواصل

		//4- change the auto tick unit selection to integer units only...
		NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
		rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

خامساً: تنظيم النقاط

		//5- Customize the renderer...
		LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();

ولهذه الخاصية عدة استخدامات كما يلي:

1- فيما اذا أردنا رسم الخط البياني يمر من النقط ام فقط يتم رسم الخط البياني وتكون النقط غير مرسومة فاذا اردنا فقط الخط بدون النقط غير القيمة الى FALSE

renderer.setShapesVisible(false);

2- خاصية الـ outline

renderer.setDrawOutlines(true);

3- بشكل تلقائي يتم ملئ النقاط لنفس لون الخط التي سيمر من خلالها فاذا اردنا جعل النقاط فارغة فالامر التالي يقوم بذلك

renderer.setUseFillPaint(true);

4- ملئ النقاط بلون معين

renderer.setFillPaint(Color.blue);

سادساً: اضافة عنوان اضافي يكون تحت العتوان الرئيسي الذي تم كتابته في الخطوة رقم 2

		//6- add addSubtitle
		chart.addSubtitle(new TextTitle("Number of Classes By Release"));

سابعاً: كتابة شرح للمخطط البياني تحت الخط البياني الذي تم رسمه مع امكانية اختيار نوع الخط وحجمه

		//7- add TextTitle
		TextTitle source = new TextTitle(
		"Source: Java In A Nutshell (4th Edition) "+ "by David Flanagan (O’Reilly)" );
		source.setFont(new Font("SansSerif", Font.PLAIN, 10));
		source.setPosition(RectangleEdge.BOTTOM);
		source.setHorizontalAlignment(HorizontalAlignment.RIGHT);
		chart.addSubtitle(source);

5- Starting point for the demonstration application اي الميثود الرئيسية لتشغيل البرنامج

لا جديد في هذه الخطوة كما في الدروس السابقة

الكود كاملا

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.jfree.chart.title.TextTitle;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.HorizontalAlignment;
import org.jfree.ui.RectangleEdge;
import org.jfree.ui.RefineryUtilities;

public class LineChart extends ApplicationFrame {

	public LineChart(String title) {
		super(title);
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(212, "Classes", "JDK 1.0");
		dataset.addValue(504, "Classes", "JDK 1.1");
		dataset.addValue(1520, "Classes", "SDK 1.2");
		dataset.addValue(1842, "Classes", "SDK 1.3");
		dataset.addValue(2991, "Classes", "SDK 1.4");


		// create the chart...
		JFreeChart chart = ChartFactory.createLineChart(
		"Java Standard Class Library", // chart title
		"Release", // domain axis label
		"Class Count", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips
		false // urls
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);

		// Extras and the modifications...

		//1- set colors for External background 
		chart.setBackgroundPaint(Color.green);

		//2- set colors for Internal background
		CategoryPlot plot = (CategoryPlot) chart.getPlot();
		plot.setBackgroundPaint(Color.white);

		//3- set colors for grid lines
		plot.setRangeGridlinePaint(Color.orange);

		//4- change the auto tick unit selection to integer units only...
		NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
		rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

		//5- Customize the renderer...
		LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();
		renderer.setShapesVisible(true);
		renderer.setDrawOutlines(true);
		renderer.setUseFillPaint(true);
		renderer.setFillPaint(Color.blue);

		//6- add addSubtitle
		chart.addSubtitle(new TextTitle("Number of Classes By Release"));

		//7- add TextTitle
		TextTitle source = new TextTitle(
		"Source: Java In A Nutshell (4th Edition) "+ "by David Flanagan (O’Reilly)" );
		source.setFont(new Font("SansSerif", Font.PLAIN, 10));
		source.setPosition(RectangleEdge.BOTTOM);
		source.setHorizontalAlignment(HorizontalAlignment.RIGHT);
		chart.addSubtitle(source);

		}


	/**
	* Starting point for the demonstration application.
	*
	* @param args ignored.
	*/
	public static void main(String[] args) {
	LineChart demo= new LineChart("Line Chart Demo");
	demo.pack();
	RefineryUtilities.centerFrameOnScreen(demo);
	demo.setVisible(true);
	}
	}

الرسم البياني الذي سنحصل عليه

درس رائع .. وفقك الله.

+4

تحياتي العطرة

درس رائع .. وفقك الله.

+4

شكرا للاخوة على دعمهم صراحة انه اعتقدت انه هذه الدروس لا تثير اهتمام احد لانه لم اجد تفاعل

السلام عليكم

نكمل اليوم مع نوع جديد من المخططات الاحصائية الا وهو المخططات الحلقية Ring Charts وهذا النوع قريب جدا جدا جدا جدا من المخططات الدائرية او الـ pie Charts في الشكل والمضمون وحتى بالكود ولا يختلفوا عن بعضهم الا بكلمة واحدة فقط

والتعديل سيكون فقط في الخطوة الثانية كما يلي:

			// create a chart...
			JFreeChart chart = ChartFactory. createRingChart(
			"Sample Pie Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

نلاحظ هنا اننا بالمخططات الحلقية قمنا بكتابة createRingChart بينما في المخططات الدائرية كنا نكتب createPieChart وهذا هو الاختلاف الوحيد وباقي الخطوات تكون مطايقة 100% لكود المخططات الدائرية وأترككم مع الكود كاملا منعا لأي التباس

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PiePlot;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

	public class RingChart extends ApplicationFrame {
		public RingChart(String title) {
			super(title);

			// create a dataset...
			DefaultPieDataset dataset = new DefaultPieDataset();
			dataset.setValue("Category 1", 43.2);
			dataset.setValue("Category 2", 27.9);
			dataset.setValue("Category 3", 79.5);

			// create a chart...
			JFreeChart chart = ChartFactory. createRingChart(
			"Sample Ring Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

			// add the chart to a panel...
			ChartPanel chartPanel = new ChartPanel(chart, false);
			chartPanel.setPreferredSize(new Dimension(500, 270));
			setContentPane(chartPanel);

			// Extras and the modifications
			PiePlot plot = (PiePlot) chart.getPlot();
			plot.setSectionPaint("Category 1", Color.yellow);
			plot.setSectionOutlinesVisible(false); //Outline Visibility

	}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			RingChart demo = new RingChart("Ring Demo 1");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}	
		}

والشكل الناتج عن الكود كما يلي

vector_ever كتب:

شكرا للاخوة على دعمهم صراحة انه اعتقدت انه هذه الدروس لا تثير اهتمام احد لانه لم اجد تفاعل

الدروس جميله اخى الكريم

وان شاء الله ستجد التفاعل عندما تجد من يبحث عنها

وخذ فالاعتبار عن الفتره هى فتره امتحانات وثورات ايضا :)

انا عندى امتحانات دخلت ورديت عليك علشان الدروس جميله :)

واحتمال استخدمها قريبا باذن الله فى المشروع اللى انا شغال فيه :)

استمر وفقك الله .. متابع :)

السلام عليكم

اليوم درسنا سيكون خفيف ظريف كسابقه وهو يتحدث عن الـ Stacked Bar Charts وهي قريبة جدا جدا جدا على الـ Bar Charts في الشكل والمضمون وحتى بالكود ولا يختلفوا عن بعضهم الا بكلمة واحدة فقط

و الـ Stacked Bar Charts هي عبارة مخططات اعمدة لكن بدل توضع هذه الاعمدة بجانب بعضها البعض يعني كل مجموعة من الاعمدة تتمركز جانب بعضها البعض هنا سنرى ان هذه الأعمدة في الـ Stacked Bar Charts تتمركز فوق بعضها البعض

التعديل على كود الـ Bar Charts سيكون فقط كما يلي في الخطوة الثانية:

		// create a chart...
		JFreeChart chart = ChartFactory.createStackedBarChart( //can without 3D
		"Bar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

نلاحظ هنا اننا بالمخططات الحلقية قمنا بكتابة createStackedBarChart بينما في المخططات الدائرية كنا نكتب createBarChart وهذا هو الاختلاف الوحيد وباقي الخطوات تكون مطايقة 100% لكود المخططات الدائرية وأترككم مع الكود كاملا منعا لأي التباس

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

public class StackedBarChart extends ApplicationFrame {

	public StackedBarChart(String title) {
		super(title);

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(1.0, "Row 1", "Column 1");
		dataset.addValue(5.0, "Row 1", "Column 2");
		dataset.addValue(3.0, "Row 1", "Column 3");
		dataset.addValue(2.0, "Row 2", "Column 1");
		dataset.addValue(3.0, "Row 2", "Column 2");
		dataset.addValue(2.0, "Row 2", "Column 3");
		dataset.addValue(4.0, "Row 3", "Column 1");
		dataset.addValue(1.5, "Row 3", "Column 3");

		// create a chart...
		JFreeChart chart = ChartFactory.createStackedBarChart( 
		"StackedBar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);


		// Extras and the modifications...

		//1- set colors for External background  
				chart.setBackgroundPaint(Color.green);

		//2- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.blue);

		//3- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

		//4 - set colors for renderers
				BarRenderer renderer = (BarRenderer) plot.getRenderer();
				renderer.setSeriesPaint(0, Color.green);// color of first renderer of each group
				renderer.setSeriesPaint(1, Color.yellow);// color of second renderer of each group
				renderer.setSeriesPaint(2, Color.red); // color of third renderer of each group

				renderer.setDrawBarOutline(true);

		}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			StackedBarChart demo = new StackedBarChart("StackedBarChart Demo");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}

والشكل الناتج عن ذلك كما يلي:

بسم الله الرحمن الرحيم

موضوع ممتاز أخي الكريم

شرح رائع ومبسط ويسهل فهمه

استمر في هذه الدروس المميزة

السلام عليكم

سنتطرق اليوم في درسنا الى نوع جديد من الرسومات البيانية ألا وهو مخططات المساحة أو الـ Area Chart وهذا النوع من المخططات هو أقرب لدمج نوعين من المخططات ألا وهم المخططات الخطية ومخططات الأعمدة (lLine and Bar Charts)

على كل حال في هذا النوع سترون أن معظم الخطوات تقريبا جرى شرحها في الدروس السابقة وسنعيد التركيز على الخطوات الجديدة والخطوات المهمة فلنبدأ على بركة الله

1- create a dataset أي عمل وتهيئة البيانات والمعلومات التي نود رسمها بالمخطط البياني

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		  dataset.addValue(5.0, "Arabic", "Ahmad");
		  dataset.addValue(4.0, "Physics", "Ahmad");
		  dataset.addValue(3.0, "Maths", "Ahmad");
		  dataset.addValue(7.0, "Arabic", "Ali");
		  dataset.addValue(5.0, "Physics", "Ali");
		  dataset.addValue(2.0, "Maths", "Ali");
		  dataset.addValue(4.0, "Arabic", "Gamal");
		  dataset.addValue(3.0, "Physics", "Gamal");
		  dataset.addValue(5.0, "Maths", "Gamal");
		  dataset.addValue(5.0, "Arabic", "Lama");
		  dataset.addValue(6.0, "Physics", "Lama");
		  dataset.addValue(2.0, "Maths", "Lama");
		  dataset.addValue(4.0, "Arabic", "Reem");
		  dataset.addValue(3.0,"Physics", "Reem");
		  dataset.addValue(2.0, "Maths", "Reem");

هنا نفس الشرح الموجود بالدروس السابقة عن هذه الخطوة

بشكل عام سنعمل مقارنة بين درجات 5 طلاب في 3 مواد هي العربي والرياضيات والفيزياء

الجدير بالذكر أن بمخططات المساحة يتم ملئ المساحة من القاعة حتى القيمة المحددة المراد تمثيلها (درجة كل طالب) ويكون ذروة الشكل في كل قسم مراد تمثيله هي القيمة المعطاة

ويجب أن نعرف انه في مخططات المساحة يتم تموضع الاجزاء المراد تمثيلها امام بعضها البعض يعني اولا سيتم رسم قيمة مادة العربي ثم سيرسم بعدها الفيزياء واخيرا الرياضيات ويتم تموضع الرسومات اما بعضها بشكل طبقات أي من الممكن اذا كانت قيم المداة الأخيرة(الرياضيات) قيم أكبر من قيم العربي والفيزياء عندئذ من الممكن ان تحجب تمثيل قيم المادتين السابقتين!!

ولكن على كل حال سنلجأ للضرورة لاستخدام خاصية الشفافية لتفادي هكذا حالات بحيث سنستطيع رؤية الاشكال حتى بعد تموضعها امام بعضها لانها ستكون شفافة اي سنرى ما خلفها

يالنسبة لباقي الخطوات 2 و 3 و 5 فهي نفس الخطوات تماما في الدروس السابقة

4- Extras and the modifications وهذه الخطوة ليست ضرورية انما خطوة اضافية من الممكن الاسغناء عنها لكني ارى انها مهمة ومفيدة ومهمتها اظهار او اخفاء بعض المؤثرات الجانبية في المخطط وتغيير الالوان والخط والخلفيات والى ما هنالك من وضعيات سيتم شرح المهم منها ان شاء الله

في هذه الخطوة تم شرح معظم الجزئيات لكن سنعيد الشرح مع بعض الاضافات

أولاً: تحديد لون الخلفية الخارجية ( اللون الافتراضي هو رمادي فاتح قريب للابيض)

	   //1- set colors for External background  
				chart.setBackgroundPaint(Color.white);

ثانياً: تحديد لون العنوان الرئيسي

	   //2- set colors for Title 
				chart.getTitle().setPaint(Color.blue);

ثانياً: اضافة عنوان اضافي يكون تحت العتوان الرئيسي الذي تم كتابته في الخطوة رقم 2

	   //3- add addSubtitle
                chart.addSubtitle(new TextTitle("Comparison between Students Marks"));

رابعا: ثانياً: تحديد لون الخلفية الداخلية ( اللون الافتراضي هو رمادي)

	   //4- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.yellow);

خامساً : ثالثاً: تحديد لون الخطوط داخل الخلفية الداخلية وهذه الخطوط هي التي تدل على درجة كل طالب لكل مادة (اللون الافتراضي هو الاسود وتستطيع تغييره لأي لون آخر)

       //5- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

سادساً: تحديد مدى شفافية الرسم وذلك كي نستطيع رئية الاشكال بعد توضعها فوق بعض وكلما كبرت القيمة كلما قلت شفافيتها

	   //6- set the alpha-transparency for the plot. It takes the float type argument.	
				plot.setForegroundAlpha(0.7f);

سابعاً: تحديد لون كل مساحة تمثل درجة كل طالب وهنا تجدر الاشارة انه نفس الالوان ستتكرر في كل مادة أي انه سيكون لكل مادة لون موحد حتى لون اختلف الطلاب

       //7- set colors for renderers
				  CategoryItemRenderer renderer = plot.getRenderer();
				  renderer.setSeriesPaint(0, Color.red);
				  renderer.setSeriesPaint(1, Color.green);
				  renderer.setSeriesPaint(2, Color.blue);

ثامناً: كتابة تعليق او شرح اضافي للمخطط البياني وتحديد مكان وموقع هذه الاضافة

	  //8- add TextTitle
				 TextTitle source = new TextTitle("This Example is for Arabteam2000 java members" );
				 source.setPosition(RectangleEdge.BOTTOM);
				 source.setHorizontalAlignment(HorizontalAlignment.LEFT);
				 chart.addSubtitle(source);

أما الآت فالكود كاملاً

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.chart.title.TextTitle;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.HorizontalAlignment;
import org.jfree.ui.RectangleEdge;
import org.jfree.ui.RefineryUtilities;

import com.lowagie.text.Font;

public class AreaChart extends ApplicationFrame {

	public AreaChart(String title) {
		super(title);

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		  dataset.addValue(5.0, "Arabic", "Ahmad");
		  dataset.addValue(4.0, "Physics", "Ahmad");
		  dataset.addValue(3.0, "Maths", "Ahmad");
		  dataset.addValue(7.0, "Arabic", "Ali");
		  dataset.addValue(5.0, "Physics", "Ali");
		  dataset.addValue(2.0, "Maths", "Ali");
		  dataset.addValue(4.0, "Arabic", "Gamal");
		  dataset.addValue(3.0, "Physics", "Gamal");
		  dataset.addValue(5.0, "Maths", "Gamal");
		  dataset.addValue(5.0, "Arabic", "Lama");
		  dataset.addValue(6.0, "Physics", "Lama");
		  dataset.addValue(2.0, "Maths", "Lama");
		  dataset.addValue(4.0, "Arabic", "Reem");
		  dataset.addValue(3.0,"Physics", "Reem");
		  dataset.addValue(2.0, "Maths", "Reem");


		// create a chart...
		JFreeChart chart = ChartFactory.createAreaChart( 
		"Area Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);


		// Extras and the modifications...

	   //1- set colors for External background  
				chart.setBackgroundPaint(Color.white);

	   //2- set colors for Title 
				chart.getTitle().setPaint(Color.blue);

	   //3- add addSubtitle
                chart.addSubtitle(new TextTitle("Comparison between Students Marks"));

	   //4- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.yellow);

       //5- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

	   //6- set the alpha-transparency for the plot. It takes the float type argument.	
				plot.setForegroundAlpha(0.7f);

       //7- set colors for renderers
				  CategoryItemRenderer renderer = plot.getRenderer();
				  renderer.setSeriesPaint(0, Color.red);
				  renderer.setSeriesPaint(1, Color.green);
				  renderer.setSeriesPaint(2, Color.blue);

	  //8- add TextTitle
				 TextTitle source = new TextTitle("This Example is for Arabteam2000 java members" );
				 source.setPosition(RectangleEdge.BOTTOM);
				 source.setHorizontalAlignment(HorizontalAlignment.LEFT);
				 chart.addSubtitle(source);





		}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			AreaChart demo = new AreaChart("Area Chart Demo");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}	
		}

الشكل الناتج فسيكون :

السلام عليكم

سنتطرق اليوم في درسنا الى نوع جديد من الرسومات البيانية الـ Waterfall Chart أو رسوم الشلال البيانية او مخططات الشلال لا ادري ان كان هناك تسمية عربية أدق من تلك

ولمن لا يعرف ما هي الـ Waterfall Chart ساقول باختصار انها كدرج تتجه درجاته صعودا اذا كانت القيمة موجبة وتتجه نزولا اذا كانت القيمة سالبة

وبشكل عام يتم تمثيله بواسطة اعمدة فالعامود الاول يكون هو قيمة اول قسم يراد تمثيله والعامود الاخير يكون المجموع الكلي للقيم السابقة ابتداء بالقيمة الاولى وانتهاء بالقيمة ما قبل الأخيرة بغض النظر ما اذا كانت هذه القيم سلبية أم موجبة انما اتحدث عن جمع جبري

ولمزيد من المعلومات عن هذا المفهوم يرجى زيارة الرابط التالي Waterfall Chart

بعد هذه المقدمة السريعة سنتحدث عن كيفية رسم هذا النوع من الرسوم البيانية وبشكل عام لن نتطرق لأي جديد في الشرح تقريبا فكل الخطوات تقريبا تم شرحها بالدروس السابقة

1- create a dataset أي عمل وتهيئة البيانات والمعلومات التي نود رسمها بالمخطط البياني

	DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        dataset.addValue(15.76, "Product 1", "Labour");
        dataset.addValue(8.66, "Product 1", "Administration");
        dataset.addValue(6.71, "Product 1", "Marketing");
        dataset.addValue(4.94, "Product 1", "Mangement");
        dataset.addValue(-13.51, "Product 1", "Lost");
        dataset.addValue(-4.32, "Product 1", "Distribution");
        dataset.addValue(18.24, "Product 1", "Total Expense");

هنا يجب ان تعرف عدة اشياء وهي

- القيمة الأخيرة 18.24 هي ناتج مجموع كل القيم التي قبلها

- يتم رسم كل قيمة بعامود مستقل يتجه للاعلى اذا كانت قيمته موجبه وللاسفل اذا كانت قيمته سالبة

-بالنسبة لالوان الأعمدة فهي مختلفة حيث ان لونعامود الذي يمثل اول قيمة ياخد دوما لون مختلف ويكون هو اللون الازرق كلون افتراضي اما العامود الاخير الذي يمثل المجموع الكلي لكل القيم التي تسبقه وياخذ الون الأصفر كلون افتراضي

اما الأعمدة الباقية بين العامود الأول والأخير فتكون خصراء اللون اذا كانت موجبة وحمراء اذا كانت سالبة كما نرى بالشكل التالي:

الكود لهذا الرسم البياني كما يلي

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.jfree.chart.title.TextTitle;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.HorizontalAlignment;
import org.jfree.ui.RectangleEdge;
import org.jfree.ui.RefineryUtilities;


public class WaterfallChart extends ApplicationFrame {

	public WaterfallChart(String title) {
		super(title);
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        dataset.addValue(15.76, "Product 1", "Labour");
        dataset.addValue(8.66, "Product 1", "Administration");
        dataset.addValue(6.71, "Product 1", "Marketing");
        dataset.addValue(4.94, "Product 1", "Mangement");
        dataset.addValue(-13.51, "Product 1", "Lost");
        dataset.addValue(-4.32, "Product 1", "Distribution");
        dataset.addValue(18.24, "Product 1", "Total Expense");


		// create the chart...
		JFreeChart chart = ChartFactory.createWaterfallChart(
		"Random Calculation", // chart title
		"Release", // domain axis label
		"Class Count", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips
		false // urls
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart);
		chartPanel.setPreferredSize(new Dimension(700, 320));
		setContentPane(chartPanel);

		/**
		// Extras and the modifications...

		//1- set colors for External background 
		chart.setBackgroundPaint(Color.green);

		//2- set colors for Internal background
		CategoryPlot plot = (CategoryPlot) chart.getPlot();
		plot.setBackgroundPaint(Color.white);

		//3- set colors for grid lines
		plot.setRangeGridlinePaint(Color.orange);


		//4- change the auto tick unit selection to integer units only...
		NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
		rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());


		//5- add addSubtitle
		chart.addSubtitle(new TextTitle("Number of Classes By Release"));

		//6- add TextTitle
		TextTitle source = new TextTitle(
		"Source: Java In A Nutshell (4th Edition) "+ "by David Flanagan (O’Reilly)" );
		source.setFont(new Font("SansSerif", Font.PLAIN, 10));
		source.setPosition(RectangleEdge.BOTTOM);
		source.setHorizontalAlignment(HorizontalAlignment.RIGHT);
		chart.addSubtitle(source);
		*/
		}


	/**
	* Starting point for the demonstration application.
	*
	* @param args ignored.
	*/
	public static void main(String[] args) {
	WaterfallChart demo= new WaterfallChart("Waterfall Chart Demo");
	demo.pack();
	RefineryUtilities.centerFrameOnScreen(demo);
	demo.setVisible(true);
	}
	}

السلام عليكم

جزاك الله كل خير على مجهودك

طيب في ملف انت رفعتو jfreechart ياريت توضحلي لايش هادا وين لازم ينوضع

وفي بالكود extends ApplicationFrame بطلعلي error عندها

شكرا :)

hazimzxc كتب:

السلام عليكم

جزاك الله كل خير على مجهودك

طيب في ملف انت رفعتو jfreechart ياريت توضحلي لايش هادا وين لازم ينوضع

وفي بالكود extends ApplicationFrame بطلعلي error عندها

شكرا :)

أخي الملفات الموجودة بالمرفقات التابعة للدرس الاول هي عبارة عن مكتبات لتشغيل المخططات والرسوم البيانية المذكورة بالدروس

والخطأ الذي تحصل عليه هو نتيجة عدم اضافتك لهذه المكتبات ولتتمكن من اضافتها يمكنك مشاهدة المشاركة التالية في هذا المنتدى

اضافة مكتبة

بالتوفيق

ضفت المكتبان وكلو تمام اشتغل

شكرا على موضوعك والى الامام ....

السلام عليكم

اليوم لن اغوص بانواع جديدة من الرسوم البيانية انما سأعرض نفس الرسوم البيانية لكن بطرق مختلفة

ما اعنيه انه حتى الآن كل الرسوم البيانية التي جرى عرضها كانت ثنائية البعد 2D لكن هل من الممكن ان تكون ثلاثية الأبعاد 3D؟؟

نعم هذا ممكن طبعا ليس في كل الرسوم انما البعض منها يمكن ان يتم عرضه بشكل ثلاثي الأبعاد والبعض الآخر لا للاسف

عرض الرسوم البيانية بشكل ثلاثي الأبعاد ليس فيه أي جديد من الناحية البرمجية سوى اصافة 3D الى الكود فهل هناك أسهل من هذا؟؟ أكيد لا

سأبدا اليوم بعرص المخططات الدائرية أو 3D Pie Charts بشكل ثلاثي الابعاد وسأركز فقط على ما هو جديد ولن أذكر القديم أو المكرر

نبدأ مباشرة من الخطوة الثانية create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

			// create a chart...
			JFreeChart chart = ChartFactory.createPieChart3D(
			"Sample Pie Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

لاحظ معي هنا تمت اضافة 3D مع createPieChart لتصبح createPieChart3D بينما سابقا كنا نكتب فقط createPieChart

الخطوة الرابعة والمتعلقة بالاضافات سأشرح بعض الامور الجديدة

Extras and the modifications كما قلنا سابقا ان هذه الخطوة ليس ضرورية لكنها مفيدة لما فيها من ادوات تعطينا خيارات اوسع لتغيير وتعديل بعض الاشياء في الرسم

أولاً: الاستدارة

			// during 3D to make it 100% Circular
			plot.setCircular(true);

حيث اذا انت true عندئذ سينتج لدينا رسم بياني مستدير استداكرة كاملة اما اذا كانت خلاف ذلك فان الرسم سيكون مفلطح قليلا وبيضوي

ثانياً: الشفافية

			//set the alpha-transparency for the plot
			//plot.setForegroundAlpha(0.6f);

لتحديد نسبة الشفافية بين الأقسام التي يمثلها المخطط البياني حيث انه ثلاثي الأبعاد فمن الممكن باستخدام الشفافية أن نرى ما خلف كل قسم

بشكل عام بالنسبة لي أحبذ عدم استخدام الخاصتين السابقتين لأني أرى ان الشكل يكون اجمل بدونهما وهو رأي شخصي ومسالة أذواق بالنهاية لكني اتمنى منكم ان تجربوا الكود مع وبدون هذه الاضافات لتروا الفرق

واخير ا الكود كاملا مع الرسم الناتج

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartFrame;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PiePlot;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

	public class PieChart1 extends ApplicationFrame {
		public PieChart1(String title) {
			super(title);

			// create a dataset...
			DefaultPieDataset dataset = new DefaultPieDataset();
			dataset.setValue("Category 1", 43.2);
			dataset.setValue("Category 2", 27.9);
			dataset.setValue("Category 3", 79.5);

			// create a chart...
			JFreeChart chart = ChartFactory.createPieChart3D(
			"Sample 3D Pie Chart", // the main Lable for this chart
			dataset,
			true, // legend?
			true, // tooltips?
			false // URLs?
			);

			// add the chart to a panel...
			ChartPanel chartPanel = new ChartPanel(chart, false);
			chartPanel.setPreferredSize(new Dimension(500, 270));
			setContentPane(chartPanel);

			// Extras and the modifications
			PiePlot plot = (PiePlot) chart.getPlot();
			plot.setSectionPaint("Category 1", Color.yellow);
			plot.setSectionOutlinesVisible(false); //Outline Visibility

			// during 3D to make it 100% Circular
			//plot.setCircular(true);

			//set the alpha-transparency for the plot
			//plot.setForegroundAlpha(0.6f);


	}

		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			PieChart1 demo = new PieChart1("Pie 3D Demo ");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}

السلام عليكم

نكمل اليوم مع درس جديد ونتابع شرح ما بداناه الدرس السابق عن المخططات ثلاثية الأبعاد 3D

اليوم سنتطرق لمخططات الاعمدة بشكلها ثلاثي الأبعاد 3D Bar Chart

الكود هو نفس الكود القديم انما هناك اضافة وحيدة وصغيرة فقط في الخطة الثانية كما يلي:

create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

		// create a chart...
		JFreeChart chart = ChartFactory.createBarChart3D( 
		"3D Bar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

لاحظ معي هنا تمت اضافة 3D مع createBarChart لتصبح createBarChart3D ينما سابقا كنا نكتب فقط createBarChart

أما باقي الخطوات فهي نفس الخطوات في ما مضى بالنسبة لهذا النوع من المخططات واليكم الكود كاملا مع الرسم الناتج

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

public class 3DBarChart extends ApplicationFrame {

	public 3DBarChart(String title) {
		super(title);

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(1.0, "Row 1", "Column 1");
		dataset.addValue(5.0, "Row 1", "Column 2");
		dataset.addValue(3.0, "Row 1", "Column 3");
		dataset.addValue(2.0, "Row 2", "Column 1");
		dataset.addValue(3.0, "Row 2", "Column 2");
		dataset.addValue(2.0, "Row 2", "Column 3");
		dataset.addValue(4.0, "Row 3", "Column 1");
		dataset.addValue(1.5, "Row 3", "Column 3");

		// create a chart...
		JFreeChart chart = ChartFactory.createBarChart3D( //can without 3D
		"3D Bar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);


		// Extras and the modifications...

		//1- set colors for External background  
				chart.setBackgroundPaint(Color.green);

		//2- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.blue);

		//3- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

		//4 - set colors for renderers
				BarRenderer renderer = (BarRenderer) plot.getRenderer(); 
				renderer.setSeriesPaint(0, Color.green);// color of first renderer of each group
				renderer.setSeriesPaint(1, Color.yellow);// color of second renderer of each group
				renderer.setSeriesPaint(2, Color.red); // color of third renderer of each group

				renderer.setDrawBarOutline(true);
				renderer.setItemMargin(0.1);// determine the empty space between renderers

		}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			3DBarChart demo = new 3DBarChart("3D Bar Demo");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}

وعليك السلام ورحمة الله وبركاته

أسأل الله أن يحرم وجهك على النار ويجزاك الفردوس الأعلى من الجنة .

هدف الشمالي كتب:

وعليك السلام ورحمة الله وبركاته

أسأل الله أن يحرم وجهك على النار ويجزاك الفردوس الأعلى من الجنة .

اهلا اخي حياك الله ويسعدني انك تجد الدروس مفيدة

تحياتي

السلام عليكم

نكمل اليوم مع اضافة جديدة للرسوم البيانية ثلاثية الأبعا وهذه المرة الشرح سيكون من نصيب الرسوم البيانية الخطية ثلاثية الأبعاد او الـ 3D Line Chart

حسنا رسم خطي وثلاثي الأبعاد !!! غريبة قليلاً أليس كذلك على كل حال انا علي الشرح وعليك أخي الكريم حرية الاستغراب من عدمه

وكما ورد معنا في شروحات سابقة لا جديد بالموضوع سوى اضافة 3D كما سنرى

create a chart رسم الشكل الاساسي للمخطط مع اضافة البيانات وايضا اضافة العنوان الرئيسي للمخطط

	// create the chart...
		JFreeChart chart = ChartFactory.createLineChart3D(
		"Java Standard Class Library", // chart title
		"Release", // domain axis label
		"Class Count", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips
		false // urls
		);

تمت اضافة 3D مع createLineChart لتصبح createLineChart3D ينما سابقا كنا نكتب فقط createLineChart

اقي الخطوات فهي نفس الخطوات في ما مضى بالنسبة لهذا النوع من المخططات واليكم الكود كاملا مع الرسم الناتج

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.jfree.chart.title.TextTitle;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.HorizontalAlignment;
import org.jfree.ui.RectangleEdge;
import org.jfree.ui.RefineryUtilities;

public class 3DLineChart extends ApplicationFrame {

	public 3DLineChart (String title) {
		super(title);
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(212, "Classes", "JDK 1.0");
		dataset.addValue(504, "Classes", "JDK 1.1");
		dataset.addValue(1520, "Classes", "SDK 1.2");
		dataset.addValue(1842, "Classes", "SDK 1.3");
		dataset.addValue(2991, "Classes", "SDK 1.4");


		// create the chart...
		JFreeChart chart = ChartFactory.createLineChart3D(
		"Java Standard Class Library", // chart title
		"Release", // domain axis label
		"Class Count", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips
		false // urls
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);

		// Extras and the modifications...

		//1- set colors for External background 
		chart.setBackgroundPaint(Color.green);

		//2- set colors for Internal background
		CategoryPlot plot = (CategoryPlot) chart.getPlot();
		plot.setBackgroundPaint(Color.white);

		//3- set colors for grid lines
		plot.setRangeGridlinePaint(Color.orange);

		//4- change the auto tick unit selection to integer units only...
		NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
		rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

		//5- Customize the renderer...
		LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();
		renderer.setShapesVisible(true);
		renderer.setDrawOutlines(true);
		renderer.setUseFillPaint(true);
		renderer.setFillPaint(Color.blue);

		//6- add addSubtitle
		chart.addSubtitle(new TextTitle("Number of Classes By Release"));

		//7- add TextTitle
		TextTitle source = new TextTitle(
		"Source: Java In A Nutshell (4th Edition) "+ "by David Flanagan (O’Reilly)" );
		source.setFont(new Font("SansSerif", Font.PLAIN, 10));
		source.setPosition(RectangleEdge.BOTTOM);
		source.setHorizontalAlignment(HorizontalAlignment.RIGHT);
		chart.addSubtitle(source);

		}


	/**
	* Starting point for the demonstration application.
	*
	* @param args ignored.
	*/
	public static void main(String[] args) {
	3DLineChart demo= new 3DLineChart ("3D Line Chart Demo");
	demo.pack();
	RefineryUtilities.centerFrameOnScreen(demo);
	demo.setVisible(true);
	}
	}

السلام عليكم نأتي الآن لشرح النوع الأخير من الرسوم البيانية ثلاثية الأبعاد وهذه المرة سنقوم بشرح 3D Stacked Bar Charts

وكما راينا سابقا في الدروس الثلاث السابقة لن يكون هناك تغير سوى في الخطوة الثانية عندما نضيف 3D الى createStackedBarChart لتصبح createStackedBarChart3D

هذا كل ما في الأمر أترككم مع الكود بعد هذا التعديل الطفيف

import java.awt.Color;
import java.awt.Dimension;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;

public class 3DStackedBarChart extends ApplicationFrame {

	public 3DStackedBarChart(String title) {
		super(title);

		// create a dataset...
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(1.0, "Row 1", "Column 1");
		dataset.addValue(5.0, "Row 1", "Column 2");
		dataset.addValue(3.0, "Row 1", "Column 3");
		dataset.addValue(2.0, "Row 2", "Column 1");
		dataset.addValue(3.0, "Row 2", "Column 2");
		dataset.addValue(2.0, "Row 2", "Column 3");
		dataset.addValue(4.0, "Row 3", "Column 1");
		dataset.addValue(1.5, "Row 3", "Column 3");

		// create a chart...
		JFreeChart chart = ChartFactory.createStackedBarChart3D( //can without 3D
		"3D StackedBar Chart Demo", // chart title
		"Category", // domain axis label
		"Value", // range axis label
		dataset, // data
		PlotOrientation.VERTICAL, // orientation
		true, // include legend
		true, // tooltips?
		false // URLs?
		);

		// add the chart to a panel...
		ChartPanel chartPanel = new ChartPanel(chart, false);
		chartPanel.setPreferredSize(new Dimension(500, 270));
		setContentPane(chartPanel);


		// Extras and the modifications...

		//1- set colors for External background  
				chart.setBackgroundPaint(Color.green);

		//2- set colors for Enternal background
				CategoryPlot plot = (CategoryPlot) chart.getPlot();
				plot.setBackgroundPaint(Color.blue);

		//3- set colors for grid lines
				plot.setRangeGridlinePaint(Color.black);

		//4 - set colors for renderers
				BarRenderer renderer = (BarRenderer) plot.getRenderer();
				renderer.setSeriesPaint(0, Color.green);// color of first renderer of each group
				renderer.setSeriesPaint(1, Color.yellow);// color of second renderer of each group
				renderer.setSeriesPaint(2, Color.red); // color of third renderer of each group

				renderer.setDrawBarOutline(true);

		}
		/**
		* Starting point for the demonstration application.
		*
		* @param args ignored.
		*/
		public static void main(String[] args) {
			3DStackedBarChartdemo = new 3DStackedBarChart("3D StackedBar Chart Demo");
			demo.pack();
			RefineryUtilities.centerFrameOnScreen(demo);
			demo.setVisible(true);
			}

		}