How to Implement Area Chart in asp.net mvc
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>
Share This with your friend by choosing any social account
You may also read following recent articles
|
Is Chat GPT Use Of Web Content Fair!
Junaid A 29-Jan-2023 |
|
|
Office politics examples!
Junaid A 28-Jan-2023 |
|
|
ten jokes about the status of ChatGPT!
Junaid A 17-Jan-2023 |
|
|
Image Resizing On Uploadig!
shahid Riaz 02-Jan-2019 |
|
|
Hosting Server Connect Timeout!
Junaid A 13-Apr-2018 |
|
|
What I can do after BS!
12-Apr-2018 |
|
|
Best hosting for windows!
05-Apr-2018 |
|
|
Why cv is rejected!
30-Mar-2018 |
|
|
How to Integrated The Theme in Project!
shaheer 27-Mar-2018 |
|
|
How to perform crud operations in asp.net?!
27-Mar-2018 |
|
|
How to perform crud operations in asp.net?!
27-Mar-2018 |
|
|
What is outer join in database?!
Arsal Ahmed 20-Mar-2018 |
|
|
What is right join in database?!
Arsal Ahmed 20-Mar-2018 |