具有动态过滤数据的highchart js动态系列

Question

堆栈社区： 我需要帮助为我的ajax调用呈现正确的顺序，这是临时的： 我之前发布过的one chart, multiple series multiple data with single data问题

示例： dIds = [6，10] cIds = [123，321，213]

如果我使用seriesDPOptions [index]，我得到的结果类似于每个“ cId”，但最后一个“ dId”
示例=> 10：123、321、213

如果我使用seriesDPOptions [i]，我得到的结果类似于每个“ dId”，但最后一个“ cId”
示例=> 6：213 | 10：213

我正在尝试为每个“ cId”呈现类似于每个“ dId”的结果
示例=> 6：123、321、213 | 10：123、321、213

// initialize the Analytics Page
LoadPage();

var seriesOptions = [],
            seriesCounter = 0,
            namesCounter = 0,
            names = [],//ALLPrimDealer.names;
            newjsonset = {},
            newDPSeries = [];
            // all indv PD
            count = 0,
            seriesDPOptions = [],
            seriesDPOptionsCounter = 0,
            dIds = [],
            dIdsCounter = 0,
            cIds = [],
            csCounter = 0,            
            newDPsubSeries = [],
            newDPSeries = [],
            newIndvPDjson = {};
            //

// start page
function LoadPage() {
    // all charts and tables are hidden on load
    //$("").hide();
    //$("").hide();
}

// called from the "GO!" button
function goDPCumPos() {

    // hide the error message if there is one
    hideMsg();

    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();
    var tradeValue = $("#tradeValue").val();
    var tradeTerm = $("#tradeTerm").val();


    // okay to run so start the spinner and run    
    startSpinner();  //////////////////////

    // get the page data and 
    // display the results
    getPageData(startDate, endDate, tradeValue, tradeTerm);

}

// main AJAX layer for getting page data from the controller api method
function getPageData(startDate, endDate, tradeValue, tradeTerm) {

    var requestData = { strStartDate: startDate, strAsOfDate: endDate, strSecType: tradeValue, strSecurityTerm: tradeTerm };

    var fullUri = uri + "/ApiGetPageCharts";

    $.ajax({
        url: fullUri,
        type: 'POST',
        data: JSON.stringify(requestData),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {

            //$("#displayItems").show();

            ///////////// PUT CALLS TO CHARTS HERE /////////////////////////            

            ////   MPSFINRAIndv chart run   ////
            // DealerId grouping
            var newDealerIds = [];
            var filteredDealerIds = [];
            for (var i = 0; i < data.ALLIndP["0"].name.length; i++)
            {
                var ob = data.ALLIndP["0"].name[i];
                var lookup = ob.dId + "|" + ob.cId;
                if (filteredDealerIds.indexOf(lookup) == -1)
                {
                    newDealerIds.push(ob.DealerId);
                    filteredDealerIds.push(lookup);
                }
                dealerIdsCounter++;   
            };// this give me the [6, 6, 6, 10, 10, 10]

            // Cusip Grouping
            for (i = 0; i < data.ALLIndp["0"].name.length; i++) {
                if (cIds.indexOf(data.ALLIndp["0"].name[i].cId) === -1) {
                    cIds.push(data.ALLIndp["0"].name[i].cId);
                    CusipIdsCounter++;
                }
            };
            dIds = [6, 10]; // testing for result
            $.each(dIds, function (i, dId) {                
                newIndvPDjson = JSON.parse(JSON.stringify(data.ALLIndp));                
                for (var x = 0; x < data.ALLIndp["0"].name.length; x++) {
                    var newDPSeriesCounter = 0;
                    var d = data.ALLIndPrimDealer["0"].name[x].dId;
                    var c = data.ALLIndPrimDealer["0"].name[x].cId;
                    if (d == dId) {
                        newDPsubSeries.push({
                            name: newIndvPDjson["0"].name[x],
                            data: newIndvPDjson["0"].data[x],
                        });
                        newDPsubSeries = JSON.parse(JSON.stringify(newDPsubSeries));
                    }                    
                }
                $.each(cIds, function (index, cId) {
                    newDPSeries = [];                    
                    // Series counter
                    for (var x = 0; x < newDPsubSeries.length; x++) {
                        var c = newDPsubSeries[x].name.cId;
                        var d = newDPsubSeries[x].name.dId;

                        if (c == cId && d == dId)
                        {
                            //new data
                            newDPSeries.push({ data: newDPsubSeries[x].data, date: newDPsubSeries[x].name.BizDate });//newDPsubSeries[x].data);
                            newDPSeries = JSON.parse(JSON.stringify(newDPSeries));                            
                        }                            
                    }

                    //newDPSeriesCounter++;

                    seriesDPOptions[index] = { 
                    //example
                    //dIds = [6, 10]
                    //cIds = [123, 321, 213]

                    //if I use seriesDPOptions[index] i get result like each "cId" but the last of "dId", example -> 10: 123, 321, 213
                    //if I use seriesDPOptions[i] i get result like each "dId" but the last of "cId".. example -> 6: 213 | 10: 213
                    // I am trying to render result like each "dId" for each "cId" example -> 6: 123, 321, 213 | 10: 123, 321, 213
                    name: dealerId + " " + CusipId,
                    data: newDPSeries,//[0].data,                        
                    date: newDPSeries.date
                };

                // As we're loading the data asynchronously, we don't know what order it will arrive. So
                // we keep a counter and create the chart when all the data is loaded.
            RunIndvPDChart();

            /// end MPSFINRAIndv ///

            //// we're done so stop the spinner
            stopSpinner();
        },
        error: function () {
            showErrorMsg('Error getting data');
            stopSpinner();
        }
    });
}

function RunIndvPDChart()
{
    $('#AllIndvPD-chart').html('');    

    // chart is a new chart object
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'AllIndvPD-chart',
            zoomType: 'xy',
        },
        title: {
            text: 'DP c Cumulative Posititions',
        },
        subtitle: {
            text: ''
        },

        xAxis: {
            title: {
                text: 'Days'
            },
            type: 'linear',
            showFirstLabel: true,
            startOnTick: false
        },

        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}'
            },
            title: {
                text: 'Cumulative Sum'
            },
        },
        ],

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>${point.y}</b> bn<br/>',
            valueDecimals: 3,
            //shared: true
        },

        series: seriesDPOptions,
    });
}