How to Implement Area Chart in asp.net mvc

By Junaid A   Posted on February-10-2018 

How to Implement Area Chart in asp.net mvc


1 ) DTO/Model for Area Chart

 public class AreaChartData
    {
        public string Title { get; set; } 
        public List<string> Catagories { get; set; }

        public List<SeriesObject> Series { get; set; }

 

     

        public class SeriesObject
        {
            public string Name { get; set; }
            public List<double> Data { get; set; }
            public string Color { get; set; }
        }
    }

2)  Action for Area Chart

Note!
for real time updates we are re-loading chart after some specific time

  public ActionResult AreaChart(string loggedInUserCurrentDateTime, bool reload, string otherDateTime)
        {
            int seriesDateCount = 0;
            int intervalCounter = 0;

            var initialData = new AreaChartData();

            if (Session[SessionItemKeys.AreaChartData]!=null)
            {

                initialData = Session[SessionItemKeys.AreaChartData] as AreaChartData;
                if (reload)                
                     return View(initialData);
                
                TalkingSIP.DTO.Charts.AreaChartData newData = _accountGroupRepoisotry.GetStatsInuseCallerByAccountGroup();
                int sindex = newData.Series.Count();

          
               int i = 0;
               do
               {
                   var item = newData.Series[i];
                   int dataInex = initialData.Series[i].Data.Count();
                   double dt = item.Data.FirstOrDefault();
                   initialData.Series[i].Data.Insert(dataInex, dt);
                   i++;
               } while (i < sindex);

               if ( Session[SessionItemKeys.IntervalCounter]!=null)
               {
                   intervalCounter = Convert.ToInt32(Session[SessionItemKeys.IntervalCounter].ToString());
                   intervalCounter++;
                   Session[SessionItemKeys.IntervalCounter] = intervalCounter;

               }
              
               
            }
            else
            {               
                initialData = _accountGroupRepoisotry.GetStatsInuseCallerByAccountGroup();
                if (initialData.Series==null || initialData.Series.Count()==0)                
                     return View(initialData);
                
                Session[SessionItemKeys.IntervalCounter] = 1;
            }

            var checkSeriesCount = initialData.Series;
           
                foreach (var item in checkSeriesCount)
                {
                    seriesDateCount = item.Data.Count();
                }
         
           

           


            initialData.Title = "INUSE Call";

            if (initialData.Catagories==null)
            {
                initialData.Catagories = new List<string>();
                DateTime currentDateTime = DateTime.Now;             

                try
                {
                    currentDateTime = Convert.ToDateTime(loggedInUserCurrentDateTime);
                }
                catch (Exception )
                {

                    currentDateTime = Convert.ToDateTime(otherDateTime);

                }

                Session[SessionItemKeys.InitialDateTime] = currentDateTime;
                
            }


            DateTime currentTime = (DateTime)Session[SessionItemKeys.InitialDateTime];

       
       

      currentTime=currentTime.AddSeconds(15);// Interval of 15 Second

     
      initialData.Catagories.Add(String.Format("{0:T}", currentTime));


            Session[SessionItemKeys.InitialDateTime] = currentTime;

 

            if (intervalCounter >= 16)// show 15 categories in x-axis
            {
                initialData.Catagories.RemoveAt(0);

                var seris = initialData.Series;
                foreach (var item in seris)
                {
                    item.Data.RemoveAt(0);
                }

            }

          

            Session[SessionItemKeys.AreaChartData] = initialData;
            return View(initialData);

            //  data.Series = new List<AreaChartData.SeriesObject>();
            //  var series1 = new AreaChartData.SeriesObject();
            //  series1.Name = "Group 1";
            //  series1.Color = "#00FF00";

            //  series1.Data = new List<double>();

            //  series1.Data.Add(10);

            //  series1.Data.Add(15);

            //  series1.Data.Add(20);

            //  var series2 = new AreaChartData.SeriesObject();
            //  series2.Name = "Group 2";
            //  series2.Color = "#0000FF";
            //  series2.Data = new List<double>();
            //  series2.Data.Add(12);
            //  series2.Data.Add(17);
            //  series2.Data.Add(22);

            //  data.Series.Add(series1);
            //data.Series.Add(series2);


        }


