Как правильно сделать подготовку данных для графика из многомерного массива?

Question

[Николай Бараненко]

Здравствуйте.

Есть многомерный массив

#значения не в KPI
1,0,3,4
#значения в KPI
110,120,130,140
#сумма значений не в KPI и в KPI
111,120,133,144,
#значения KPI
99.1,100,97.74,97.22,
#значения времени
12:01,12:02,12:03,12:04

исходные данные в виде JSON

<c:set var="json_text">
    {
    "FailedCount":[{"FailedCount_MEAS_VALUE":1,"DATETIME_CURRENT":"12:01"},
    {"FailedCount_MEAS_VALUE":0,"DATETIME_CURRENT":"12:02"},
    {"FailedCount_MEAS_VALUE":3,"DATETIME_CURRENT":"12:03"},
    {"FailedCount_MEAS_VALUE":4,"DATETIME_CURRENT":"12:04"}],
    "SucceededCount":[{"SucceededCount_MEAS_VALUE":110},
    {"SucceededCount_MEAS_VALUE":120},
    {"SucceededCount_MEAS_VALUE":130},
    {"SucceededCount_MEAS_VALUE":140}]
    }
    </c:set>

подготовка данных

function culcJson() {
            var jsonObj = ${json_text};
            var VALUES=[];
            var n = jsonObj.FailedCount.length, m = 5;
            var mas = [];
            for (var i = 0; i < m; i++){
                mas[i] = [];
                for (var j = 0; j < n; j++){
                    if (i==0) {
                        mas[i][j] = jsonObj.FailedCount[j].FailedCount_MEAS_VALUE;
                    }
                    if (i==1)
                    {
                        mas[i][j] = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
                    }
                    if (i==2)
                    {
                        mas[i][j] =jsonObj.FailedCount[j].FailedCount_MEAS_VALUE+jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
                    }
                    if (i==3)
                    {
                    var KPI = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE / (jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE + jsonObj.FailedCount[j].FailedCount_MEAS_VALUE) * 100;
                        mas[i][j] = +KPI.toFixed(2);
                    }
                    if (i==4)
                    {
                        mas[i][j] =jsonObj.FailedCount[j].DATETIME_CURRENT;
                    }
                        VALUES.push(mas[i][j]);
                }}
            console.log(mas);
            return VALUES;
        }

пытаюсь построить график зависимости KPI от времени

$(function () {

            var VALUES;
            VALUES=culcJson();
            result_newjson.innerHTML = VALUES;

            $('#container').highcharts({
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: '${title}'
                },
                xAxis: {
                    categories: ["12:01","12:02","12:03","12:04"]

                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [
                    {
                        name: 'KPI',               
                       data: [99.5,100,98.56,99.99]
                    }
                ]
            });
        });

Каким образом корректно обратиться к массиву VALUES, чтобы выбрать только значения времени и KPI вместо статических значений
categories: ["12:01","12:02","12:03","12:04"] и data: [99.5,100,98.56,99.99]
?

Answer 1

[Николай Бараненко]

решение

подготовка данных

function culcJson() {

                var list = ${json_text};
                list.KPI  = [];

                for (var i = 0; i < list.FailedCount.length; i++){
                    list.KPI[i] = {};

                    if ((parseInt(list.SucceededCount[i].SucceededCount_MEAS_VALUE)+parseInt(list.FailedCount[i].FailedCount_MEAS_VALUE))!=0) {
                        var value = (parseInt(list.SucceededCount[i].SucceededCount_MEAS_VALUE)/(parseInt(list.FailedCount[i].FailedCount_MEAS_VALUE)+parseInt(list.SucceededCount[i].SucceededCount_MEAS_VALUE))*100);
                        list.KPI[i].KPI_MEAS_VALUE=+value.toFixed(2);
                    }
                    else
                    {
                        list.KPI[i].KPI_MEAS_VALUE=0;
                    }

                }
                return list;
            }

вывод результата

$(function () {
                list=[];
                var jsonObj = ${json_text};
                if (jsonObj!=null){list=culcJson();}

                $('#container1').highcharts({
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: '${TITLE}'
                    },
                    xAxis: {
                        categories: list.FailedCount.map(function(key) {
                        return key["DATE_CURRENT_CHECK"]
                    })
                    },
                    yAxis: {
                        title: {
                            text: ''
                        }
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [
                        {
                            name: 'KPI',
                            data: list.KPI.map(function(key) {
                                return key["KPI_MEAS_VALUE"]
                            })
                        }
                    ]
                });
});