Hello,
2 Part Question:
Question 1:In an ASP.NET MVC using Razor environment, I would like to create a dynamic DataChart where based on the dataset passed to the chart the chart would dynamically create the appropriate series or hide preformatted series (either way). I am able to create a chart and populate it with 5 series within one chart, but based on the users selection, the chart many only need to render 1-6 or so series. Currently my chart (see below) is configured for 5 series but the problem is that if there is no data for one or more of the series then a line with no data pointed to it is displayed including he legend.. Looking for the best solution for this scenario.
Question 2:Using the code sample below, would like to dynamically set the colors of the various brushes and such on the grid as it is dynamically created.Thank you. Below is the entire code (including commented out code) that i would like to enhance as described above:
@using Infragistics.Web.Mvc@model eMerchant.Reports.Models.OrderWeeklySale<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div style="color: #44ACD6"> <span>Event: </span><span style="font-weight: bold">@Model.EventName</span><br /> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 justify-content-center"> @(Html.Infragistics().DataChart(Model.OrderWeeklySales.AsQueryable()) .ID("chart") .AlignsGridLinesToPixels(true) .VerticalZoomable(true) .HorizontalZoomable(true) .OverviewPlusDetailPaneVisibility(Visibility.Collapsed) .Legend(legend => legend.ID("dataLegend")) .Height("400px") .Width("100%") //.Width("900px") .Title("Weekley Sales by Product") .Subtitle("") .Axes(axis => { axis .CategoryX("xAxis") .Title("Week") .Label(item => item.Week) //.Label(item => item.FirstDateOfWeek) .Title("Week") //.Label(item => item.FirstDateOfWeek) .LabelLocation(AxisLabelsLocation.OutsideBottom) .Interval(1).LabelLocation(AxisLabelsLocation.OutsideBottom) .StrokeThickness(2) .MajorStroke("#f4f4f4") .MinorStrokeThickness(1); axis .NumericY("yAxis") //.MinimumValue(0) //.MaximumValue(100) .Title("Quantity Sold"); }) .Series(series => { //series.Line("series1") //series.Column("series1") //series.Spline("series1") //series.Point("series1") series.Line("series1") .ValueMemberPath(item => item.Quantity1) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title("Quantity1") .XAxis("xAxis") .MarkerType(MarkerType.Circle) .MarkerBrush("#f0e723") .MarkerOutline("#ffc200") .YAxis("yAxis") .ShowTooltip(true) .Brush("#ffc200") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) .TrendLineBrush("#000000") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate1"); //series.Line("series2") //series.Column("series2") //series.Spline("series2") //series.Point("series2") series.Line("series2") .ValueMemberPath(item => item.Quantity2) .Legend(legend => { legend.LegendType(LegendType.Item); }) .Title("Quantity2") .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) .Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate2"); //series.Line("series3") //series.Column("series3") //series.Spline("series3") //series.Point("series3") series.Line("series3") .ValueMemberPath(item => item.Quantity3) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title("Quantity3") .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate3"); //series.Line("series4") //series.Column("series4") //series.Spline("series4") //series.Point("series4") series.Line("series4") .ValueMemberPath(item => item.Quantity4) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title("Quantity4") .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate4"); //series.Line("series5") //series.Column("series5") //series.Spline("series5") //series.Point("series5") series.Line("series5") .ValueMemberPath(item => item.Quantity5) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title("Quantity5") .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate5"); }) .WindowResponse(WindowResponse.Immediate) .DataBind() .Render() ) </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="dataLegend"></div> <div id="columnChart"></div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <input id="exportToPdfBtn" onclick="ExportImage()" value="Export as image" type="button" class="btn button01" /> </div> </div> </div></div><!-- Format the Chart --><script type="text/javascript"> $(function () { $("#chart").igDataChart({ chartType: "column", dataSource: data, legend: { element: "theLegend" } }); });</script><!-- Custom Tooltip Template --><script id="tooltipTemplate1" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName1} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity1}</span> </div></script><script id="tooltipTemplate2" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName2} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity2}</span> </div></script><script id="tooltipTemplate3" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName3} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity3}</span> </div></script><script id="tooltipTemplate4" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName4} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity4}</span> </div></script><script id="tooltipTemplate5" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName5} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity5}</span> </div></script><!-- Export the Chart to a File --><script type="text/javascript"> function ExportImage() { var img = $('#chart').igDataChart("exportImage", $('#chart').width(), $('#chart').height()); // atob to base64_decode the data-URI var image_data = atob(img.src.split(',')[1]); // Use typed arrays to convert the binary data to a Blob var arraybuffer = new ArrayBuffer(image_data.length); var view = new Uint8Array(arraybuffer); for (var i = 0; i < image_data.length; i++) { view[i] = image_data.charCodeAt(i) & 0xff; } var blob = new Blob([arraybuffer], { type: 'image/jpeg' }); saveAs(blob, "img.jpg"); };</script>