Forums Ignite UI for ASP.NET MVC
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Richard Tamouzian
135
igDataChart
posted

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 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("")
                            .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>

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

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