Show second series in Ignite UI ASP.NET Helper DataChart Example


i am currently trying to implement the ASP.NET MVC Helper DataChart example (see this link: http://www.igniteui.com/data-chart/aspnet-mvc-helper) and its working really well execpt i couldn't figure out so far how to add a second series of data.

1. The Controller code is the same as in the example.

2. My view looks like this:

@using Infragistics.Web.Mvc

@model FatKarli.WebUI.Controllers.ChartController.StockMarketDataCollection

<!DOCTYPE html>


    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css" rel="stylesheet" />
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.dv.js"></script>

    <style type="text/css">
        #chart {
            position: relative;
            float: left;
            margin-right: 2%;
            margin-bottom: 2%;
            min-width: 210px;

        #legend {
            position: relative;
            float: left;

    <div style="height: 400px">
              .Legend(legend => legend.ID("legend"))
              .Axes(axes =>
                      .Label(item => item.FormattedDate);
                      .Title("X [mm/s]");

                      .Series(series => series
                          .ValueMemberPath(item => item.Open)
                      .Series(series => series
                          .ValueMemberPath(item => item.UpperLimit)
                          .Title("Upper Limit")

3. My Model is the same as in the example except there is another field "UpperLimit" which is always 100.

When i run the application i can only see the second series (a constant line at y = 100) is shown. When i uncomment the second series, the random value series from the example is visible. But i would like them to be shown at the same time.

Can anyone tell me how to handle this?


  • 15930
    Verified Answer
    Offline posted


    What your syntax basically does is define one series, and then define a new series object that overwrites the first one, this is why in the end you have only one series.

    This is how you define multiple series in Razor syntax:

                          .Series(series =>
                                  .ValueMemberPath(item => item.Open)

                                  .ValueMemberPath(item => item.Open)
                                  .Title("Upper Limit")

    Please let me know if you have further questions on the matter, I will be glad to help.

Reply Children
No Data