public ActionResult BindDataFromObjectList() { List<DataClass> data = new List<DataClass> { new DataClass { ExecutionDate = DateTime.Now.AddDays(-10).Date, ExecutionValue = 20.21 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-9).Date, ExecutionValue = 23.13 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-8).Date, ExecutionValue = 27.41 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-7).Date, ExecutionValue = 30.51 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-6).Date, ExecutionValue = 21.16 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-5).Date, ExecutionValue = 22.17 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-4).Date, ExecutionValue = 33.18 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-3).Date, ExecutionValue = 34.91 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-2).Date, ExecutionValue = 40.10 }, new DataClass { ExecutionDate = DateTime.Now.AddDays(-1).Date, ExecutionValue = 50.11 }, new DataClass { ExecutionDate = DateTime.Now.Date, ExecutionValue = 20.1 }, }; object[,] chartData = new object[data.Count, 2]; int i = 0; foreach (DataClass item in data) { chartData.SetValue(item.ExecutionDate, i, 0); chartData.SetValue(item.ExecutionValue, i, 1); i++; } Highcharts chart1 = new Highcharts("chart1") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Chart 1" }) .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) .SetSeries(new Series { Data = new Data(chartData) }); return View(chart1); }
public ActionResult BindDataFromDictionary() { Dictionary<DateTime, int> data = new Dictionary<DateTime, int> { { DateTime.Now.AddDays(-10).Date, 123 }, { DateTime.Now.AddDays(-9).Date, 223 }, { DateTime.Now.AddDays(-8).Date, 103 }, { DateTime.Now.AddDays(-7).Date, 23 }, { DateTime.Now.AddDays(-6).Date, 183 }, { DateTime.Now.AddDays(-5).Date, 143 }, { DateTime.Now.AddDays(-4).Date, 153 }, { DateTime.Now.AddDays(-3).Date, 173 }, { DateTime.Now.AddDays(-2).Date, 133 }, { DateTime.Now.AddDays(-1).Date, 113 }, { DateTime.Now.Date, 123 } }; object[,] chartData = new object[data.Count, 2]; int i = 0; foreach (KeyValuePair<DateTime, int> pair in data) { chartData.SetValue(pair.Key, i, 0); chartData.SetValue(pair.Value, i, 1); i++; } Highcharts chart1 = new Highcharts("chart1") .InitChart(new Chart { Type = ChartTypes.Area }) .SetTitle(new Title { Text = "Chart 1" }) .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) .SetSeries(new Series { Data = new Data(chartData) }); return View(chart1); }
public ActionResult PointNameAsTextForNumber() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Chart 1" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } }) .SetSeries(new Series { Data = new Data(new[] { new Point { Name = "'1'", Y = 4 }, new Point { Name = "'2'", Y = 6 }, new Point { Name = "'3'", Y = 5 }, new Point { Name = "It\\'s working like that!", Y = 5 }, new Point { Name = "'Max\\'s car.'", Y = 4 }, new Point { Name = "6", Y = 3 } }) }); return(View(chart)); }
public ActionResult PlotBandEvents() { Highcharts chart = new Highcharts("chart") .SetTitle(new Title { Text = "Plot band events" }) .SetXAxis(new XAxis { TickInterval = 24 * 3600 * 1000, // one day Type = AxisTypes.Datetime, PlotBands = new[] { new XAxisPlotBands { Color = ColorTranslator.FromHtml("#FCFFC5"), From = Tools.GetTotalMilliseconds(new DateTime(2010, 1, 2)), To = Tools.GetTotalMilliseconds(new DateTime(2010, 1, 4)), Events = new Events { Click = "function(e) { $('#report').html(e.type); }", Mouseover = "function(e) { $('#report').html(e.type); }", Mouseout = "function(e) { $('#report').html(e.type); }", } } } }) .SetPlotOptions(new PlotOptions { Series = new PlotOptionsSeries { PointStart = new PointStart(new DateTime(2010, 1, 1)), PointInterval = 24 * 3600 * 1000 } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4 }) }); return(View(chart)); }
public ActionResult SeriesPointEventsClickUrl() { object[] data = { new { y = 29.9, url = "http://bing.com/search?q=foo" }, new { y = 71.5, url = "http://bing.com/search?q=bar" }, new { y = 106.4, url = "http://bing.com/search?q=foo+bar" } }; Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetPlotOptions(new PlotOptions { Series = new PlotOptionsSeries { Cursor = Cursors.Pointer, Point = new PlotOptionsSeriesPoint { Events = new PlotOptionsSeriesPointEvents { Click = "function() { location.href = this.options.url; }" } } } }) .SetSeries(new Series { Data = new Data(data) }); return(View(chart)); }
public ActionResult SplitChartContainerAndJavascript() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Chart 1" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } }) .SetSeries(new Series { Data = new Data(new object[] { "8", "7", "4", "7", "9", "5" }) }); return(View(chart)); }
public static Highcharts GetAssignmentsByTypePieChart(IEnumerable <Assignment> assignments, ControllerContext context) { var chart = new Highcharts("OverdueChart") .InitChart(new Chart { PlotShadow = false, PlotBackgroundColor = null, PlotBorderWidth = null, MarginTop = 50 }) .SetExporting(new Exporting() { Enabled = false }) .SetTitle(new Title { Text = "", Align = HorizontalAligns.Left }) .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.y; }" }) .SetLegend(new Legend { ItemStyle = "fontWeight: 'normal'" }) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsPieDataLabels { Enabled = true, Formatter = "function() { return '<b>'+ this.y +'</b>'; }" }, ShowInLegend = true } }) .SetSeries(new Series { Type = ChartTypes.Pie, Name = "Типы задач", Data = new Data(GetSeries(assignments, context)) }); return(chart); }
public ActionResult PieChartWithEvents() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart()) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, ShowInLegend = true, Events = new PlotOptionsPieEvents { Click = "function(event) { alert('The slice was clicked!'); }" }, Point = new PlotOptionsPiePoint { Events = new PlotOptionsPiePointEvents { LegendItemClick = "function(event) { if (!confirm('Do you want to toggle the visibility of this slice?')) { return false; } }" } } } }) .SetSeries(new Series { Type = ChartTypes.Pie, Name = "Browser share", Data = new Data(new object[] { new object[] { "Firefox", 45.0 }, new object[] { "IE", 26.8 }, new object[] { "Chrome", 12.8 }, new object[] { "Safari", 8.5 }, new object[] { "Opera", 6.2 }, new object[] { "Other\\'s", 0.7 } }) }); return(View(chart)); }
public ActionResult ThemingTheResetButton() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { ZoomType = ZoomTypes.X, ResetZoomButton = new ChartResetZoomButton { Theme = new Theme { Fill = Color.White, Stroke = Color.Silver, R = 0, States = new ThemeStates { Hover = new ThemeStatesHover { Fill = ColorTranslator.FromHtml("#41739D"), Style = "color: 'white'" } } } } }) .SetTitle(new Title { Text = "Theming the reset button" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return(View(chart)); }
public DotNet.Highcharts.Highcharts discover_weekly_graph(graphViewModel model, List <DateTime> allDates) { Highcharts dis_weekly_chart = new Highcharts("dis_weekly_chart") .InitChart(new Chart { Width = 500, Height = 350, Type = ChartTypes.Column, Margin = new[] { 75 }, Options3d = new ChartOptions3d { Enabled = true, Alpha = 15, Beta = 15, Depth = 50, ViewDistance = 25 } }) .SetXAxis(new XAxis { Categories = new[] { allDates[0].ToString("yyyy-MM-dd"), allDates[1].ToString("yyyy-MM-dd"), allDates[2].ToString("yyyy-MM-dd"), allDates[3].ToString("yyyy-MM-dd"), allDates[4].ToString("yyyy-MM-dd"), allDates[5].ToString("yyyy-MM-dd"), allDates[6].ToString("yyyy-MM-dd") } }) .SetTitle(new Title { Text = "Discovery Weekly Graph" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Depth = 25 } }) .SetLegend(new Legend { Enabled = false }) .SetSeries(new Series { Data = new Data(new object[] { model.dis_day1, model.dis_day2, model.dis_day3, model.dis_day4, model.dis_day5, model.dis_day6, model.dis_day7 }) }); return(dis_weekly_chart); }
public ActionResult BindDecimalValues() { List <decimal> values = new List <decimal> { (decimal)29.9, (decimal)71.5, (decimal)106.4, (decimal)129.2, 111 }; Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Spline }) .SetTitle(new Title { Text = "Chart with decimal values" }) .SetXAxis(new XAxis { Categories = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" } }) .SetSeries(new Series { Data = new Data(values.Select(x => (object)x).ToArray()) }); return(View(chart)); }
private Highcharts CreateChart(int itemId) { var wTrends = _provider.GetDailyTrendsFor(itemId, TrendsType.W).ToArray(); var hTrends = _provider.GetDailyTrendsFor(itemId, TrendsType.H).ToArray(); var chart = new Highcharts("chart") .SetXAxis(new XAxis { Categories = wTrends .Select(t => t.Date.ToShortDateString()) .Union( hTrends.Select(t => t.Date.ToShortDateString())) .Distinct() .ToArray() }) .SetSeries(new[] { new Series { Name = "W", Data = new Data(wTrends.Select(t => t.Count).Cast <object>().ToArray()) }, new Series { Name = "H", Data = new Data(hTrends.Select(t => t.Count).Cast <object>().ToArray()) } }); return(chart); }
/// <summary> /// 作者统计,默认注册数量统计 /// </summary> /// <returns></returns> public ActionResult Index(int?StatType) { Highcharts chart = null; switch (StatType) { case 1: chart = GetAuthorContributeStat(); break; case 2: // 地区统计 chart = GetAuthorProvinceStat(); break; case 3: // 学历统计 chart = GetAuthorEducationStat(3, "学历"); break; case 4: // 专业统计 chart = GetAuthorProfessionalStat(); break; case 5: // 职称统计 chart = GetAuthorEducationStat(5, "职称"); break; case 6: // 性别统计 chart = GetAuthorGenderStat(); break; default: chart = GetAuthorContributeStat(); break; } ViewBag.StatType = StatType == null ? 1 : StatType.Value; return(View(chart)); }
public IActionResult Index() { // var chart = new Highcharts() // { // ID = "test", // SplineSeries = new SplineSeries() // { // Name = "testSpline",Data = new List<SplineSeriesData>() // { // new SplineSeriesData(){Name = "a",X = 10,Y=20} // } // } // }; var rec = new List<Tuple<DateTime, int>> { new Tuple<DateTime, int>(new DateTime(2017, 1, 1), 35), new Tuple<DateTime, int>(new DateTime(2017, 1, 2), 37), new Tuple<DateTime, int>(new DateTime(2017, 1, 3), 12), new Tuple<DateTime, int>(new DateTime(2017, 1, 4), 53), new Tuple<DateTime, int>(new DateTime(2017, 1, 5), 26) }; var seriesList = new List<Series>(); seriesList.Add(new Series() { Name = "s1", Data = new Data(rec.Select(r => new object[] { r.Item1, r.Item2 }).ToArray()) }); var chart = new Highcharts("test1") .InitChart(new Chart() { DefaultSeriesType = ChartTypes.Spline, ZoomType = ZoomTypes.Xy, Height = 400 }) .SetSeries(seriesList.ToArray()); return View(chart); }
public ActionResult MultipleXAxes() { // Example from JSFIDDLE: http://jsfiddle.net/kSkYN/4502/ Highcharts chart = new Highcharts("chart") .SetTitle(new Title { Text = "Multiple X-Axes" }) .SetXAxis(new[] { new XAxis { Type = AxisTypes.Datetime }, new XAxis { Type = AxisTypes.Datetime, Opposite = true } }) .SetSeries(new[] { new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }), PlotOptionsSeries = new PlotOptionsSeries { PointStart = new PointStart(new DateTime(2010, 1, 1)), PointInterval = 24 * 3600 * 1000 // one day } }, new Series { Data = new Data(new object[] { 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0 }), PlotOptionsSeries = new PlotOptionsSeries { PointStart = new PointStart(new DateTime(2010, 1, 10)), PointInterval = 24 * 3600 * 1000, // one day }, XAxis = "1" } }); return View(chart); }
private static Highcharts StackedBarChart(MenuBO menu, object[] parameter) { List <Series> series = Dal.GetData(menu.ProcedureName, parameter); List <string> axis = Dal.GetAxis(menu.DataAxis, null); #region Chart Highcharts chart = new Highcharts("chart" + menu.Oid) .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar }) .SetTitle(new Title { Text = menu.Title }) .SetXAxis(new XAxis { Categories = axis.ToArray() }) .SetYAxis(new YAxis { Min = 0, Title = new YAxisTitle { Text = menu.Title } }) .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +''; }" }) .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } }) .SetSeries(series.ToArray()); #endregion return(chart); }
public Highcharts PieChart(string id, Series s) { Highcharts tmp = new Highcharts(id) .InitChart(new Chart { PlotShadow = false }) .SetTitle(new Title { Text = "" }) .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 0) +' %'; }" }) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsPieDataLabels { Enabled = true, Color = ColorTranslator.FromHtml("#fff"), Style = "fontSize: '13px',fontFamily: 'Verdana, sans-serif',textShadow: '0 0 3px black'", Formatter = "function() { return Highcharts.numberFormat(this.percentage, 0) +' %'; }", Distance = -30 }, ShowInLegend = true } }).SetCredits(new Credits { Enabled = false }).SetSeries(s).SetExporting(new Exporting { Enabled = false }); return(tmp); }
public async Task <ViewResult> CompleteHistory(string userId) { var user = await _userManager.FindByIdAsync(userId); var data = _profileManager.GetReputationHistory(user).ToArray(); var vm = new CompleteHistoryViewModel(); var chart = new Highcharts("chart") .SetXAxis(new XAxis { Categories = data.Select(x => x.Date.ToShortDateString()).ToArray() }) .SetSeries(new Series { Data = new Data(data.Select(x => x.Value).Cast <object>().ToArray()) }); vm.Chart = chart; return(View(vm)); }
public ActionResult RAD() { { //ENROLLMENT CHART Highcharts apptoJax = new Highcharts("apptoJax"); apptoJax.InitChart(new Chart() { Type = DotNet.Highcharts.Enums.ChartTypes.Column, BackgroundColor = new BackColorOrGradient(System.Drawing.Color.White), Style = "fontWeight: 'bold', fontSize: '17px'", BorderColor = System.Drawing.Color.Gray, BorderRadius = 0, BorderWidth = 2 }); apptoJax.SetTitle(new Title() { Text = "Applications to Jacksonville" }); // Create objects for X - Axis object[] Q1Goal = Q1GoalsEnrollment().Cast <object>().ToArray(); object[] Q1Actual = Q1ActualsEnrollment().Cast <object>().ToArray(); // Create objects for Y - Axis string[] Subcategories = subCat().ToArray(); apptoJax.SetXAxis(new XAxis() { Type = AxisTypes.Category, Title = new XAxisTitle() { Text = "Goal vs Actual", Style = "fontWeight: 'bold', fontSize: '17px'" }, Categories = Subcategories }); apptoJax.SetYAxis(new YAxis() { Title = new YAxisTitle() { Text = "# Of Applications", Style = "fontWeight: 'bold', fontSize: '17px'" }, ShowFirstLabel = true, ShowLastLabel = true, Min = 0 }); apptoJax.SetLegend(new Legend { Enabled = true, BorderRadius = 6, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6")) }); // Set series for quarterly goals + actuals apptoJax.SetSeries(new Series[] { new Series { Name = "Q1 GOAL", Data = new Data(Q1Goal), Color = ColorTranslator.FromHtml("#3EC2CF") }, new Series { Name = "Q1 ACTUAL", Data = new Data(Q1Actual), Color = ColorTranslator.FromHtml("#bedde0") } } ); return(View(apptoJax)); } }
public ActionResult BindDecimalValues() { List<decimal> values = new List<decimal> { (decimal)29.9, (decimal)71.5, (decimal)106.4, (decimal)129.2, 111 }; Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Spline }) .SetTitle(new Title { Text = "Chart with decimal values" }) .SetXAxis(new XAxis { Categories = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" } }) .SetSeries(new Series { Data = new Data(values.Select(x => (object)x).ToArray()) }); return View(chart); }
public ActionResult TransparentBackground() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { BackgroundColor = new BackColorOrGradient(new Gradient { LinearGradient = new[] { 0, 0, 0, 400 }, Stops = new object[,] { { 0, Color.FromArgb(13, 255, 255, 255) }, { 1, Color.FromArgb(13, 255, 255, 255) } } }) }) .SetTitle(new Title { Text = "Disabled background" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Animation = new Animation(false) } }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(chart); }
public ActionResult PlotBandEvents() { Highcharts chart = new Highcharts("chart") .SetTitle(new Title { Text = "Plot band events" }) .SetXAxis(new XAxis { TickInterval = 24 * 3600 * 1000, // one day Type = AxisTypes.Datetime, PlotBands = new[] { new XAxisPlotBands { Color = ColorTranslator.FromHtml("#FCFFC5"), From = Tools.GetTotalMilliseconds(new DateTime(2010, 1, 2)), To = Tools.GetTotalMilliseconds(new DateTime(2010, 1, 4)), Events = new Events { Click = "function(e) { $('#report').html(e.type); }", Mouseover = "function(e) { $('#report').html(e.type); }", Mouseout = "function(e) { $('#report').html(e.type); }", } } } }) .SetPlotOptions(new PlotOptions { Series = new PlotOptionsSeries { PointStart = new PointStart(new DateTime(2010, 1, 1)), PointInterval = 24 * 3600 * 1000 } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4 }) }); return View(chart); }
public ActionResult MultipleCharts() { Highcharts chart1 = new Highcharts("chart1") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Chart 1" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); Highcharts chart2 = new Highcharts("chart2") .InitChart(new Chart { Type = ChartTypes.Bar }) .SetTitle(new Title { Text = "Chart 2" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }) .InFunction("DrawChart2"); Highcharts chart3 = new Highcharts("chart3") .InitChart(new Chart { Type = ChartTypes.Spline }) .SetTitle(new Title { Text = "Chart 3" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }) .InFunction("DrawChart3"); Highcharts chart4 = new Highcharts("chart4") .SetTitle(new Title { Text = "Chart 4" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(new Container(new[] { chart1, chart2, chart3, chart4 })); }
public ActionResult Index() { Highcharts columnChart = new Highcharts("columnchart"); columnChart.InitChart(new Chart() { Type = DotNet.Highcharts.Enums.ChartTypes.Column, BackgroundColor = new BackColorOrGradient(System.Drawing.Color.AliceBlue), Style = "fontWeight: 'bold', fontSize: '17px'", BorderColor = System.Drawing.Color.LightBlue, BorderRadius = 0, BorderWidth = 2 }); columnChart.SetTitle(new Title() { Text = "Sachin Vs Dhoni" }); columnChart.SetSubtitle(new Subtitle() { Text = "Played 9 Years Together From 2004 To 2012" }); columnChart.SetXAxis(new XAxis() { Type = AxisTypes.Category, Title = new XAxisTitle() { Text = "Years", Style = "fontWeight: 'bold', fontSize: '17px'" }, Categories = new[] { "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012" } }); columnChart.SetYAxis(new YAxis() { Title = new YAxisTitle() { Text = "Runs", Style = "fontWeight: 'bold', fontSize: '17px'" }, ShowFirstLabel = true, ShowLastLabel = true, Min = 0 }); columnChart.SetLegend(new Legend { Enabled = true, BorderColor = System.Drawing.Color.CornflowerBlue, BorderRadius = 6, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6")) }); columnChart.SetSeries(new Series[] { new Series { Name = "Sachin Tendulkar", Data = new Data(new object[] { 812, 412, 628, 1425, 460, 972, 204, 513, 315 }) }, new Series() { Name = "M S Dhoni", Data = new Data(new object[] { 19, 895, 821, 1103, 1097, 1198, 600, 764, 524, }) } } ); return(View(columnChart)); }
public ActionResult Bubbles3D() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Bubble, ZoomType = ZoomTypes.Xy, PlotBorderWidth = 1, Width = 600, Height = 400 }) .SetTitle(new Title { Text = "Highcharts bubbles with radial gradient fill" }) .SetXAxis(new XAxis { GridLineWidth = 1 }) .SetYAxis(new YAxis { StartOnTick = false, EndOnTick = false}) .SetSeries(new[] { new Series { Data = new Data(new object[] { new object[] { 97,36,79 }, new object[] { 94,74,60 }, new object[] { 68,76,58 }, new object[] { 64,87,56 }, new object[] { 68,27,73 }, new object[] { 74,99,42 }, new object[] { 7,93,87 }, new object[] { 51,69,40 }, new object[] { 38,23,33 }, new object[] { 57,86,31 } }), PlotOptionsBubble = new PlotOptionsBubble { Marker = new PlotOptionsBubbleMarker { FillColor = new BackColorOrGradient(new Gradient { RadialGradient = new RadialGradient { Cx = 0.4, Cy = 0.3, R = 0.7}, Stops = new object[,] { { 0, Color.FromArgb(120, 255,255,255) }, { 1, Color.FromArgb(120,69,114,167) } } }) } } }, new Series { Data = new Data(new object[] { new object[] { 25,10,87 }, new object[] { 2,75,59 }, new object[] { 11,54,8 }, new object[] { 86,55,93 }, new object[] { 5,3,58 }, new object[] { 90,63,44 }, new object[] { 91,33,17 }, new object[] { 97,3,56 }, new object[] { 15,67,48 }, new object[] { 54,25,81 } }), PlotOptionsBubble = new PlotOptionsBubble { Marker = new PlotOptionsBubbleMarker { FillColor = new BackColorOrGradient(new Gradient { RadialGradient = new RadialGradient { Cx = 0.4, Cy = 0.3, R = 0.7}, Stops = new object[,] { { 0, Color.FromArgb(120, 255,255,255) }, { 1, Color.FromArgb(120,170,70,67) } } }) } } } }); return View(chart); }
public ActionResult BubbleChart() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bubble, ZoomType = ZoomTypes.Xy, Width = 600, Height = 400 }) .SetTitle(new Title { Text = "Highcharts Bubbles" }) .SetSeries(new[] { new Series { Data = new Data(new object[] { new object[] { 97,36,79 }, new object[] { 94,74,60 }, new object[] { 68,76,58 }, new object[] { 64,87,56 }, new object[] { 68,27,73 }, new object[] { 74,99,42 }, new object[] { 7,93,87 }, new object[] { 51,69,40 }, new object[] { 38,23,33 }, new object[] { 57,86,31 } }) }, new Series { Data = new Data(new object[] { new object[] { 25,10,87 }, new object[] { 2,75,59 }, new object[] { 11,54,8 }, new object[] { 86,55,93 }, new object[] { 5,3,58 }, new object[] { 90,63,44 }, new object[] { 91,33,17 }, new object[] { 97,3,56 }, new object[] { 15,67,48 }, new object[] { 54,25,81 } }) }, new Series { Data = new Data(new object[] { new object[] { 47,47,21 }, new object[] { 20,12,4 }, new object[] { 6,76,91 }, new object[] { 38,30,60 }, new object[] { 57,98,64 }, new object[] { 61,17,80 }, new object[] { 83,60,13 }, new object[] { 67,78,75 }, new object[] { 64,12,10 }, new object[] { 30,77,82 } }) } }); return View(chart); }
public ActionResult BoxPlot() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Boxplot, Width = 600, Height = 400 }) .SetTitle(new Title { Text = "Highcharts Box Plot Example" }) .SetLegend(new Legend { Enabled = false }) .SetXAxis(new XAxis { Categories = new[] { "1", "2", "3", "4", "5" }, Title = new XAxisTitle { Text = "Experiment No." } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Observations" }, PlotLines = new[] { new YAxisPlotLines { Value = 932, Color = Color.FromName("red"), Width = 1, Label = new YAxisPlotLinesLabel { Text = "Theoretical mean: 932", Align = HorizontalAligns.Center, Style = "color: 'gray'" } } } }) .SetSeries(new[] { new Series { Name = "Observations", Data = new Data(new object[] { new object[] { 760, 801, 848, 895, 965 }, new object[] { 733, 853, 939, 980, 1080 }, new object[] { 714, 762, 817, 870, 918 }, new object[] { 724, 802, 806, 871, 950 }, new object[] { 834, 836, 864, 882, 910 } }) }, new Series { Name = "Outlier", Data = new Data(new object[,] { { 0, 644 }, { 4, 718 }, { 4, 951 }, { 4, 969 } }), Type = ChartTypes.Scatter, Color = Color.FromName("Highcharts.getOptions().colors[0]"), PlotOptionsScatter = new PlotOptionsScatter { Marker = new PlotOptionsScatterMarker { FillColor = new BackColorOrGradient(Color.FromName("white")), LineWidth = 1, LineColor = Color.FromName("Highcharts.getOptions().colors[0]") } } } } ); return View(chart); }
public ActionResult BasicLine() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line, MarginRight = 130, MarginBottom = 25, ClassName = "chart" }) .SetTitle(new Title { Text = "Monthly Average Temperature", X = -20 }) .SetSubtitle(new Subtitle { Text = "Source: WorldClimate.com", X = -20 }) .SetXAxis(new XAxis { Categories = ChartsData.Categories }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Temperature (°C)" }, PlotLines = new[] { new YAxisPlotLines { Value = 0, Width = 1, Color = ColorTranslator.FromHtml("#808080") } } }) .SetTooltip(new Tooltip { Formatter = @"function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; }" }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Right, VerticalAlign = VerticalAligns.Top, X = -10, Y = 100, BorderWidth = 0 }) .SetSeries(new[] { new Series { Name = "Tokyo", Data = new Data(ChartsData.TokioData) }, new Series { Name = "New York", Data = new Data(ChartsData.NewYorkData) }, new Series { Name = "Berlin", Data = new Data(ChartsData.BerlinData) }, new Series { Name = "London", Data = new Data(ChartsData.LondonData) } } ); return View(chart); }
public ActionResult BasicColumn() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) .SetTitle(new Title { Text = "Monthly Average Rainfall" }) .SetSubtitle(new Subtitle { Text = "Source: WorldClimate.com" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetYAxis(new YAxis { Min = 0, Title = new YAxisTitle { Text = "Rainfall (mm)" } }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Left, VerticalAlign = VerticalAligns.Top, X = 100, Y = 70, Floating = true, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")), Shadow = true }) .SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.x +': '+ this.y +' mm'; }" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } }) .SetSeries(new[] { new Series { Name = "Tokyo", Data = new Data(new object[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }, new Series { Name = "London", Data = new Data(new object[] { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 }) }, new Series { Name = "New York", Data = new Data(new object[] { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 }) }, new Series { Name = "Berlin", Data = new Data(new object[] { 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1 }) } }); return View(chart); }
public ActionResult BasicBar() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar }) .SetTitle(new Title { Text = "Historic World Population by Region" }) .SetSubtitle(new Subtitle { Text = "Source: Wikipedia.org" }) .SetXAxis(new XAxis { Categories = new[] { "Africa", "America", "Asia", "Europe", "Oceania" }, Title = new XAxisTitle { Text = string.Empty } }) .SetYAxis(new YAxis { Min = 0, Title = new YAxisTitle { Text = "Population (millions)", Align = AxisTitleAligns.High } }) .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +' millions'; }" }) .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { DataLabels = new PlotOptionsBarDataLabels { Enabled = true } } }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Right, VerticalAlign = VerticalAligns.Top, X = -100, Y = 100, Floating = true, BorderWidth = 1, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")), Shadow = true }) .SetCredits(new Credits { Enabled = false }) .SetSeries(new[] { new Series { Name = "Year 1800", Data = new Data(new object[] { 107, 31, 635, 203, 2 }) }, new Series { Name = "Year 1900", Data = new Data(new object[] { 133, 156, 947, 408, 6 }) }, new Series { Name = "Year 2008", Data = new Data(new object[] { 973, 914, 4054, 732, 34 }) } }); return View(chart); }
public ActionResult BasicArea() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Area }) .SetTitle(new Title { Text = "US and USSR nuclear stockpiles" }) .SetSubtitle(new Subtitle { Text = "Source: thebulletin.metapress.com" }) .SetXAxis(new XAxis { Labels = new XAxisLabels { Formatter = "function() { return this.value; }" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Nuclear weapon states" }, Labels = new YAxisLabels { Formatter = "function() { return this.value / 1000 +'k'; }" } }) .SetPlotOptions(new PlotOptions { Area = new PlotOptionsArea { PointStart = new PointStart(1940), Marker = new PlotOptionsAreaMarker { Enabled = false, Symbol = "circle", Radius = 2, States = new PlotOptionsAreaMarkerStates { Hover = new PlotOptionsAreaMarkerStatesHover { Enabled = true } } } } }) .SetSeries(new[] { ChartsData.Usa, ChartsData.Ussr }); return View(chart); }
/* Method to create piechart for dashboard*/ private TechnicianOrderOverview PieChartForOrdersOverview(TechnicianOrderOverview viewModel) { Highcharts pieChartOrders = new Highcharts("pieChartOrders") .InitChart(new Chart { PlotShadow = false, Width = 500, Height = 500 }) // set size parameters .SetTitle(new Title { Text = "Orders Overview" }) // set piechart title .SetPlotOptions(new PlotOptions // set the plotting options { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsPieDataLabels { Color = ColorTranslator.FromHtml("#000000"), ConnectorColor = ColorTranslator.FromHtml("#000000"), } } }) .SetSeries(new Series // set series options { Type = ChartTypes.Pie, Name = "Overview", Data = new Data(new object[] { new DotNet.Highcharts.Options.Point { Name = "Orders Waiting To Be Ordered", // set title slice Y = (Double)viewModel.OrdersWaitingToBeOrdered, Selected = true, Color = Color.LightGreen }, new DotNet.Highcharts.Options.Point { Name = "Orders Not Collected By Students", // set title slice Y = (Double)viewModel.OrdersNotCollected, Sliced = true, Color = Color.LightBlue, Selected = true }, new DotNet.Highcharts.Options.Point { Name = "Students Who Need To Be Notified", // set title of slice Y = (Double)viewModel.StudentsWhoNeedToBeNotified, Sliced = true, Color = Color.Orange, Selected = true }, }) }); viewModel.PieChart = pieChartOrders; // pass to viewmodel return(viewModel); }
public ActionResult BarWithNegotiveStack() { string[] categories = new[] { "0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "over 100" }; Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar }) .SetTitle(new Title { Text = "Population pyramid for Germany, midyear 2010" }) .SetSubtitle(new Subtitle { Text = "Source: www.census.gov" }) .SetXAxis(new[] { new XAxis { Categories = categories, Reversed = false }, new XAxis { Opposite = true, Reversed = false, Categories = categories, LinkedTo = 0 } }) .SetYAxis(new YAxis { Labels = new YAxisLabels { Formatter = "function(){ return (Math.abs(this.value) / 1000000) + 'M'; }" }, Title = new YAxisTitle { Text = "" }, Min = -4000000, Max = 4000000 }) .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" }) .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } }) .SetSeries(new[] { new Series { Name = "Male", Data = new Data(new object[] { -1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768, -2176300, -1329968, -836804, -354784, -90569, -28367, -3878 }) }, new Series { Name = "Female", Data = new Data(new object[] { 1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 330870, 130632, 21208 }) } }); return View(chart); }
public ActionResult ClickToAddPoint() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Scatter, Margin = new[] { 70, 50, 60, 80 }, Events = new ChartEvents { Click = "ChartClickEvent" } }) .AddJavascripFunction("ChartClickEvent", @"var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; series.addPoint([x, y]);", "e") .SetTitle(new Title { Text = "User supplied data" }) .SetSubtitle(new Subtitle { Text = "Click the plot area to add a point. Click a point to remove it." }) .SetXAxis(new XAxis { MinPadding = 0.2, MaxPadding = 0.2, MinRange = 60 }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Value" }, MinPadding = 0.2, MaxPadding = 0.2, MinRange = 60, PlotLines = new[] { new YAxisPlotLines { Value = 0, Width = 1, Color = ColorTranslator.FromHtml("#808080") } } }) .SetLegend(new Legend { Enabled = false }) .SetExporting(new Exporting { Enabled = false }) .SetPlotOptions(new PlotOptions { Series = new PlotOptionsSeries { LineWidth = 1, Point = new PlotOptionsSeriesPoint { Events = new PlotOptionsSeriesPointEvents { Click = "function() { if (this.series.data.length > 1) this.remove(); }" } } } }) .SetSeries(new Series { Data = new Data(new object[,] { { 20, 20 }, { 80, 80 } }) }); return View(chart); }
public ActionResult ColumnRange() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Columnrange, Inverted = true}) .SetTitle(new Title { Text = "Temperature variation by month" }) .SetSubtitle(new Subtitle { Text = "Observed in Vik i Sogn, Norway, 2009" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Temperature ( °C )" } }) .SetTooltip(new Tooltip { ValueSuffix = "°C" }) .SetLegend(new Legend { Enabled = false } ) .SetPlotOptions(new PlotOptions { Columnrange = new PlotOptionsColumnrange { DataLabels = new PlotOptionsColumnrangeDataLabels { Enabled = true, Formatter = "function () { return this.y + '°C'; }" } } }) .SetSeries(new Series { Name = "Temperatures", Data = new Data(new object[,] { {-9.7, 9.4}, {-8.7, 6.5}, {-3.5, 9.4}, {-1.4, 19.9}, {0.0, 22.6}, {2.9, 29.5}, {9.2, 30.7}, {7.3, 26.5}, {4.4, 18.0}, {-3.1, 11.4}, {-5.2, 10.4}, {-13.5, 9.8} }) }); return View(chart); }
public ActionResult ColumnWithDrilldown() { string[] categories = new[] { "MSIE", "Firefox", "Chrome", "Safari", "Opera" }; const string NAME = "Browser brands"; Data data = new Data(new[] { new Point { Y = 55.11, Color = Color.FromName("colors[0]"), Drilldown = new Drilldown { Name = "MSIE versions", Categories = new[] { "MSIE 6.0", "MSIE 7.0", "MSIE 8.0", "MSIE 9.0" }, Data = new Data(new object[] { 10.85, 7.35, 33.06, 2.81 }), Color = Color.FromName("colors[0]") } }, new Point { Y = 21.63, Color = Color.FromName("colors[1]"), Drilldown = new Drilldown { Name = "Firefox versions", Categories = new[] { "Firefox 2.0", "Firefox 3.0", "Firefox 3.5", "Firefox 3.6", "Firefox 4.0" }, Data = new Data(new object[] { 0.20, 0.83, 1.58, 13.12, 5.43 }), Color = Color.FromName("colors[1]") } }, new Point { Y = 11.94, Color = Color.FromName("colors[2]"), Drilldown = new Drilldown { Name = "Chrome versions", Categories = new[] { "Chrome 5.0", "Chrome 6.0", "Chrome 7.0", "Chrome 8.0", "Chrome 9.0", "Chrome 10.0", "Chrome 11.0", "Chrome 12.0" }, Data = new Data(new object[] { 0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22 }), Color = Color.FromName("colors[2]") } }, new Point { Y = 7.15, Color = Color.FromName("colors[3]"), Drilldown = new Drilldown { Name = "Safari versions", Categories = new[] { "Safari 5.0", "Safari 4.0", "Safari Win 5.0", "Safari 4.1", "Safari/Maxthon", "Safari 3.1", "Safari 4.1" }, Data = new Data(new object[] { 4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14 }), Color = Color.FromName("colors[3]") } }, new Point { Y = 2.14, Color = Color.FromName("colors[4]"), Drilldown = new Drilldown { Name = "Opera versions", Categories = new[] { "Opera 9.x", "Opera 10.x", "Opera 11.x" }, Data = new Data(new object[] { 0.12, 0.37, 1.65 }), Color = Color.FromName("colors[4]") } } }); Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) .SetTitle(new Title { Text = "Browser market share, April, 2011" }) .SetSubtitle(new Subtitle { Text = "Click the columns to view versions. Click again to view brands." }) .SetXAxis(new XAxis { Categories = categories }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Total percent market share" } }) .SetLegend(new Legend { Enabled = false }) .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Cursor = Cursors.Pointer, Point = new PlotOptionsColumnPoint { Events = new PlotOptionsColumnPointEvents { Click = "ColumnPointClick" } }, DataLabels = new PlotOptionsColumnDataLabels { Enabled = true, Color = Color.FromName("colors[0]"), Formatter = "function() { return this.y +'%'; }", Style = "fontWeight: 'bold'" } } }) .SetSeries(new Series { Name = "Browser brands", Data = data, Color = Color.White }) .SetExporting(new Exporting { Enabled = false }) .AddJavascripFunction( "TooltipFormatter", @"var point = this.point, s = this.x +':<b>'+ this.y +'% market share</b><br/>'; if (point.drilldown) { s += 'Click to view '+ point.category +' versions'; } else { s += 'Click to return to browser brands'; } return s;" ) .AddJavascripFunction( "ColumnPointClick", @"var drilldown = this.drilldown; if (drilldown) { // drill down setChart(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color); } else { // restore setChart(name, categories, data.data); }" ) .AddJavascripFunction( "setChart", @"chart.xAxis[0].setCategories(categories); chart.series[0].remove(); chart.addSeries({ name: name, data: data, color: color || 'white' });", "name", "categories", "data", "color" ) .AddJavascripVariable("colors", "Highcharts.getOptions().colors") .AddJavascripVariable("name", "'{0}'".FormatWith(NAME)) .AddJavascripVariable("categories", JsonSerializer.Serialize(categories)) .AddJavascripVariable("data", JsonSerializer.Serialize(data)); return View(chart); }
public ActionResult PieChartWithEvents() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart()) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, ShowInLegend = true, Events = new PlotOptionsPieEvents { Click = "function(event) { alert('The slice was clicked!'); }" }, Point = new PlotOptionsPiePoint { Events = new PlotOptionsPiePointEvents { LegendItemClick = "function(event) { if (!confirm('Do you want to toggle the visibility of this slice?')) { return false; } }" } } } }) .SetSeries(new Series { Type = ChartTypes.Pie, Name = "Browser share", Data = new Data(new object[] { new object[] { "Firefox", 45.0 }, new object[] { "IE", 26.8 }, new object[] { "Chrome", 12.8}, new object[] { "Safari", 8.5 }, new object[] { "Opera", 6.2 }, new object[] { "Other\\'s", 0.7 } }) }); return View(chart); }
public ActionResult AreaWithMissingPoints() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Area, SpacingBottom = 30 }) .SetTitle(new Title { Text = "Fruit consumption *" }) .SetSubtitle(new Subtitle { Text = @"* Jane\'s banana consumption is unknown", Floating = false, Align = HorizontalAligns.Right, VerticalAlign = VerticalAligns.Bottom, Y = 15 }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Left, VerticalAlign = VerticalAligns.Top, X = 150, Y = 100, Floating = true, BorderWidth = 1, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")) }) .SetXAxis(new XAxis { Categories = new[] { "Apples", "Pears", "Oranges", "Bananas", "Grapes", "Plums", "Strawberries", "Raspberries" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Y-Axis" }, Labels = new YAxisLabels { Formatter = "function() { return this.value; }" } }) .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; }" }) .SetPlotOptions(new PlotOptions { Area = new PlotOptionsArea { FillOpacity = 0 } }) .SetCredits(new Credits { Enabled = false }) .SetSeries(new[] { new Series { Name = "John", Data = new Data(new object[] { 0, 1, 4, 4, 5, 2, 3, 7 }) }, new Series { Name = "Jane", Data = new Data(new object[] { 1, 0, 3, null, 3, 1, 2, 1 }) } }); return View(chart); }
public ActionResult ThemingTheResetButton() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { ZoomType = ZoomTypes.X, ResetZoomButton = new ChartResetZoomButton { Theme = new Theme { Fill = Color.White, Stroke = Color.Silver, R = 0, States = new ThemeStates { Hover = new ThemeStatesHover { Fill = ColorTranslator.FromHtml("#41739D"), Style = "color: 'white'" } } } } }) .SetTitle(new Title { Text = "Theming the reset button" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(chart); }
public HttpResponseMessage Chart() { Highcharts chart = new Highcharts("StockChart") .InitChart(new Chart { ZoomType = ZoomTypes.Xy }) .SetTitle(new Title { Text = "Average Monthly Weather Data for Tokyo" }) .SetSubtitle(new Subtitle { Text = "Source: WorldClimate.com" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetYAxis(new[] { new YAxis { Labels = new YAxisLabels { Formatter = "function() { return this.value +'°C'; }", Style = "color: '#89A54E'" }, Title = new YAxisTitle { Text = "Temperature", Style = "color: '#89A54E'" }, Opposite = true }, new YAxis { Labels = new YAxisLabels { Formatter = "function() { return this.value +' mm'; }", Style = "color: '#4572A7'" }, Title = new YAxisTitle { Style = "color: '#4572A7'" }, GridLineWidth = 0 }, new YAxis { Labels = new YAxisLabels { Formatter = "function() { return this.value +' mb'; }", Style = "color: '#AA4643'" }, Title = new YAxisTitle { Text = "Sea-Level Pressure", Style = "color: '#AA4643'" }, GridLineWidth = 0, Opposite = true } }) .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" }) .AddJavascripFunction("TooltipFormatter", @"var unit = { 'Rainfall': 'mm', 'Temperature': '°C', 'Sea-Level Pressure': 'mb' }[this.series.name]; return ''+ this.x +': '+ this.y +' '+ unit;") .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Left, X = 120, VerticalAlign = VerticalAligns.Top, Y = 80, Floating = true, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")) }) .SetPlotOptions(new PlotOptions { Line = new PlotOptionsLine { Marker = new PlotOptionsLineMarker { Enabled = false }, DashStyle = DashStyles.ShortDot } }) .SetSeries(new[] { new Series { Name = "Rainfall", Color = ColorTranslator.FromHtml("#4572A7"), Type = ChartTypes.Column, YAxis = "1", Data = new Data(new object[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }, new Series { Name = "Sea-Level Pressure", Color = ColorTranslator.FromHtml("#AA4643"), Type = ChartTypes.Line, YAxis = "2", Data = new Data(new object[] { 1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7 }), PlotOptionsSpline = new PlotOptionsSpline { Marker = new PlotOptionsSplineMarker { Enabled = false }, DashStyle = DashStyles.ShortDot } }, new Series { Name = "Temperature", Color = ColorTranslator.FromHtml("#89A54E"), Type = ChartTypes.Spline, Data = new Data(new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 }) } }); try { return(Request.CreateResponse(HttpStatusCode.OK, new APIResponseWrapper() { Data = chart })); } catch (Exception ex) { return(Request.CreateResponse(HttpStatusCode.BadRequest, new APIResponseWrapper() { Message = ex.Message, Errors = ex.InnerException != null ? ex.InnerException.Message : null })); } }
public ActionResult TooltipCrosshairs() { Highcharts chart = new Highcharts("chart") .SetTitle(new Title { Text = "Tooltip Crosshairs" }) .SetTooltip(new Tooltip { Crosshairs = new Crosshairs( new CrosshairsForamt { Width = 3, Color = Color.Red }, new CrosshairsForamt { Width = 3, Color = Color.Aqua } ) }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(chart); }
public ActionResult Waterfall() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Waterfall, Width = 600, Height = 400 }) .SetTitle(new Title { Text = "Highcharts Waterfall" }) .SetXAxis(new XAxis { Type = AxisTypes.Category }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "USD" } }) .SetLegend(new Legend { Enabled = false }) .SetTooltip(new Tooltip { PointFormat = "<b>${point.y:,.2f}</b> USD" }) .SetSeries(new Series { UpColor = Color.FromName("Highcharts.getOptions().colors[2]"), Name = "Observations", Color = Color.FromName("Highcharts.getOptions().colors[3]"), Data = new Data(new[] { new Point { Name = "Start", Y = 120000 }, new Point { Name = "Product Revenue", Y = 569000 }, new Point { Name = "Service Revenue", Y = 231000 }, new Point { Name = "Positive Balance", Color = Color.FromName("Highcharts.getOptions().colors[1]"), IsIntermediateSum = true }, new Point { Name = "Fixed Costs", Y = -342000 }, new Point { Name = "Variable Costs", Y = -233000 }, new Point { Name = "Balance", Color = Color.FromName("Highcharts.getOptions().colors[1]"), IsSum = true} }), PlotOptionsWaterfall = new PlotOptionsWaterfall { DataLabels = new PlotOptionsWaterfallDataLabels { Enabled = true, Formatter = "function () { return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k'; }", Style = "color: '#FFFFFF', fontWeight: 'bold'" }, PointPadding = 0 } } ); return View(chart); }
public ActionResult UseDotNetGlobalization() { Highcharts chart = new Highcharts("chart") .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) .SetTitle(new Title { Text = "Using .NET Globalization (German)" }) .SetOptions(new GlobalOptions { Lang = new Helpers.Lang().SetAndUseCulture("de-DE"), Global = new Global { UseUTC = false } }) .SetSeries(new Series { PlotOptionsSeries = new PlotOptionsSeries { PointStart = new PointStart(new DateTime(2012, 1, 1)), PointInterval = 3600 * 1000 * 24 * 10 // one day }, Data = new Data(new object[] { 8929.9, 9071.5, 7106.4, 10129.2, 8144.0, 8176.9, 7135.6, 9148.5, 10216.4, 8194.1, 8995.6, 7754.4 }) }); return View(chart); }
/// <summary> /// POST: DriverRevenueCharts /// </summary> /// <returns></returns> public ActionResult DriverMonthlyRevenueCharts(string driver, string year) { ViewBag.Drivers = new SelectList(context.Users.Where(u => u.UserType == "Driver"), "Username", "Username"); #region Get a list of years List <int> years = new List <int>(); int startYear = DateTime.Now.Year; while (startYear >= DateTime.Now.AddYears(-5).Year) { years.Add(startYear); startYear -= 1; } ViewBag.Years = years; #endregion #region Chart instantiation Highcharts columnChart = new Highcharts("columnchart"); Highcharts barChart = new Highcharts("barchart"); Highcharts areaChart = new Highcharts("areaChart"); Highcharts lineChart = new Highcharts("lineChart"); Highcharts areasplineChart = new Highcharts("areasplineChart"); Highcharts splineChart = new Highcharts("splineChart"); Highcharts pieChart = new Highcharts("pieChart"); Highcharts scatterChart = new Highcharts("scatterChart"); #endregion #region Charts List var charts = new ChartsModel { ColumnChart = columnChart, BarChart = barChart, AreaChart = areaChart, LineChart = lineChart, AreasplineChart = areasplineChart, SplineChart = splineChart, PieChart = pieChart, ScatterChart = scatterChart }; #endregion IQueryable <Reservation> revs = context.Reservations.Where(r => r.Driver == driver && (r.Status == "Ended" || r.Status == "Ended & Feedback Left") && r.PickUpDate.Year.ToString() == year); if (revs != null && revs.Count() != 0) { #region Get the months List <DriverMonthlyRev> monthlyRevs = new List <DriverMonthlyRev>(); List <string> months = new List <string>(); foreach (var rev in revs) { if (!months.Contains(GetMonth(rev.PickUpDate.Month))) { months.Add(GetMonth(rev.PickUpDate.Month)); monthlyRevs.Add(new DriverMonthlyRev() { Month = rev.PickUpDate.Month, MonthInText = GetMonth(rev.PickUpDate.Month) }); } } #endregion #region Get the daily revenue for the driver foreach (var rev in revs) { foreach (var month in months) { if (GetMonth(rev.PickUpDate.Month) == month) { foreach (var revM in monthlyRevs) { if (GetMonth(revM.Month) == month) { // Add the charge to the monthly income and commission revM.Income += rev.Charge; revM.Commission += rev.Charge * 90 / 100; } } } } } #endregion #region Get monthly income and commission list List <object> income = new List <object>(); List <object> commision = new List <object>(); foreach (var rev in monthlyRevs) { income.Add(rev.Income); commision.Add(rev.Commission); } #endregion #region Initialization columnChart = InitializeChart(columnChart, ChartTypes.Column, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); barChart = InitializeChart(barChart, ChartTypes.Bar, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); areaChart = InitializeChart(areaChart, ChartTypes.Area, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); lineChart = InitializeChart(lineChart, ChartTypes.Line, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); areasplineChart = InitializeChart(areasplineChart, ChartTypes.Areaspline, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); splineChart = InitializeChart(splineChart, ChartTypes.Spline, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); pieChart = InitializeChart(pieChart, ChartTypes.Pie, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); scatterChart = InitializeChart(scatterChart, ChartTypes.Scatter, driver, months, commision, income, "Income", "Monthly Income & Commission Analysis", "Month", "Income & Commission", "Commission"); ViewBag.Charts = true; #endregion } return(View(charts)); }
public ActionResult ExternalAffairs(RADViewModel model) { var obj = new Apt(); obj.categoryID = model.categoryID; obj.subcategoryID = model.subcategoryID; obj.fiscalYearID = model.fiscalYearID; //obj.QuarterOptionID = model.quarteroptionID; //ENROLLMENT CHART Highcharts apptoJaxChart = new Highcharts("apptoJaxChart"); apptoJaxChart.InitChart(new Chart() { Type = DotNet.Highcharts.Enums.ChartTypes.Column, BackgroundColor = new BackColorOrGradient(System.Drawing.Color.White), Style = "fontWeight: 'bold', fontSize: '17px'", BorderColor = System.Drawing.Color.Gray, BorderRadius = 0, BorderWidth = 2 }); apptoJaxChart.SetTitle(new Title() { Text = " " }); // Create objects for X - Axis object[] Q1Goal = Q1GoalsCityCouncil(obj.subcategoryID, obj.categoryID, obj.fiscalYearID).Cast <object>().ToArray(); object[] Q1Actual = Q1ActualCityCouncil(obj.subcategoryID, obj.categoryID, obj.fiscalYearID).Cast <object>().ToArray(); //object[] xaxis = Q2GoalsCityCouncil(obj.subcategoryID, obj.categoryID, obj.fiscalYearID).cast<object>().ToArray(); //object[] Q2Actual = Q2GoalCityCouncil().cast<object>().ToArray(); //object[] Q3Goal = Q3GoalCityCouncil().cast<object>().ToArray(); //object[] Q3Actual = Q3GoalCityCouncil().cast<object>().ToArray(); //object[] Q4Goal = Q4GoalCityCouncil().cast<object>().ToArray(); //object[] Q4Actual = Q4GoalCityCouncil().cast<object>().ToArray(); // Create objects for Y - Axis string[] Quarters = Qter().ToArray(); apptoJaxChart.SetXAxis(new XAxis() { Type = AxisTypes.Category, Title = new XAxisTitle() { Text = "Goal vs Actual", Style = "fontWeight: 'bold', fontSize: '17px'" }, Categories = Quarters }); apptoJaxChart.SetYAxis(new YAxis() { Title = new YAxisTitle() { Text = "# Of Applications", Style = "fontWeight: 'bold', fontSize: '17px'" }, ShowFirstLabel = true, ShowLastLabel = true, Min = 0 }); apptoJaxChart.SetLegend(new Legend { Enabled = true, BorderRadius = 6, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6")) }); // Set series for quarterly goals + actuals apptoJaxChart.SetSeries(new Series[] { new Series { Name = "Q1 GOAL", Data = new Data(Q1Goal), Color = ColorTranslator.FromHtml("#3EC2CF") }, new Series { Name = "Q1 ACTUAL", Data = new Data(Q1Actual), Color = ColorTranslator.FromHtml("#bedde0") } }); ChartModel modelChart = new ChartModel(); modelChart.Chart6 = apptoJaxChart; return(View(apptoJaxChart)); }
/// <summary> /// POST: Driver Status percentage Charts /// </summary> /// <returns></returns> public ActionResult DriverStatusCharts(string driver, DateTime?fromDate, DateTime?toDate) { ViewBag.Drivers = new SelectList(context.Users.Where(u => u.UserType == "Driver"), "Username", "Username"); #region Chart instantiation Highcharts columnChart = new Highcharts("columnchart"); Highcharts barChart = new Highcharts("barchart"); Highcharts areaChart = new Highcharts("areaChart"); Highcharts lineChart = new Highcharts("lineChart"); Highcharts areasplineChart = new Highcharts("areasplineChart"); Highcharts splineChart = new Highcharts("splineChart"); Highcharts pieChart = new Highcharts("pieChart"); Highcharts scatterChart = new Highcharts("scatterChart"); #endregion #region Charts List var charts = new ChartsModel { ColumnChart = columnChart, BarChart = barChart, AreaChart = areaChart, LineChart = lineChart, AreasplineChart = areasplineChart, SplineChart = splineChart, PieChart = pieChart, ScatterChart = scatterChart }; #endregion IQueryable <DriverStatusCount> statusCounts = context.DriverStatusCounts.Where(d => d.Driver == driver && d.Date >= fromDate && d.Date <= toDate); if (statusCounts != null) { #region Get the dates List <DriverStatusPercentage> statuspercentages = new List <DriverStatusPercentage>(); List <string> dates = new List <string>(); foreach (var status in statusCounts) { if (status.Date == null) { status.Date = DateTime.Now.Date; } if (!dates.Contains(status.Date.ToShortDateString())) { dates.Add(status.Date.ToShortDateString()); statuspercentages.Add(new DriverStatusPercentage() { Date = status.Date }); } } #endregion #region Get the daily status percentage for the driver foreach (var status in statusCounts) { foreach (var day in dates) { if (status.Date.ToShortDateString() == day) { foreach (var percentM in statuspercentages) { if (percentM.Date.ToShortDateString() == day) { // Get status percentage int value = status.OnlineCount + status.OfflineCount; percentM.OnlinePercentage = status.OnlineCount * 100 / value; percentM.OfflinePercentage = status.OfflineCount * 100 / value; } } } } } #endregion #region Get daily revenue list List <object> onlineState = new List <object>(); List <object> offlineState = new List <object>(); foreach (var percentage in statuspercentages) { onlineState.Add(percentage.OnlinePercentage); offlineState.Add(percentage.OfflinePercentage); } #endregion #region Initialization columnChart = InitializeChart(columnChart, ChartTypes.Column, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); barChart = InitializeChart(barChart, ChartTypes.Bar, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); areaChart = InitializeChart(areaChart, ChartTypes.Area, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); lineChart = InitializeChart(lineChart, ChartTypes.Line, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); areasplineChart = InitializeChart(areasplineChart, ChartTypes.Areaspline, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); splineChart = InitializeChart(splineChart, ChartTypes.Spline, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); pieChart = InitializeChart(pieChart, ChartTypes.Pie, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); scatterChart = InitializeChart(scatterChart, ChartTypes.Scatter, driver, dates, onlineState, offlineState, "Offline percentage", "Driver Status Analysis", "Date", "percentage", "Online percentage"); ViewBag.Charts = true; #endregion } return(View(charts)); }
public ActionResult BasicColumn() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Monthly Average Rainfall" }) .SetSubtitle(new Subtitle { Text = "Source: WorldClimate.com" }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetYAxis(new YAxis { Min = 0, Title = new YAxisTitle { Text = "Rainfall (mm)" } }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Left, VerticalAlign = VerticalAligns.Top, X = 100, Y = 70, Floating = true, BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")), Shadow = true }) .SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.x +': '+ this.y +' mm'; }" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } }) .SetSeries(new[] { new Series { Name = "Tokyo", Data = new Data(new object[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }, new Series { Name = "London", Data = new Data(new object[] { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 }) }, new Series { Name = "New York", Data = new Data(new object[] { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 }) }, new Series { Name = "Berlin", Data = new Data(new object[] { 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1 }) } }); return(View(chart)); }
public static Highcharts WeeklyTotalOrders(List <object> ThisWeek, List <object> LastWeek, [Optional, DefaultParameterValue(null)] List <Object> lsYearAvg) { Highcharts Chart = new Highcharts("Chart") .InitChart(new Chart { Type = ChartTypes.Line, Width = 495, Height = 270 }) .SetTitle(new Title { Text = "TOTAL ORDERS BY WEEK", Style = "color: 'Black', fontBold: 'true', fontSize: '15px',fontFamily: 'Arial'" }).SetExporting(new Exporting { Enabled = false }) .SetXAxis(new XAxis { Categories = new string[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" }, Title = new XAxisTitle { Text = "" }, }).SetPlotOptions(new PlotOptions { Line = new PlotOptionsLine { DataLabels = new PlotOptionsLineDataLabels { Enabled = false, Y = -4, X = 10, Style = "fontSize: '10px' ,color: 'Black',fontFamily: 'Arial'" }, } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "" }, Min = 0, Max = 500, TickInterval = 100 }).SetCredits(new Credits { Enabled = false }) .SetSeries(new[] { new Series { Name = "This Week", Data = new Data(ThisWeek.ToArray()), Color = ColorTranslator.FromHtml("#70C133"), PlotOptionsLine = new PlotOptionsLine { LineWidth = 2, Marker = new PlotOptionsLineMarker { Radius = 2 } } }, new Series { Name = "Last Week", Data = new Data(LastWeek.ToArray()), Color = ColorTranslator.FromHtml("#FF8000"), PlotOptionsLine = new PlotOptionsLine { LineWidth = 2, Marker = new PlotOptionsLineMarker { Radius = 2 } } }, new Series { Name = "Avg this Year", Data = new Data(lsYearAvg.ToArray()), Color = ColorTranslator.FromHtml("#6E6E6E"), PlotOptionsLine = new PlotOptionsLine { LineWidth = 2, DashStyle = DashStyles.Dash, Marker = new PlotOptionsLineMarker { Radius = 2 } } } }); return(Chart); }
/// <summary> /// POST: DriverRevenueCharts /// </summary> /// <returns></returns> public ActionResult DriverRevenueCharts(string driver, DateTime?fromDate, DateTime?toDate) { ViewBag.Drivers = new SelectList(context.Users.Where(u => u.UserType == "Driver"), "Username", "Username"); #region Chart instantiation Highcharts columnChart = new Highcharts("columnchart"); Highcharts barChart = new Highcharts("barchart"); Highcharts areaChart = new Highcharts("areaChart"); Highcharts lineChart = new Highcharts("lineChart"); Highcharts areasplineChart = new Highcharts("areasplineChart"); Highcharts splineChart = new Highcharts("splineChart"); Highcharts pieChart = new Highcharts("pieChart"); Highcharts scatterChart = new Highcharts("scatterChart"); #endregion #region Charts List var charts = new ChartsModel { ColumnChart = columnChart, BarChart = barChart, AreaChart = areaChart, LineChart = lineChart, AreasplineChart = areasplineChart, SplineChart = splineChart, PieChart = pieChart, ScatterChart = scatterChart }; #endregion IQueryable <Reservation> revs = context.Reservations.Where(r => r.Driver == driver && (r.Status == "Ended" || r.Status == "Ended & Feedback Left") && r.PickUpDate >= fromDate && r.PickUpDate <= toDate); if (revs != null && revs.Count() != 0) { #region Get the dates List <DriverDailyRev> dailyRev = new List <DriverDailyRev>(); List <string> dates = new List <string>(); foreach (var rev in revs) { if (!dates.Contains(rev.PickUpDate.Date.ToShortDateString())) { dates.Add(rev.PickUpDate.Date.ToShortDateString()); dailyRev.Add(new DriverDailyRev() { Date = rev.PickUpDate.Date }); } } #endregion #region Get the daily revenue for the driver foreach (var rev in revs) { foreach (var day in dates) { if (rev.PickUpDate.Date.ToShortDateString() == day) { foreach (var revM in dailyRev) { if (revM.Date.Date.ToShortDateString() == day) { // Add the amount to the daily revenue revM.Amount += rev.Charge; } } } } } #endregion #region Get daily revenue list List <object> amount = new List <object>(); foreach (var rev in dailyRev) { amount.Add(rev.Amount); } #endregion #region Initialization columnChart = InitializeChart(columnChart, ChartTypes.Column, driver, dates, amount, null, null); barChart = InitializeChart(barChart, ChartTypes.Bar, driver, dates, amount, null, null); areaChart = InitializeChart(areaChart, ChartTypes.Area, driver, dates, amount, null, null); lineChart = InitializeChart(lineChart, ChartTypes.Line, driver, dates, amount, null, null); areasplineChart = InitializeChart(areasplineChart, ChartTypes.Areaspline, driver, dates, amount, null, null); splineChart = InitializeChart(splineChart, ChartTypes.Spline, driver, dates, amount, null, null); pieChart = InitializeChart(pieChart, ChartTypes.Pie, driver, dates, amount, null, null); scatterChart = InitializeChart(scatterChart, ChartTypes.Scatter, driver, dates, amount, null, null); ViewBag.Charts = true; #endregion } return(View(charts)); }
public ActionResult AreaWithNegativeValues() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Area }) .SetTitle(new Title { Text = "Area chart with negative values" }) .SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Grapes", "Bananas" } }) .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" }) .SetCredits(new Credits { Enabled = false }) .SetSeries(new[] { new Series { Name = "John", Data = new Data(new object[] { 5, 3, 4, 7, 2 }) }, new Series { Name = "Jane", Data = new Data(new object[] { 2, -2, -3, 2, 1 }) }, new Series { Name = "Joe", Data = new Data(new object[] { 3, 4, 4, -2, 5 }) } }); return View(chart); }
/// <summary> /// POST: Daily Distance Coverage Charts /// </summary> /// <returns></returns> public ActionResult DriverDistanceCharts(string driver, DateTime?fromDate, DateTime?toDate) { ViewBag.Drivers = new SelectList(context.Users.Where(u => u.UserType == "Driver"), "Username", "Username"); #region Chart instantiation Highcharts columnChart = new Highcharts("columnchart"); Highcharts barChart = new Highcharts("barchart"); Highcharts areaChart = new Highcharts("areaChart"); Highcharts lineChart = new Highcharts("lineChart"); Highcharts areasplineChart = new Highcharts("areasplineChart"); Highcharts splineChart = new Highcharts("splineChart"); Highcharts pieChart = new Highcharts("pieChart"); Highcharts scatterChart = new Highcharts("scatterChart"); #endregion #region Charts List var charts = new ChartsModel { ColumnChart = columnChart, BarChart = barChart, AreaChart = areaChart, LineChart = lineChart, AreasplineChart = areasplineChart, SplineChart = splineChart, PieChart = pieChart, ScatterChart = scatterChart }; #endregion IQueryable <Reservation> revs = context.Reservations.Where(r => r.Driver == driver && (r.Status == "Ended" || r.Status == "Ended & Feedback Left") && r.PickUpDate >= fromDate && r.PickUpDate <= toDate); if (revs != null && revs.Count() != 0) { #region Get the dates List <DriverDailyDist> dailyDist = new List <DriverDailyDist>(); List <string> dates = new List <string>(); foreach (var rev in revs) { if (!dates.Contains(rev.PickUpDate.Date.ToShortDateString())) { dates.Add(rev.PickUpDate.Date.ToShortDateString()); dailyDist.Add(new DriverDailyDist() { Date = rev.PickUpDate.Date }); } } #endregion #region Get the daily distance for the driver foreach (var rev in revs) { foreach (var day in dates) { if (rev.PickUpDate.Date.ToShortDateString() == day) { foreach (var distM in dailyDist) { if (distM.Date.Date.ToShortDateString() == day) { // Add the OnHire and Full distance to the daily distance coverage distM.OnHire += rev.OnHireDistance; if (rev.OverallDistance == null) { rev.OverallDistance = 0; } distM.Full += (decimal)rev.OverallDistance; } } } } } #endregion #region Get daily revenue list List <object> onHireDist = new List <object>(); List <object> fullDist = new List <object>(); foreach (var rev in dailyDist) { onHireDist.Add(rev.OnHire); fullDist.Add(rev.Full); } #endregion #region Initialization columnChart = InitializeChart(columnChart, ChartTypes.Column, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); barChart = InitializeChart(barChart, ChartTypes.Bar, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); areaChart = InitializeChart(areaChart, ChartTypes.Area, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); lineChart = InitializeChart(lineChart, ChartTypes.Line, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); areasplineChart = InitializeChart(areasplineChart, ChartTypes.Areaspline, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); splineChart = InitializeChart(splineChart, ChartTypes.Spline, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); pieChart = InitializeChart(pieChart, ChartTypes.Pie, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); scatterChart = InitializeChart(scatterChart, ChartTypes.Scatter, driver, dates, onHireDist, fullDist, "Full Distance", "Daily Distance Coverage Analysis", "Date", "On Hire & Full Distance (KM)", "On Hire Distance"); ViewBag.Charts = true; #endregion } return(View(charts)); }
public ActionResult CrosshairsWithBooleanValues() { Highcharts chart = new Highcharts("chart") .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }).SetTooltip(new Tooltip { Shared = true, Crosshairs = new Crosshairs(true, true), Enabled = true }); return View(chart); }
public Highcharts InitializeChart(Highcharts chart, ChartTypes type, string driver, List <string> xVal, List <object> yVal, List <object> yVal2, string series2, string title = "Daily Revenue Analysis", string xAxis = "Date", string yAxis = "Revenue", string series1 = "Revenue") { #region Get names and values into one array for the first series object[] names = xVal.ToArray(); object[] vals = yVal.ToArray(); object[,] namesAndVals = new object[names.Count(), 2]; for (int i = 0; i < names.Count(); i++) { namesAndVals[i, 0] = names[i]; namesAndVals[i, 1] = vals[i]; } #endregion #region Get names and values into one array for the second series object[] sNames = xVal.ToArray(); object[,] sNamesAndVals = new object[sNames.Count(), 2]; if (yVal2 != null) { object[] sVals = yVal2.ToArray(); for (int i = 0; i < sNames.Count(); i++) { sNamesAndVals[i, 0] = sNames[i]; sNamesAndVals[i, 1] = sVals[i]; } } #endregion // Chart basic customizations chart.InitChart(new Chart() { Type = type, BackgroundColor = new BackColorOrGradient(System.Drawing.Color.AntiqueWhite), Style = "fontWeight: 'bold', fontSize: '17px'", BorderColor = System.Drawing.Color.Orange, BorderRadius = 0, BorderWidth = 2, }); // Chart title chart.SetTitle(new Title() { Text = title }); // Chart subtitle chart.SetSubtitle(new Subtitle() { Text = $"For | { driver }" }); // Set chart XAxis chart.SetXAxis(new XAxis() { Type = AxisTypes.Category, Title = new XAxisTitle() { Text = xAxis, Style = "fontWeight: 'bold', fontSize: '17px'" }, Categories = xVal.ToArray() }); // Set chart YAxis chart.SetYAxis(new YAxis() { Title = new YAxisTitle() { Text = yAxis, Style = "fontWeight: 'bold', fontSize: '17px'" }, ShowFirstLabel = true, ShowLastLabel = true, Min = 0 }); // Set Plot Options for Pie chart chart.SetPlotOptions(new PlotOptions() { Pie = new PlotOptionsPie() { ShowInLegend = true, AllowPointSelect = true, Cursor = Cursors.Default, DataLabels = new PlotOptionsPieDataLabels { // return both name and percentage Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %'; }" } } }); // Set chart series values if (type == ChartTypes.Pie || series2 == null) { chart.SetSeries(new Series[] { new Series { Name = series1, Data = new Data(namesAndVals), Color = System.Drawing.Color.Orange }, }); } else if (series2 != null) { chart.SetSeries(new Series[] { new Series { Name = series2, Data = new Data(sNamesAndVals), Color = System.Drawing.Color.DodgerBlue }, new Series { Name = series1, Data = new Data(namesAndVals), Color = System.Drawing.Color.Orange }, }); } return(chart); }
public ActionResult CustomTheme() { Highcharts chart = new Highcharts("chart") .SetOptions(new GlobalOptions { Colors = new[] { ColorTranslator.FromHtml("#DDDF0D"), ColorTranslator.FromHtml("#7798BF"), ColorTranslator.FromHtml("#55BF3B"), ColorTranslator.FromHtml("#DF5353"), ColorTranslator.FromHtml("#DDDF0D"), ColorTranslator.FromHtml("#aaeeee"), ColorTranslator.FromHtml("#ff0066"), ColorTranslator.FromHtml("#eeaaee") } }) .InitChart(new Chart { BorderWidth = 0, BorderRadius = 15, PlotBackgroundColor = null, PlotShadow = false, PlotBorderWidth = 0, BackgroundColor = new BackColorOrGradient(new Gradient { LinearGradient = new[] { 0, 0, 0, 400 }, Stops = new object[,] { { 0, Color.FromArgb(255, 96, 96, 96) }, { 1, Color.FromArgb(255, 16, 16, 16) } } }) }) .SetTitle(new Title { Text = "Gray Theme", Style = "color: '#FFF', font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" }) .SetSubtitle(new Subtitle { Style = "color: '#DDD', font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" }) .SetXAxis(new XAxis { GridLineWidth = 0, LineColor = ColorTranslator.FromHtml("#999"), TickColor = ColorTranslator.FromHtml("#999"), Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }, Labels = new XAxisLabels { Style = "color: '#999', fontWeight: 'bold'" }, Title = new XAxisTitle { Style = "color: '#AAA', font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" } }) .SetYAxis(new YAxis { AlternateGridColor = null, MinorTickInterval = null, GridLineColor = Color.FromArgb(255, 255, 255, 255), LineWidth = 0, TickWidth = 0, Labels = new YAxisLabels { Style = "color: '#999',fontWeight: 'bold'" }, Title = new YAxisTitle { Style = "color: '#AAA',font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" } }) .SetLegend(new Legend { ItemStyle = "color: '#CCC'", ItemHoverStyle = "color: '#FFF'", ItemHiddenStyle = "color: '#333'" }) .SetLabels(new Labels { Style = "color: '#CCC'" }) .SetTooltip(new Tooltip { BorderWidth = 0, Style = "color: '#FFF'", BackgroundColor = new BackColorOrGradient(new Gradient { LinearGradient = new[] { 0, 0, 0, 50 }, Stops = new object[,] { { 0, Color.FromArgb(200, 96, 96, 96) }, { 1, Color.FromArgb(200, 16, 16, 16) } } }) }) .SetPlotOptions(new PlotOptions { Line = new PlotOptionsLine { DataLabels = new PlotOptionsLineDataLabels { Color = ColorTranslator.FromHtml("#CCC") }, Marker = new PlotOptionsLineMarker { LineColor = ColorTranslator.FromHtml("#333") } }, Spline = new PlotOptionsSpline { Marker = new PlotOptionsSplineMarker { LineColor = ColorTranslator.FromHtml("#333") } }, Scatter = new PlotOptionsScatter { Marker = new PlotOptionsScatterMarker { LineColor = ColorTranslator.FromHtml("#333") } } }) .SetNavigation(new Navigation { ButtonOptions = new NavigationButtonOptions { SymbolStroke = ColorTranslator.FromHtml("#C0C0C0") } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(chart); }
/* Method which creates a bar chart from the provided viewmodel object information*/ public ProjectSpendView BarChartForProjectSpendViewModel(ProjectSpendView viewModel) { List <Component> components = new List <Component>(); // creates list to store component objects /* Method which adds components within orders which are approved to the list*/ foreach (Order o in viewModel.Orders) { if (o.IsApproved == true) { components.AddRange(o.Components); } } var pricesList = new List <object>(); // a price list to store prices var categoryList = new List <string>(); // a category list to store categories /* Method to add prices of components to the pricelist and the names of components in categories */ foreach (Component c in components) { pricesList.Add(new object[] { c.Price }); categoryList.Add(c.Name); } object[] prices = pricesList.ToArray(); /* Creates array and passes information from prices list to array*/ string[] categories = categoryList.ToArray(); /* Creates category array and passes categories list to array */ Highcharts barChart = new Highcharts("barChart") //Initalises barchart .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Margin = new[] { 50, 50, 100, 80 }, Width = 400, Height = 300 }) // Size parameters .SetTitle(new Title { Text = "Purchases" }) // sets the title of chart .SetXAxis(new XAxis // sets the x axis information { Categories = categories, Labels = new XAxisLabels { Rotation = -45, Align = HorizontalAligns.Right, Style = "font: 'normal 13px Verdana, sans-serif'" } }) .SetYAxis(new YAxis // sets the y axis information { Min = 0, Max = (double)viewModel.Budget + (double)viewModel.TotalOrdersCost, Title = new YAxisTitle { Text = "Cost" } }) .SetLegend(new Legend { Enabled = false }) .SetSeries(new Series // sets series information { Name = "Price", Data = new Data(prices), }); viewModel.BarChart = barChart; // passes it to viewmodel object return(viewModel); // returns a view model }
public ActionResult DisableAnimation() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "Disabled animation" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Animation = new Animation(false) } }) .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) }); return View(chart); }
// GET: Charts public ActionResult _UserPointsOfType(string userName) { var bets = db.Bets.Where(p => p.User.UserName == userName && p.Match.Date < DateTime.Now); int miss = 0; int hit = 0; int score = 0; foreach (Bet b in bets) { if (b.Match.Score != null) { int temp = b.GetPointsForThisMatch(); switch (temp / b.Match.Factor.Value) { case 1: { miss += temp; break; } case 5: { hit += temp; break; } case 25: { score += temp; break; } } } } string[] categories = new[] { "Nietrafione", "Rezultaty", "Wyniki" }; List <NumberAndName> data = new List <NumberAndName>(); data.Add(new NumberAndName(miss, categories[0])); data.Add(new NumberAndName(hit, categories[1])); data.Add(new NumberAndName(score, categories[2])); Highcharts chart = new Highcharts("chartUPoT") .InitChart(new Chart { PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = false }) .SetTitle(new Title { Text = "Rozkład punktów w zależności od rodzaju trafienia" }) .SetTooltip(new Tooltip { PointFormat = "<b>{point.name}</b>: {point.y:.0f} pts" }) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsPieDataLabels { Enabled = false, Format = "<b>{point.name}</b>: {point.y:.0f}", Style = "color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'" }, ShowInLegend = true } }) .SetSeries(new Series { Type = ChartTypes.Pie, Name = "Rozkład punktów", Data = new Data(new object[] { new object[] { data[0].Name, data[0].Number }, new object[] { data[1].Name, data[1].Number }, new object[] { data[2].Name, data[2].Number } }) }); return(View(chart)); }
public ActionResult EaseOutBounceEffect() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { Type = ChartTypes.Column }) .SetTitle(new Title { Text = "EaseOutBounce Effect" }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Animation = new Animation(new AnimationConfig { Duration = 2000, Easing = EasingTypes.EaseOutBounce }) } }) .SetXAxis(new XAxis { Categories = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" } }) .SetSeries(new Series { Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 111 }) }); return View(chart); }
public ActionResult CampaignStatsChart() { //set the query string to query the database to retreive the campaign data. //The query will return the campaign name and all of its stats string query = "SELECT Name, CPC, CTR, CVR " + "FROM CampaignModels " + "WHERE IsActive = 1 " + "ORDER BY Name DESC "; //Run the query and save the results as a campaign stats model(model specifically designed to hold the campaign and its statistics) IEnumerable <CampaignStatsModel> dataset = db.Database.SqlQuery <CampaignStatsModel>(query); //Pull the x axis (campaign name) from the data set and place them in an array b/c the chart will only accept array objects var xDataCampaigns = dataset.Select(i => i.Name).ToArray(); //Pull the y asix (CPC, CTR, CVR) from the data set and place them in an array var yDataCPC = dataset.Select(i => i.CPC).ToArray(); var yDataCTR = dataset.Select(i => i.CTR).ToArray(); var yDataCVR = dataset.Select(i => i.CVR).ToArray(); //The chart plugin will plot chart objects from 'Series' objects. //Declare a list of series objects to hold the chart data List <Series> dataSeries = new List <Series>(); //Declare a holder to hold each products data until it is added to the list of all products Series holder = new Series(); //Place each statistic into its proper series foreach (var i in xDataCampaigns) { //Pull the data and place it in a temporary placeholder of the 'Series' type object holder = new Series { Name = i, Data = new Data(new object[] { yDataCPC.ElementAt(Array.IndexOf(xDataCampaigns, i)), yDataCTR.ElementAt(Array.IndexOf(xDataCampaigns, i)), yDataCVR.ElementAt(Array.IndexOf(xDataCampaigns, i)) }) }; //Add the data to a list with all the other data gathered thus far dataSeries.Add(holder); } var chart = new Highcharts("chart") //define the type of chart .InitChart(new DotNet.Highcharts.Options.Chart { DefaultSeriesType = ChartTypes.Column }) //overall title of the chart .SetTitle(new Title { Text = "Campaign Statistics" }) //small label below the main title //.SetSubtitle(new Subtitle { Text = "" }) //load the X axis values .SetXAxis(new XAxis { Categories = new[] { "CPC", "CTR", "CVR" } }) //set the y title .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Value" } }) //Set the tool tip, which displays info about the column when the user hovers over it. .SetTooltip(new Tooltip { Enabled = true, Formatter = @"function() {return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; }" }) .SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { DataLabels = new PlotOptionsBarDataLabels { Enabled = true }, EnableMouseTracking = false } }) //load the y values //The data series must be converted from a list to an array before it can be used in a chart .SetSeries(dataSeries.ToArray()); return(View(chart)); }
public ActionResult ChartInFunction() { Highcharts chart = new Highcharts("newChart") .SetTitle(new Title { Text = "Chart inside JavaScript function" }) .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" }) .SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Bananas", "Plums" } }) .SetTooltip(new Tooltip { Formatter = "TooltipFormatter" }) .SetLabels(new Labels { Items = new[] { new LabelsItems { Html = "Total fruit consumption", Style = "left: '40px', top: '8px', color: 'black'" } } }) .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { Center = new[] { new PercentageOrPixel(100), new PercentageOrPixel(80) }, Size = new PercentageOrPixel(100), ShowInLegend = false, DataLabels = new PlotOptionsPieDataLabels { Enabled = false } } }) .SetSeries(new[] { new Series { Type = ChartTypes.Column, Name = "Jane", Data = new Data(new object[] { 3, 2, 1, 3, 4 }) }, new Series { Type = ChartTypes.Column, Name = "John", Data = new Data(new object[] { 2, 3, 5, 7, 6 }) }, new Series { Type = ChartTypes.Column, Name = "Joe", Data = new Data(new object[] { 4, 3, 3, 9, 0 }) }, new Series { Type = ChartTypes.Spline, Name = "Average", Data = new Data(new object[] { 3, 2.67, 3, 6.33, 3.33 }) }, new Series { Type = ChartTypes.Pie, Name = "Total consumption", Data = new Data(new[] { new Point { Name = "Jane", Y = 13, Color = Color.FromName("colors[5]") }, new Point { Name = "John", Y = 23, Color = Color.FromName("colors[6]") }, new Point { Name = "Joe", Y = 19, Color = Color.FromName("colors[7]") } } ) } }) .InFunction("DrawChart") .AddJavascripVariable("colors", "Highcharts.getOptions().colors") .AddJavascripFunction("TooltipFormatter", @"var s; if (this.point.name) { // the pie chart s = ''+ this.point.name +': '+ this.y +' fruits'; } else { s = ''+ this.x +': '+ this.y; } return s;"); return View(chart); }