DevExtreme Chart can display custom images for series points. Specify the point.image object within common series or series settings to display these images.
This demo hides default point symbols and calls the customizePoint function to display images (based on point values).
@(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: "../../Content/images/Charts/PointImage/icon-medal-gold.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 2) {
return { image: { url: "../../Content/images/Charts/PointImage/icon-medal-silver.png", width: 20, height: 20 }, visible: true };
} else if(this.value == 3) {
return { image: { url: "../../Content/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.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult PointImage() {
return View();
}
}
}#chart {
height: 440px;
}