the view does not detect color change

[Neider]

Hi, my problem is that when I load my view do not load the colors of the graphic as I need them.

Controller:

public IActionResult GetAUMChart1 () { //Necesary for set the chart colors Utils util = new Utils(_context); //Creating data for chart 1 var products = _context.PortfolioProducts .Include(pp => pp.ProductType) .Include(pp => pp.ValuationDetails) .Include(pp => pp.TransHeader) .GroupBy(pp => pp.ProductType) .Select(pp => new { ProductType = pp.Select(pr => pr.IdProductType).Distinct().FirstOrDefault(), ProductSum = pp.Sum(pr => pr.PortfolioProductAmount), ProductVal = pp.Sum(pr => pr.ValuationDetails.Sum(p => p.ValuationAmount)) - pp.Sum(pr => pr.TransHeader.Where(t => t.IdPaymentType == 2).Sum(t => t.TransactAmount)), ProductName = pp.Select(pr => pr.ProductType.Description).Distinct().FirstOrDefault(), ProductCode = pp.Select(pr => pr.ProductType.ProductCode).Distinct().FirstOrDefault() }).OrderBy(p => p.ProductVal + p.ProductSum) .ToList(); var productsName = products.Select(p => p.ProductType).ToList(); var palette = util.SetChartColorPalette(productsName); var paletteValuation = new List<string>(); ViewBag.palette = Json(Json(palette)); foreach (var color in palette) { paletteValuation.Add(util.GetRelatedColor(color)); } ViewBag.paletteValuation = Json(Json(paletteValuation)); return Json(products, new JsonSerializerSettings() { ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver() }); }

chart:

 <ej-chart id="chartContainer" is-responsive="true" tool-tip-initialize="tooltipC1" enable3d="false" create="onCreateChart" 

                          locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">

                    <e-legend visible="false"></e-legend>

                    <e-primary-x-axis><e-major-grid-lines visible="false"></e-major-grid-lines></e-primary-x-axis>

                    <e-primary-y-axis label-rotation="45" range-padding="Round" label-format="c0"><e-range interval="400000000"></e-range></e-primary-y-axis>

                    <e-common-series-options type="StackingBar" explode="true" explode-offset="6"

                                             label-position="Outside" enable-smart-labels="true" visible-on-legend="Visible">

                        <e-marker>

                            <e-data-label visible="false"></e-data-label>

                        </e-marker>

                        <e-chart-tooltip visible="true"></e-chart-tooltip>

                    </e-common-series-options>

                    <e-chart-series>

                        <e-series name="Amount" ></e-series>

                        <e-series name="Valuation" ></e-series>

                    </e-chart-series>

                </ej-chart>

Ajax:

$.ajax({ url: "@Url.Action("GetAUMChart1", "Home")", dataType: "json", type: "POST", success: function (products) { //console.log(products); //console.log(args); //$("#chartContainer").ejChart("instance").model.dataSource = products; //$("#chartContainer").ejChart("instance").model.series[0].xName = "ProductCode"; //$("#chartContainer").ejChart("instance").model.series[0].yName = "ProductSum"; //$("#chartContainer").ejChart("instance").model.series[1].xName = "ProductCode"; //$("#chartContainer").ejChart("instance").model.series[1].yName = "ProductVal"; //console.log($("#chartContainer").ejChart("instance")); $("#chartContainer").ejChart("option", { series: [{ dataSource: products, xName: "ProductCode", yName: "ProductSum" },{ dataSource: products, xName: "ProductCode", yName: "ProductVal" }] }); $("#chartContainer").ejChart("instance").redraw(); } }).then(function () { var json2 = @Html.Raw(Json.Serialize(ViewBag.palette)); var jsonValuation = @Html.Raw(Json.Serialize(ViewBag.paletteValuation)); for (i = 0; i < json2.value.value.length; i++) { //args.model.hAxes[0].visibleLabels[i].value = args.model.hAxes[0].visibleLabels[i].value / 1000000; args.model.series[0].points[i].fill = json2.value.value[i]; args.model.series[1].points[i].fill = jsonValuation.value.value[i]; } });

[Neider]

is for core EJ 1 sorry.

[Dharanidharan Dharmasivam]

Hi Neider, 

 

Greetings from Syncfusion. 

 

We have analyzed your query with the provided code snippet. From the provided code snippet we found that you have bind data source to chart in the ajax success event and in the then event you have iterated to bind the fill color to individual points. This will affect the performance and is not the suggested approach, instead you can use the pointColorMapping property which is used to map the fill color to points in the series from the data source. 

 

Please find the below code snippet to achieve this requirement. 

 

[ChartController.cs]   

 // data source with color attribute 

  List<StepLineChartData> data = new List<StepLineChartData>(); 

  data.Add(new StepLineChartData("Product1", 378, "#4286f4")); 

  //...  

 

public StepLineChartData(string xval, double yvalue1, string color) 

            { 

                this.XValue = xval; 

                this.YValue1 = yvalue1; 

                this.Color = color; 

            } 

 

[ChartFeatures.cshtml] 

 

//mapping  to pointColorMapping property in series 

<e-series name="Shopper" x-name="XValue" y-name="YValue1" point-color-mapping-name="Color"> 

</e-series> 

 

Screenshot: 

 

 

Sample for your reference, can be find from below link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-775589953 

 

For more information on point color mapping, find the user guide. 

 

Thanks, 

Dharani. 

[Neider]

It works!

Thanks :)

[Dharanidharan Dharmasivam]

Hi Neider, 

Most welcome. Kindly get in touch with us, if you would require further assistance. 

Thanks, 

Dharani.