CODEWITHSUNDEEP
asp.net-mvchtmlrazorchartskendo-ui
Kabelo Aphane
Kabelo Aphane

Reputation: 60

Kendo UI Chart Title dynamically using MVC

How do I dynamically change the title of the x and y axis dynamically with data from MVC controller?

Index.cshtml look like this,

<div class="chart-wrapper">
@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Price-Performance Ratio")
    .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Scatter(model => model.Price, model => model.Performance)
            .Name("Price Performance");
    })
    .XAxis(x => x
        .Numeric()
        .Title(title => title.Text("Price"))
        .Labels(labels => labels.Format("R{0}")).Max(30)
    )
    .YAxis(y => y
        .Numeric()
        .Title(title => title.Text("Performance Ratio"))
        .Labels(labels => labels.Format("{0}%")).Max(10)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= '<b>$' + value.x + ' / ' + dataItem.Family + ' ' + dataItem.Model + ': ' + value.y + '%</b>' #")
    )
    .ChartArea( size => size.Height(520))
)

The index action in the homecontroller looks like this

var model = new List<PricePerformance>(){
       new PricePerformance(){
            Price = 14.4,
            Performance = 5.4
      },
      new PricePerformance(){
            Price = 21.4,
            Performance = 2
      },
      new PricePerformance(){
            Price = 8.4,
            Performance = 1.4
      }
};

return View(model);

The Model looks like this

public class PricePerformance
{
     public double Price { get; set; }
     public double Performance { get; set; }
     public string LabelX { 
        get { return "Price"; } 
    }
    public string LabelY {
        get { return "Performance";} 
    }
}

Upvotes: 2

Views: 1569

Answers (1)

Kishore Sahasranaman
Kishore Sahasranaman

Reputation: 4230

Create a ViewModel PricePerformanceViewModel and move LabelX and LabelY to it. create a list for PricePerformance.

    public class PricePerformanceViewModel
    {
        public List<PricePerformance> PricePerformances { get; set; }
        public string LabelX
        {
            get { return "Price"; }
        }
        public string LabelY
        {
            get { return "Performance"; }
        }
    }

    public class PricePerformance
    {
        public double Price { get; set; }
        public double Performance { get; set; }
    }

change you view as below.

    @model PricePerformanceViewModel                      //Change Model
    <div class="chart-wrapper">
    @(Html.Kendo().Chart(Model.PricePerformances)         //Change Model
        .Name("chart")
        .Title("Price-Performance Ratio")
        .Legend(legend => legend
            .Visible(true)
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series =>
        {
            series.Scatter(model => model.Price, model => model.Performance)
                .Name("Price Performance");
        })
        .XAxis(x => x
            .Numeric()
            .Title(title => title.Text(Model.LabelX))        //Change Title
            .Labels(labels => labels.Format("R{0}")).Max(30)
        )
        .YAxis(y => y
            .Numeric()
            .Title(title => title.Text(Model.LabelY))        //Change Title
            .Labels(labels => labels.Format("{0}%")).Max(10)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= '<b>$' + value.x + ' / ' + dataItem.Family + ' ' + dataItem.Model + ': ' + value.y + '%</b>' #")
        )
        .ChartArea( size => size.Height(520))
    )

Upvotes: 2

Related Questions