3) Html View for Area chart

@model TalkingSIP.DTO.Charts.AreaChartData

@{
    Layout = null;
    string boldFont = "bold 16px Arial,Helvetica";

    int labelmarginRight = 1; // 10
    int labelmarginLeft = 1; //10

    int legendTop = 0;//0
    int legendBottom = 0;//0

    int legendLeft = 10;//10
    int legendRight = 40;//40


    int labelBottomPadding = 20; //45
    int lagendTopPadding = 20;//-20

    int roationAngel = 0;//0
    int distance = 15;//15

    int seriesPadding = 0;//25
  
}

 

<div id="divAreaChart" onclick="AreaChartOnClick()" style="width:auto;">

    @*<button class='export-pdf k-button'>Save as PDF</button>*@

    @if (Model.Series!=null && Model.Series.Any())
    {
        
   
string pdfFileName ="CallMonitor"+ DateTime.UtcNow.ToFileTimeUtc();

    @(Html.Kendo().Chart()
            .Pdf(pdf => pdf
                                    .FileName(pdfFileName)
                                            .ProxyURL(Url.Action("Charts_Pdf_Export_Save", "StatesCharts"))
                )
        .Name("Areachart")
                                        .Theme("blueOpal")
                .Title("Active Calls")
                         .Title(title => title.Font(boldFont))
                                 .Title(title => title.Padding(0, 0, labelBottomPadding, 0))

               .Legend(legend => legend
                .Labels(l => l.Padding(legendTop, legendRight, legendBottom, legendLeft))
                 .Position(ChartLegendPosition.Bottom)
            .Padding(lagendTopPadding, 0, 0, 0)
           
        )
        .ChartArea(chartArea => chartArea
            //.Background("transparent")
                   .Margin(0, 5, 0, 25)// top right bottom left(TRBL)
                   
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Area().Line(line => line.Style(ChartAreaStyle.Smooth))
        ).Transitions(false)
                .Series(series =>
                {
                    foreach (var item in Model.Series)
                    {
                        //jo bhi value yahan "Test" ki jaga dengy vo show ho jygi.. Matlb theme: "blueOpal"
                        // Lets consider a list of objects instead of List of double[]

                        series.Area(item.Data).Name(item.Name).Color(item.Color).Tooltip(t => t.Color("#FFFFFF"));
                   

                    }
                })
            //.Series(s => s.Area(Model.Series.Select())

                                       //.Series(series =>
            // {
            //     series.Area(new double[] { 3.907, 7.943, 7.848 }).Name("India");

                                       // })
        .CategoryAxis(axis => axis
            .Categories(Model.Catagories)
            //.AxisCrossingValue(Model.CatagoryValues)
            .MajorGridLines(lines => lines.Visible(false))  
               
                    //.Labels(l => l.Template("labelTemplate") )
            //.Notes(n=>n.Label.)
             //.Labels(labels => labels.Template(""))).
            //.Justify()
        
        )
       
        .ValueAxis(axis => axis
            .Numeric()
                     .Labels(labels => labels.Format("{0}"))

                             .MajorUnit(100)
                               //.Labels(l => l.Template("aaa"))
                                    //.Labels(l => l.Template("#=wrapSVGText(dataItem.Name, 0, 100)#"))

                              //.Labels(labels => labels.Format("{0}%"))
            //.Labels(labels => labels.Format("{0}%"))
                            .AxisCrossingValue(-10)
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
            .Template("#= series.name #: #= value #")
        )
                .Events(e => e

                                         .LegendItemClick("LegendItemClick")
                    )
    )

    }
    else
    {
        <div class="nodataforchart"><div>No data available</div></div>
    }
    @*<div class="nodataforchart"><div>No data available</div></div>*@

