Member 12359516 Ответов: 1

Код JavaScript, чтобы разделить данные JSON в виде четырех точек данных массива связывать с stackedbar canvasjs графике?

У меня есть массив строк JSON в следующем формате:

{
   [
      {
         "BillingMonth":"11",
         "BillingYear":"2016",
         "Volume":"72",
         "BillingMonthName":"November",
         "BillingProduct":"Product1"
      },
      {
         "BillingMonth":"11",
         "BillingYear":"2016",
         "Volume":"617",
         "BillingMonthName":"November",
         "BillingProduct":"Product2"
      },
      {
         "BillingMonth":"11",
         "BillingYear":"2016",
         "Volume":"50",
         "BillingMonthName":"November",
         "BillingProduct":"Product3"
      },
      {
         "BillingMonth":"11",
         "BillingYear":"2016",
         "Volume":"617",
         "BillingMonthName":"November",
         "BillingProduct":"Product4"
      },
      {
         "BillingMonth":"12",
         "BillingYear":"2016",
         "Volume":"72",
         "BillingMonthName":"December",
         "BillingProduct":"Product1"
      },
      {
         "BillingMonth":"12",
         "BillingYear":"2016",
         "Volume":"72",
         "BillingMonthName":"December",
         "BillingProduct":"Product2"
      },
      {
         "BillingMonth":"12",
         "BillingYear":"2016",
         "Volume":"72",
         "BillingMonthName":"December",
         "BillingProduct":"Product3"
      },
      {
         "BillingMonth":"12",
         "BillingYear":"2016",
         "Volume":"72",
         "BillingMonthName":"December",
         "BillingProduct":"Product4"
      }
   ]
}

Существуют различные продукты (Product1,Product2,Product3, Product4), продаваемые в ноябре и декабре каждый.

Я должен создать одну диаграмму stackcolumn или диаграмму stackedBar в canvas js с легендами, несущими название продуктов.

Я хочу подготовить четыре различных массива точек данных, чтобы назначить отображение одного столбца для каждого месяца ноябрь и декабрь с различными продуктами в различном цвете, удерживающимися в одном столбце динамически.

Пожалуйста, помогите мне написать javascript для достижения этого сценария.

Спасибо!!!

Что я уже пробовал:

Result = JSON.parse(Result.d);
                    var dataPoints = [];
                    var dataPointsnew = [];
                    var dataPointsNew1 = [];
                    var dataPointsNew2 = [];
                    for (var i = 0; i <= Result.length - 1; i++) {
                        var series = new Array(dataPoints.push({ x: Result[i].BillingMonthName + '-' + Result[i].BillingYear, y: Result[i].Volume }));
                    }

                    dataPointsnew = dataPoints.chunk(8);

                    dataPointsNew1 = dataPointsnew[0][1];

                    dataPointsNew2 = dataPointsnew[1];

1 Ответов

Рейтинг:
1

Sagar Tajpara

Попробуйте этот код. Это Сработает.

$(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Pagename/Data",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var Result = r.d;
                var Remove1 = Result.substring(2, Result.length); // Remove First { [
                var Remove2 = Remove1.slice(2, Remove1.length); // Remove Last ] }
                var split1 = Remove2.split('},'); //Split By },

                var dataPoints = [];
                for (var i = 0; i <= split1.length - 1; i++) {

                    var InnerSplit = split1[i].split(','); //Split by , for Billing details 
                    var TempBillingName = InnerSplit[3].split(':'); //split for billing name ' 0-'BillingMonthName': 1 -'November''
                    var BillingName = TempBillingName[1]; // 'November' MonthName
                    var TempBillingYear = InnerSplit[1].split(':');
                    var BillingYear = TempBillingYear[1]; //Month Year
                    var TempVolumn = InnerSplit[2].split(':');
                    var Volumn = TempVolumn[1]; //Volumn

                    var series = new Array(dataPoints.push({ x: BillingName + '-' + BillingYear, y: Volumn })); // Finaly Data Add in dataPionts
                }
            }
        });
    });