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

Hi,

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>

<html>
<head>
    <title></title>

    <!-- 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>
</head>
<body>

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

        #legend {
            position: relative;
            float: left;
        }
    </style>

    <div style="height: 400px">
        @(Html.Infragistics().DataChart(Model.AsQueryable())
              .ID("chart")
              .Width("800px")
              .Height("400px")
              .VerticalZoomable(true)
              .HorizontalZoomable(true)
              .Title("Zeitdarstellung")
              .Legend(legend => legend.ID("legend"))
              .OverviewPlusDetailPaneVisibility(Visibility.Visible)
              .Axes(axes =>
              {
                  axes.CategoryX("xAxis")
                      .Label(item => item.FormattedDate);
                  axes.NumericY("yAxis")
                      .Title("X [mm/s]");
              })

                      .Series(series => series
                          .Line("series1")
                          .ValueMemberPath(item => item.Open)
                          .Title("X")
                          .XAxis("xAxis").YAxis("yAxis")
                          .ShowTooltip(true)
                          )
                      .Series(series => series
                          .Line("series2")
                          .ValueMemberPath(item => item.UpperLimit)
                          .Title("Upper Limit")
                          .XAxis("xAxis").YAxis("yAxis")
                          .ShowTooltip(true)
                          )
                              
              .DataBind()
              .Render())
    </div>
</body>
</html>

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?

Thanks

Parents
  • 15930
    Verified Answer
    Offline posted

    Hi,

    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 =>
                              {
                                  series.Line("series1")
                                  .ValueMemberPath(item => item.Open)
                                  .Title("X")
                                  .XAxis("xAxis").YAxis("yAxis")
                                  .ShowTooltip(true);

                                  series.Line("series2")
                                  .ValueMemberPath(item => item.Open)
                                  .Title("Upper Limit")
                                  .XAxis("xAxis").YAxis("yAxis")
                                  .ShowTooltip(false);
                                })

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

Reply Children
No Data