رسومات بيانية باستخدام لغة الجافا من الانترنت

[jjafferr]

السلام عليكم 🙂

 

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

وهنا تفاصيل الشفرة https://www.chartjs.org/docs/latest/samples/information.html

قمت بإنزال الملف واسمه Better-Access_Charts.accdb من موقع https://github.com/team-moeller/better-access-charts

وهذه احد الرسومات البيانية اللي فيه:

.

ونتحكم بنوع الرسومات وتفاصيل المحاور وووو ، من النموذج التالي ، ثم ننقر على الزر الذي عليه السهم الاحمر ، ليعمل تغيير في نموذج الرسومات البيانية

.

(وهناك ملف آخر هنا https://github.com/team-moeller/better-access-pivottable جميل ان يتم الاطلاع عليه ايضا).

 

تواصلت مع اخي الاستاذ @أبو إبراهيم الغامدي لكي ينظر في الملف وطريقة عمله ، فما شاء الله عليه امدّني بملف اسمه Web Charts.zip وهو برنامج مختصر ومبسّط للملف الآخر ، وهذه احدى صور رسومات البيانات منه:

.

واتمنى على اخي أبو إبراهيم ان يجعل برنامجه يقبل تغيير انواع الرسومات البيانية كما في البرنامج الآخر 🙂

 

ميزات الموضوع:

• فتح باب جديد لطريقة عمل/عرض الاكسس وربطه مع ميزات حديثة من الانترنت .

عيوب الموضوع:

• يجب ان تعرف مكان وجود هذه الشفرات في الانترنت ، وتعرف كيفية استعمالها ، وتتعلم كيف تربطها بالاكسس ،
• لا تتوقع الحصول على مساعدة من منتدى الاكسس لحل مشكلتك ، فنحن لا نفهم لغة الجافا او HTML .

 

جعفر

Better-Access_Charts.accdb.zip Web Charts.zip

[عبدالقدوس48]

جزاك الله خير أخي عمل رائع جعله الله في ميزان حسناتك

[أبوبسمله]

جزاك الله خيرا معلمنا العزيز جعفر 💐

على كل ما تطرحه وتقدمه لنا من معلومات جديده ومشوقه تدفعنا الى التعلم اكثر واكثر

واما عن عيوب الموضوع فذلك يدفع من يريد استخدام تقنيات الويب لتعلم لهتمل وجافا سكريبت وغيرها من الادوات والمكتبات المساعده فى تطبيقات الويب وتعلم اخضاعها داخل الاكسيس كما يفعل اخى ومعلمى العزيز @أبو إبراهيم الغامدي بتطويعه لهذه التقنيات بكفائه ومرونه عاليه بداخل الاكسيس

جزاكم الله خيرا اخوانى واساتذتى 🌹

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

لانى اول مره اعمل على برنامج عالشبكه والحمدلله الامور كلها تمام فجزاك الله خيرا معلمى العزيز 🌹

[Amr Ashraf]

السلام عليكم .. استاذنا الفاضل @jjafferr موضوع هام جدا وكنت قد فتحت موضوعا لأستفسر عن طريقة عمل مثل هذه التقارير والرسومات البيانية و Dashboard فى هذا الموضوع

 

 

وللأسف لم يتصدى احد للاجابة عن السؤال فقمت بتأجيل الفكرة لوقت آخر .. نتمنى استكمال الموضوع وسأقوم بتجربة المرفقات .. جزاكم الله خير على طرح الموضوع

[أبو إبراهيم الغامدي]

في 8‏/2‏/2022 at 00:02, jjafferr said:

واتمنى على اخي أبو إبراهيم ان يجعل برنامجه يقبل تغيير انواع الرسومات البيانية كما في البرنامج الآخر

جعلت عملية الاختيار تتم عن طريق مربع التحرير والسرد في صفحة الويب.. 

إذا أردت أن أجعل الاختيار يتم عن طريق أزرار الاختيار في النموذج فهذا أسهل للفهم..

لكني أفضل أن يكون التعامل مع صفحة البيانات مباشرة!

طريقة عمل التبديل بين المخططات تمرير قيمة نصية باسم نوع المخطط إلى المعامل ChartType  ضمن الإجراء CHARTS(ChartLabels, ChartData, ChartType) 

Public Sub CHARTS(ChartLabels, ChartData, CharType)
   Dim J As String
   
   ' ------- All these codes implemented in Web browser document
   
   '------- Chart container
   J = J & "var ctx=document.getElementById('chart-bar').getContext('2d');"
   
   '------- Chart Type
   J = J & "var myChart=new Chart(ctx,{type:'" & CharType & "',"
   
   '------- Chart Data
   J = J & "data:{labels: [" & ChartLabels & "],"
   J = J & "datasets: [{label: 'Count Of Transaction Type',data: [" & ChartData & "],"
   
   '------- Styling Chart components
   J = J & "backgroundColor:"
   J = J & "['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)',"
   J = J & "'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],"
   J = J & "borderColor:"
   J = J & "['rgba(255,99,132,1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)',"
   J = J & "'rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],"
   J = J & "borderWidth: 1}]},"
     
   '------- Chart options added here,refer to ChartJS documentation for more practicing
   J = J & "options: {responsive:true,scales:{yAxes:[{ticks:{beginAtZero:true}}]}}});"
   '--- Execute JScript code
   WF.PW.execScript (J)
End Sub

الإجراء سابق الذكر لا يقوم بتنفيذ رسم المخطط بذاته ولكن يقوم بتجميع شفرة JavaScript وكتابتها في صفحة الويب وهذه الأخيرة تقوم بتنفيذه..

والأفضل أن نقوم بكتابة شفرة JavaScript في بنية الصفحة ضمن الجدول WebCode ثم نقوم باستدعاءها من داخل أكسس بعد تمرير قيم المعاملات إليها..

وسبب كون الخيار الثاني هو الأفضل

.. صعوبة الأول: لأن كتابة شفرة جافا بهذه الطريقه يوقع في الخطأ لا محالة..

.. أما الثاني: سهولة كتابة الشفرة مباشرة، لكونها أسهل شفرة يمكن كتابتها بين الشفرات البرمجية! كما أنه يمكن اقتباسها من الويب ولصقها في الجدول من دون قلق!

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

ولتوضيح السبب..

حيث أننا قمنا باستعاء الإجراء CHARTS مرتين: مرة عند إقلاع النموذج، والمرة الثانية عند اختيار نوع المخطط؛ فإن شفرة الجافا تقوم بإشاء رقعة الرسم مرتين، مرة للمخطط الأساسي ومرة للرسم المختار من القائمة.. عند المرور بالمؤشر على رقعة الرسم فسوف نرى أن الصفحة تقوم بالتبديل بين الرسمين! وهذا أمر سيء للغاية، ولذا احتجنا إلى انهاء الأول قبل رسم الثاني وذلك باستخدام إجراء متعلق بالمخطط اسمه Destroy  قبل اختيار المخطط الجديد

Private Sub WebBrowser0_TitleChange(ByVal Text As String)
   If Not Text Like "about:*" Then
      JS.mychart.destroy ' انهاء الرسم السابق
      Call CHARTS(TransData.Labels, TransData.Data, Text)
   End If
End Sub

المرفق بعد التعديل..

  Web Charts3.zip

 

[Amr Ashraf]

10 دقائق مضت, أبو إبراهيم الغامدي said:

المرفق بعد التعديل..

 بارك الله فيك وجزاك خير الجزاء على هذا العمل الرائع استاذنا الكريم .. النتيجة رائعة ولكن اظن ان طريقة تعديل مصدر البيانات الخاص بالرسم البيانى صعب على المبتدئين امثالى 😌

[abouelhassan]

زادكم الله من فضله

[jjafferr]

شكرا جزيلا اخوي أبو إبراهيم في اثراء الموضوع ، وشكرا على المثال الجميل 🙂

 

22 ساعات مضت, أبو إبراهيم الغامدي said:

جعلت عملية الاختيار تتم عن طريق مربع التحرير والسرد في صفحة الويب.. 

إذا أردت أن أجعل الاختيار يتم عن طريق أزرار الاختيار في النموذج فهذا أسهل للفهم..

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

وكما تفضلت ، فلو كان زر الاختيار في النموذج يكون افضل للمستخدم ، واسهل للفهم 🙂

 

جعفر