Friday, 24 May 2013

How to add multiple lines series dynamically in kendo UI chart

JavaScript
  

HTML
............. .............
Annully Monthly Weekly Daily
Below code snippet is only for reference to create Dummy data in MVC.

Controller
  
public class HomeController : Controller
{
    [AllowAnonymous]
    [HttpGet]
    public JsonResult GetDummydata(int Duration)
    {
        List>TestModels> models = GetDummyData(Duration);

        return Json(models, JsonRequestBehavior.AllowGet);
    }

    public List<TestModels> GetDummyData(int Duration)
    {
        List<TestModels> models = new List<TestModels>();

        switch (Duration)
        {
            case (int)DurationType.Annully:

                TestModels testModel = new TestModels();
                testModel.Field1 = "Annully";
                testModel.Field2 = 20;
                testModel.Field3 = 50;
                testModel.Field4 = 70;
                models.Add(testModel);

                break;
            case (int)DurationType.Monthly:

                TestModels testModel2 = new TestModels();
                testModel2.Field1 = "Monthly";
                testModel2.Field2 = 50;
                testModel2.Field3 = 50;
                testModel2.Field4 = 50;
                models.Add(testModel2);

                break;
            case (int)DurationType.Weekly:
                TestModels testModel3 = new TestModels();
                testModel3.Field1 = "Weekly";
                testModel3.Field2 = 70;
                testModel3.Field3 = 10;
                testModel3.Field4 = 90;
                models.Add(testModel3);
                break;
            case (int)DurationType.Daily:
                TestModels testModel4 = new TestModels();
                testModel4.Field1 = "Daily";
                testModel4.Field2 = 11;
                testModel4.Field3 = 111;
                testModel4.Field4 = 1111;
                models.Add(testModel4);
                break;

        }

        return models;
    }
}
Model
  
 [Serializable]
    public class TestModels
    {   
        public string Field1 { get; set; }
        public int Field2 { get; set; }
        public int Field3 { get; set; }
        public int Field4 { get; set; }
    }


DOWNLOAD DEMO

6 comments:

  1. nice job Jayesh,

    I have a table in which there are fields including ParamName, ParamValue, ParamType and LogDate. I can display them in a ScatterLine type of the Kendo Chart without difficulty if I have only one ParamName per ParamType. because I can group them by ParamType. but if I have more than one parameters which have the same type I couldn't group them. here is my code:

    @(Html.Kendo().Chart()
    .Name("chart")
    .Title("Main Core Trends")
    .DataSource(dataSource => dataSource.Read(read => read.Action("GetMainTrend", Params"))
    .Group(group => group.Add(model => model.ParamType))
    .Sort(sort => sort.Add(model => model.LogDate).Ascending())
    )
    .Series(series => series.ScatterLine(model => model.LogDate, model => model.ParamValue)
    .GroupNameTemplate("#= group.value # ").Markers(marker => marker.Visible(false)).Width(2))
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    )
    .YAxis(y => y.Numeric()
    .Labels(labels => labels.Format("0:N0"))
    )
    .XAxis(axis => axis.Date()
    .Labels(labels => labels.Format("M-d HH:m").Rotation(90).Step(1))
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    )
    )

    ReplyDelete
  2. possible to upload the source code solution file? Thanks.

    ReplyDelete
  3. Demo link : http://jmp.sh/v/2WYVzKgVTnALqfuwrW4c

    ReplyDelete
  4. How to display the field and name for the chart legend?

    ReplyDelete
  5. Hi Jayesh,Woow Grate work.
    And thanks for the demo link too.Do u have demo(sample) project for stacked bar chart
    Thanks
    Manoj

    ReplyDelete
  6. Hi

    I want to add 2 header lines in kendo json grid.

    ReplyDelete