igDataChart

Richard Tamouzian asked on Dec 1, 2022 5:10 PM

Hello I have some how to questions regarding the igDataChart.

I have an ASP.NET MVC using razor website. I am designing a weekly sales chart by product where I what to compare the sales of 1 to 5 different products with each other. The user will select from a list of products (up to 5) that they want to display on the cart. Because of this i need so dynamic configuration of the chart for the following:

Dynamically create and configure 1 to 5 series based on the data. Currently I have added 5 series to the chart but if the user does not select 5 products to display the chart still displays a flat line and the legend shows where there is not data for.
Dynamically populate the series Title. It seems that I cannot add a dynamic string to the title. The title should be the product name where it also displays in the legend as well.
Configure the legend more robustly. For example adding a title and such to it.
When I export the chart using the example provided on this site, I would like the legend and title of the chart to be included in the export image.

The problem is all the online examples are in jQuery or JavaScript.
I don’t want to use JavaScript or jQuery to do this. I would like to achieve this using Razor coding that I am used to.

Thank you.

Below is the current view source code:

@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 style=”color: #44ACD6″>
<span>Event: </span><span style=”font-weight: bold”>@Model.EventName</span><br />
</div>
</div>
</div>

@(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(“”)
.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(“ProductName2”)
.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 – X3X3”)
.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>

<!– Format the Chart & Legend–>
<script type=”text/javascript”>
$(function () {

$(“#chart”).igDataChart({
chartType: “column”,
dataSource: data,
legend: { element: “theLegend” }
});
});

$(“#dataLegend”).igDataLegend({
target: $(“#chartContainer”).igDataChart(),
headerText: “My Custom Data Legend Header”,
summaryType: “total”,
summaryTitleText: “Grand Total”
});

</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>

<!– 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>

Replies

0

Mauricio Block answered on Mar 11, 2026 4:01 AM

Having trouble with dynamic titles and legend customization, huh? I struggled with that too! What I found helpful was actually creating the title and legend elements separately as HTML, then layering them over the chart container using CSS. Did that work?

I think that approach can be helpful, but I want to find a different way to present Five Nights At Freddy’s.

You must be logged in to reply to this topic.

Discussion created by

Favorites

Replies

Created On

Last Post

Discussion created by

Richard Tamouzian

Favorites

Replies

Created On

Dec 01, 2022

Last Post

2 weeks, 3 days ago

Suggested Discussions

Created by

Richard Tamouzian

Created on

Dec 1, 2022 5:10 PM

Last activity on

Feb 23, 2026 5:15 PM

Replies

Suggested Discussions

IgniteUI igDataChart updating series datasource in javascript dynamically

Tags

Created by

Created on

Last activity on