داینامیک کردن chart.js

سلام
مشکل کجاست؟ Chartjs هم فرم استاندارد داره هم مثال و مستندات روشنی ارایه داده اگر کافی نیست مشکل رو مطرح بفرمایید.

@hekmati کلا. یه دیتایی از سمت سرور بگیرم و روی چارت نشون بدم رو باهاش مشکل دارم داکیومنت هارو خوندم یکم گنگ بود برام متوجه نشدم
تقریبا جوریه که کار بر دکمه محاسبه رو میزنه یه چارت جدید براش ساخته بشه و نمایش داده بشه

این یه مثال ساده رو توضیح میدم امیدوارم مفید باشه

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

ببینید در خط اول باید یه تگ canvas برای ترسیم نمودار ایجاد کنید ویژگی هاش که معلومه.
حالا یه سری تنظیمات داره و یه سری داده باید بهش پاس بدید
این یک نمودار دو بعدی است که در قسمت type نوع bar براش تعریف شده این قسمت رو می تونید تغییر بدید تا مدلهای مختلف نمایش رو داشته باشید.
در قسمت data اطلاعات مورد نیاز برای یک نمودار شش ستونه به این شکل تعریف شده.
labels که نام یا برچسب ستون ها میشه. دقت کنید شش ایتم داره.
data که مقدار عددی رو مشخص میکنه اینجا طول ستون مورد نظر است.
backgroundColor و borderColor هم برای رنگ ستون و حاشیه است دقت کنید این موارد به صورت آرایه هستند و هر عضو ارایه متناظر آرایه های دیگه است. یعنی عنصر اول data داره طول ستون اول رو مشخص می کنه و عنصر اول آرایه مربوط به بک گراند و بوردر هم برای ستون اوله. یعنی عضو صفرم تا پنجم هر آرایه به ترتیب ستون اول تا ششم رو تعریف می کنه.
در قسمت آخر یعنی آپشن هم روی محور y فاصله از محور رو صفر در نظر گرفته یعنی محل شروع نمودار (beginAtZero)

ممنون یکم باهاش کار کردم دستم اومد چجوری کار میکنه

    jQuery(document).ready(function($){
    $('#suggestform').on('submit',function(event){
        var ctx = document.getElementById('myChart');
        event.preventDefault();
        let is_active = false;
        //console.log(1);
        let time = $('#time option:selected').val();
        let risk = $('#risk option:selected').val();

        $.ajax({
            url: '/url',
            type:'post',
            dataType:'json',
            data:{
                action:'test',
                calc:time,
                risk:risk
            },
            success:function(response){
                // JS - Destroy exiting Chart Instance to reuse <canvas> element
                let chartStatus = Chart.getChart("myChart"); // <canvas> id
                if (chartStatus != undefined) {
                    chartStatus.destroy();
                    //(or)
                    // chartStatus.clear();
                }
                //-- End of chart destroy

                let label  = response.label_name;
                var jsonfile = {
                    "jsonarray": label
                };

                var labels = jsonfile.jsonarray.map(function(e) {
                    return e;
                });
                var data = [1,4,6,10,4];

                var config = {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Graph Line',
                            data: data,
                            backgroundColor: 'rgba(0, 119, 204, 0.3)'
                        },{
                            label: 'Graph Line',
                            data: data,
                            backgroundColor: 'rgba(0, 120, 24, 0.3)'
                        }]
                    }
                };

                    var chart = new Chart(ctx, config);

            },
            error:function(error){
                if(error){
                    let message = error.responseJSON.message;

                }
            }
        })
    });
    });