Динамически создавать Chart.JS из значений базы данных - PullRequest
0 голосов
/ 19 января 2019

Я использую jQuery-Plugin Chart.JS для создания красивых диаграмм и графиков для моего сайта - это работает довольно хорошо, если я использую статические значения. Теперь я пытаюсь создать диаграмму динамически из значений, которые хранятся в таблице в базе данных. Я много читал о том, как это сделать (ajax-call и т. Д.), Но я не могу просто выяснить, в чем моя вина.

Это мой скрипт для диаграммы вместе с ajax-методом:

$(document).ready(function () {

    $.ajax({
        type: "POST",
        url: "/ChartData.asmx/GetChartData",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess_,
        error: OnErrorCall_
    });


    // Defining chart.js-function to realize a woundchart with the size of the wound
    function OnSuccess_(response) {
        var aData = response.d;
        var array = [];
        $.each(aData, function (inx, val) {
            var obj = {};
            obj.value = val.value;
            array.push(obj);
        });
        var woundchart = document.getElementById('chartForWound');
        var chart = woundchart.getContext('2d');
        var colorFade = chart.createLinearGradient(0, 0, 0, 500); // creating linear gradient with: (x0, y0, x1, y1)
        // adding colorstops between 0 and 1 in the linear gradient
        colorFade.addColorStop(0, "#FF0000");
        colorFade.addColorStop(0.5, "#FFFF33");
        colorFade.addColorStop(1, "#00FF33");
        new Chart(chart, {
            type: 'line', // defining type of the chart as linechart
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // Labels for x-Axis
                datasets: [{
                    label: "Wundgröße in mm",
                    fill: false,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    borderColor: colorFade,
                    pointBorderColor: colorFade,
                    pointBackgroundColor: colorFade,
                    pointHoverBackgroundColor: colorFade,
                    pointHoverBorderColor: colorFade,

                    data: array, // TODO: entering values from database (y-values)


                }]
            },
            // Defining further options to style the graph
            options: {
                responsive: true,
                animation: {
                    duration: 4000, // time while animation is active (4000ms)
                    easing: 'easeInQuart' // style of the animation
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Zeit / Tage' // label for x-Axis
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Wundgröße / mm'  // label for y-Axis
                        }
                    }]
                }
            }
        });
    }
});

И это мой метод в моем .asmx-файле для получения значений из столбца в базе данных:

 [WebMethod]
        public List<ChartData> GetChartData(List<string> chartdata){

            List<ChartData> woundData = new List<ChartData>();
            ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["pflegedokumentationConnectionString"];
            SqlConnection conn = new SqlConnection(connectionString.ConnectionString);
            SqlCommand query = new SqlCommand("SELECT measurement_results FROM epadoc_mod_wound_chart_results", conn);
            conn.Open();
            SqlDataReader dr = query.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    ChartData data = new ChartData();
                    data.value = Convert.ToInt32(dr["measurement_results"].ToString());
                    woundData.Add(data);
                }
            }



            return woundData;

        }

Я не получаю никаких ошибок при запуске кода, диаграмма просто не создается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...