</div>


1 ) DTO/Model for Area Chart

 public class AreaChartData
    {
        public string Title { get; set; } 
        public List<string> Catagories { get; set; }

        public List<SeriesObject> Series { get; set; }

 

     

        public class SeriesObject
        {
            public string Name { get; set; }
            public List<double> Data { get; set; }
            public string Color { get; set; }
        }
    }

2)  Action for Area Chart

Note!
for real time updates we are re-loading chart after some specific time

  public ActionResult AreaChart(string loggedInUserCurrentDateTime, bool reload, string otherDateTime)
        {
            int seriesDateCount = 0;
            int intervalCounter = 0;

            var initialData = new AreaChartData();

            if (Session[SessionItemKeys.AreaChartData]!=null)
            {

                initialData = Session[SessionItemKeys.AreaChartData] as AreaChartData;
                if (reload)                
                     return View(initialData);
                
                TalkingSIP.DTO.Charts.AreaChartData newData = _accountGroupRepoisotry.GetStatsInuseCallerByAccountGroup();
                int sindex = newData.Series.Count();

          
               int i = 0;
               do
               {
                   var item = newData.Series[i];
                   int dataInex = initialData.Series[i].Data.Count();
                   double dt = item.Data.FirstOrDefault();
                   initialData.Series[i].Data.Insert(dataInex, dt);
                   i++;
               } while (i < sindex);

               if ( Session[SessionItemKeys.IntervalCounter]!=null)
               {
                   intervalCounter = Convert.ToInt32(Session[SessionItemKeys.IntervalCounter].ToString());
                   intervalCounter++;
                   Session[SessionItemKeys.IntervalCounter] = intervalCounter;

               }
              
               
            }
            else
            {               
                initialData = _accountGroupRepoisotry.GetStatsInuseCallerByAccountGroup();
                if (initialData.Series==null || initialData.Series.Count()==0)                
                     return View(initialData);
                
                Session[SessionItemKeys.IntervalCounter] = 1;
            }

            var checkSeriesCount = initialData.Series;
           
                foreach (var item in checkSeriesCount)
                {
                    seriesDateCount = item.Data.Count();
                }
         
           

           


            initialData.Title = "INUSE Call";

            if (initialData.Catagories==null)
            {
                initialData.Catagories = new List<string>();
                DateTime currentDateTime = DateTime.Now;             

                try
                {
                    currentDateTime = Convert.ToDateTime(loggedInUserCurrentDateTime);
                }
                catch (Exception )
                {

                    currentDateTime = Convert.ToDateTime(otherDateTime);

                }

                Session[SessionItemKeys.InitialDateTime] = currentDateTime;
                
            }


            DateTime currentTime = (DateTime)Session[SessionItemKeys.InitialDateTime];

       
       

      currentTime=currentTime.AddSeconds(15);// Interval of 15 Second

     
      initialData.Catagories.Add(String.Format("{0:T}", currentTime));


            Session[SessionItemKeys.InitialDateTime] = currentTime;

 

            if (intervalCounter >= 16)// show 15 categories in x-axis
            {
                initialData.Catagories.RemoveAt(0);

                var seris = initialData.Series;
                foreach (var item in seris)
                {
                    item.Data.RemoveAt(0);
                }

            }

          

            Session[SessionItemKeys.AreaChartData] = initialData;
            return View(initialData);

            //  data.Series = new List<AreaChartData.SeriesObject>();
            //  var series1 = new AreaChartData.SeriesObject();
            //  series1.Name = "Group 1";
            //  series1.Color = "#00FF00";

            //  series1.Data = new List<double>();

            //  series1.Data.Add(10);

            //  series1.Data.Add(15);

            //  series1.Data.Add(20);

            //  var series2 = new AreaChartData.SeriesObject();
            //  series2.Name = "Group 2";
            //  series2.Color = "#0000FF";
            //  series2.Data = new List<double>();
            //  series2.Data.Add(12);
            //  series2.Data.Add(17);
            //  series2.Data.Add(22);

            //  data.Series.Add(series1);
            //data.Series.Add(series2);


        }


