Forums Ignite UI for jQuery
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
Fat Karli
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: www.igniteui.com/.../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="">cdn-na.infragistics.com/.../infragistics.theme.css" rel="stylesheet" />
    <link href="">cdn-na.infragistics.com/.../infragistics.css" rel="stylesheet" />
    <!--CSS file specific for chart styling -->
    <link href="">cdn-na.infragistics.com/.../infragistics.ui.chart.css" rel="stylesheet" />

    <script src="">modernizr.com/.../script>
    <script src="">code.jquery.com/.../script>
    <script src="">code.jquery.com/.../script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="">cdn-na.infragistics.com/.../script>
    <script src="">cdn-na.infragistics.com/.../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
  • 16310
    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