Charts - Point Image

@(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 }

    })

)

​