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
Keras Serati
20
DataChart valueMemberPath is always null
posted

I want to include an ignite DataChart in a ASP.NET MVC page as is shown in this sample: http://igniteui.com/data-chart/aspnet-mvc-helper. I want to use a line chart instead of financial though.

However the resulting page always shows an empty chart. The source code shows that my data is included but the binding to the valueMemberPath property doesn`t seem to work. The generated script looks like this:

<script type="text/javascript">

    $(function () {$('#chart').igDataChart({

dataSource: [{"Name":"Value1","Value":1},{"Name":"Value2","Value":3},{"Name":"Value3","Value":8},{"Name":"Value4","Value":4},{"Name":"Value5","Value":6}],

width: '800px',

height: '400px',

verticalZoomable: true,

horizontalZoomable: true,

title: 'Energy Production Per Country',

legend: { element: 'legend' },

axes: [ { type: 'categoryX', name: 'xAxis', label: null }, { type: 'numericY', name: 'yAxis', title: 'Quadrillion Btu' } ],

series: [ { type: 'line', name: 'series1', title: 'Price Series', xAxis: 'xAxis', yAxis: 'yAxis', valueMemberPath: null, showTooltip: true } ] });});

</script>

Note that the axes label and series valueMemberPath are null, they should contain 'Name' and 'Value' respectively.

This is my MVC page:

@{
    Layout = null;
}
@using Infragistics.Web.Mvc
@model ASPNetMvc.Models.SimpleModelList
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>       <!-- JavaScript Library Dependencies -->
<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>
<script src="">cdn-na.infragistics.com/.../script>
</head>
    <body>
        <div style="height: 400px">
            @(Html.Infragistics().DataChart(Model.AsQueryable())
                  .ID("chart")
                  .Width("800px")
                  .Height("400px")
                  .VerticalZoomable(true)
                  .HorizontalZoomable(true)
                  .Title("Energy Production Per Country")
                  .Legend(legend => legend.ID("legend"))
                  .Axes(axes =>
                  {
                      axes.CategoryX("xAxis")
                          .Label(item => item.Name);
                      axes.NumericY("yAxis")
                          .Title("Quadrillion Btu");
                  })
                  .Series(series => series
                      .Line("series1")
                      .Title("Price Series")
                      .XAxis("xAxis").YAxis("yAxis")
                      .ValueMemberPath(item => item.Value)
                      .ShowTooltip(true))
                  .DataBind()
                  .Render()
                  )
        </div>
    
    </body>
</html>

This is the Model used by the page:

    public class SimpleModelList : List<SimpleModel>
    {
        
    }

    public class SimpleModel
    {
        public string Name;
        public int Value;
    }

And just in case the action that generates the model data and returns the view:

public ActionResult Infragistic2()
        {
            var model = new SimpleModelList
            {
                new SimpleModel() {Name = "Value1", Value = 1},
                new SimpleModel() {Name = "Value2", Value = 3},
                new SimpleModel() {Name = "Value3", Value = 8},
                new SimpleModel() {Name = "Value4", Value = 4},
                new SimpleModel() {Name = "Value5", Value = 6}
            };
            
            return View(model);
        }


I hope someone can tell me why the binding doesn`t work or what else the problem could be.

Parents
  • 15320
    Suggested Answer
    Offline posted

    Hello Keras,

    Thank you for posting in our community.

    I've used your code to re-create this scenario, however I was unable to reproduce ValueMemberPath to return null.

    Please refer to the attached sample and compare if there are any differences with your code. In this case feel free to modify my sample in order to reproduce the issue and send it back to me.

    Looking forward to your response.

    Sincerely,

    Tsanna

    igChartValueMemberPathReturnsNull.zip
Reply Children
No Data