@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s
.ArgumentField("Year")
.ValueField("Place")
.Type(SeriesType.Spline)
.Point(p => p.Visible(false))
)
.Export(e => e
.Enabled(true)
.Formats(new[] {
ExportFormat.PNG,
ExportFormat.PDF,
ExportFormat.JPEG,
ExportFormat.GIF,
ExportFormat.SVG
})
)
.CustomizePoint(@<text>
function() {
if(this.value == 1) {
return { image: { url: "../../images/Charts/PointImage/icon-medal-gold.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 2) {
return { image: { url: "../../images/Charts/PointImage/icon-medal-silver.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 3) {
return { image: { url: "../../images/Charts/PointImage/icon-medal-bronse.png", width: 20, height: 20 }, visible: true };
}
}
</text>)
.Series(s => s.Add().Color("#888888"))
.Title(t => t.Text("Canadian Men’s National Ice Hockey Team\n at the World Championships"))
.Legend(l => l.Visible(false))
.ArgumentAxis(a => a
.Grid(g => g.Visible(true))
.Label(l => l
.Format(f => f
.Type(Format.Decimal)
)
)
.AllowDecimals(false)
.AxisDivisionFactor(60)
)
.ValueAxis(a => a
.Add()
.Grid(g => g.Visible(false))
.Inverted(true)
.Label(l => l
.CustomizeText(@<text>
function() {
if(this.valueText == 1) {
return this.valueText + "st place";
} else if(this.valueText == 2) {
return this.valueText + "nd place";
} else if(this.valueText == 3) {
return this.valueText + "rd place";
} else {
return this.valueText + "th place";
}
}
</text>)
)
)
.DataSource(new[] {
new { Year = 1977, Place = 4 }, new { Year = 1978, Place = 3 }, new { Year = 1979, Place = 4 },
new { Year = 1981, Place = 4 }, new { Year = 1982, Place = 3 }, new { Year = 1983, Place = 3 },
new { Year = 1985, Place = 2 }, new { Year = 1986, Place = 3 }, new { Year = 1987, Place = 4 },
new { Year = 1989, Place = 2 }, new { Year = 1990, Place = 4 }, new { Year = 1991, Place = 2 },
new { Year = 1992, Place = 8 }, new { Year = 1993, Place = 4 }, new { Year = 1994, Place = 1 },
new { Year = 1995, Place = 3 }, new { Year = 1996, Place = 2 }, new { Year = 1997, Place = 1 },
new { Year = 1998, Place = 6 }, new { Year = 1999, Place = 4 }, new { Year = 2000, Place = 4 },
new { Year = 2001, Place = 5 }, new { Year = 2002, Place = 6 }, new { Year = 2003, Place = 1 },
new { Year = 2004, Place = 1 }, new { Year = 2005, Place = 2 }, new { Year = 2006, Place = 4 },
new { Year = 2007, Place = 1 }, new { Year = 2008, Place = 2 }, new { Year = 2009, Place = 2 },
new { Year = 2010, Place = 7 }, new { Year = 2011, Place = 5 }, new { Year = 2012, Place = 5 },
new { Year = 2013, Place = 5 }
})
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult PointImage() {
return View();
}
}
}
#chart {
height: 440px;
}