اذهب إلى المحتوى
  • 0

تحديث الرسوم البيانية charts في لارافل

Amir Alsaeed

السؤال

قمت بتضمين بعض الرسوم البيانية في الصفحة باستخدام مكتبة laravel charts. واستدعي البيانات من خلال هذا الأمر:

{!! $chart->container() !!} 

ولكن أرغب بتحديث بيانات هذه الرسوم البيانية بمدة محددة كل دقيقة مثلاً، وجدت ضمن التوثيق الخاص بالمكتبة الأكواد التالية التي يتم استخدامها لاستعادة البيانات إلى الواجهات views:

class SampleChart extends BaseChart
{
    /**
     * Handles the HTTP request for the given chart.
     * It must always return an instance of Chartisan
     * and never a string or an array.
     */
    public function handler(Request $request): Chartisan
    {
        return Chartisan::build()
            ->labels(['First', 'Second', 'Third'])
            ->dataset('Sample', [1, 2, 3])
            ->dataset('Sample 2', [3, 2, 1]);
    }
}

وملف الجافاسكريبت:

 const chart = new Chartisan({
        el: '#chart',
        url: "@chart('sample_chart')",
      });

ولكن كيف سأتمكن من تحديث البيانات بشكل دوري إلى الرسوم البيانية؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

ربما يجب ان تكون مسار لجلب البيانات فيكون بهذا الشكل 

Route::get('chart-api', 'MyControllerController@getchart')->name('getChart');

ثم بداخل المتحكم تضيف 

$getData = route('getChart');

ثم يمكن استخدام دالة load لجلب البيانات الجديدة بهذا الشكل

$getData = route('getChart');

$chart->labels(['chart1'])->load($getData)

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يتم تنفيذ شيفرة المخدم مرة واحدة عند تحميل الصفحة، ويتم عرض البيانات لأول مرة عندها، لتحديث البيانات التي ستعمل مكتبة الرسوميات عليها يجب استخدام ajax لإعادة طلب البيانات (التي من الممكن أنها تتغير مع مرور الوقت) لذلك يجب عمل متحكم مهمته هي إرجاع البيانات فقط (جزء من api) التي بعد طلبها سيتم عمل render عند العميل (المتصفح) بعد تحميل البينات الجديدة و إعادة الرسم.

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

في حال لم تعمل يمكنك عزل الجزء الخاص بجلب البيانات مع دوال الرسم في دالة واستدعائها بفواصل زمنية باستخدام set Interval

window.setInterval(function(
    displaygraph();
}, 50000);

يمكنك الاستفادة من الإجابة السابقة لعمل المتحكم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...