3) Html View for Area chart

@model TalkingSIP.DTO.Charts.AreaChartData

@{
    Layout = null;
    string boldFont = "bold 16px Arial,Helvetica";

    int labelmarginRight = 1; // 10
    int labelmarginLeft = 1; //10

    int legendTop = 0;//0
    int legendBottom = 0;//0

    int legendLeft = 10;//10
    int legendRight = 40;//40


    int labelBottomPadding = 20; //45
    int lagendTopPadding = 20;//-20

    int roationAngel = 0;//0
    int distance = 15;//15

    int seriesPadding = 0;//25
  
}

 

<div id="divAreaChart" onclick="AreaChartOnClick()" style="width:auto;">

    @*<button class='export-pdf k-button'>Save as PDF</button>*@

    @if (Model.Series!=null && Model.Series.Any())
    {
        
   
string pdfFileName ="CallMonitor"+ DateTime.UtcNow.ToFileTimeUtc();

    @(Html.Kendo().Chart()
            .Pdf(pdf => pdf
                                    .FileName(pdfFileName)
                                            .ProxyURL(Url.Action("Charts_Pdf_Export_Save", "StatesCharts"))
                )
        .Name("Areachart")
                                        .Theme("blueOpal")
                .Title("Active Calls")
                         .Title(title => title.Font(boldFont))
                                 .Title(title => title.Padding(0, 0, labelBottomPadding, 0))

               .Legend(legend => legend
                .Labels(l => l.Padding(legendTop, legendRight, legendBottom, legendLeft))
                 .Position(ChartLegendPosition.Bottom)
            .Padding(lagendTopPadding, 0, 0, 0)
           
        )
        .ChartArea(chartArea => chartArea
            //.Background("transparent")
                   .Margin(0, 5, 0, 25)// top right bottom left(TRBL)
                   
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Area().Line(line => line.Style(ChartAreaStyle.Smooth))
        ).Transitions(false)
                .Series(series =>
                {
                    foreach (var item in Model.Series)
                    {
                        //jo bhi value yahan "Test" ki jaga dengy vo show ho jygi.. Matlb theme: "blueOpal"
                        // Lets consider a list of objects instead of List of double[]

                        series.Area(item.Data).Name(item.Name).Color(item.Color).Tooltip(t => t.Color("#FFFFFF"));
                   

                    }
                })
            //.Series(s => s.Area(Model.Series.Select())

                                       //.Series(series =>
            // {
            //     series.Area(new double[] { 3.907, 7.943, 7.848 }).Name("India");

                                       // })
        .CategoryAxis(axis => axis
            .Categories(Model.Catagories)
            //.AxisCrossingValue(Model.CatagoryValues)
            .MajorGridLines(lines => lines.Visible(false))  
               
                    //.Labels(l => l.Template("labelTemplate") )
            //.Notes(n=>n.Label.)
             //.Labels(labels => labels.Template(""))).
            //.Justify()
        
        )
       
        .ValueAxis(axis => axis
            .Numeric()
                     .Labels(labels => labels.Format("{0}"))

                             .MajorUnit(100)
                               //.Labels(l => l.Template("aaa"))
                                    //.Labels(l => l.Template("#=wrapSVGText(dataItem.Name, 0, 100)#"))

                              //.Labels(labels => labels.Format("{0}%"))
            //.Labels(labels => labels.Format("{0}%"))
                            .AxisCrossingValue(-10)
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
            .Template("#= series.name #: #= value #")
        )
                .Events(e => e

                                         .LegendItemClick("LegendItemClick")
                    )
    )

    }
    else
    {
        <div class="nodataforchart"><div>No data available</div></div>
    }
    @*<div class="nodataforchart"><div>No data available</div></div>*@

</div>

By Junaid A    10-Feb-2018 



You may also read following recent articles