@{
var dataSource = new[] {
new { Name = "California", Population = 38802500, Capital = "Sacramento", Area = 423967 },
new { Name = "Texas", Population = 26956958, Capital = "Austin", Area = 695662 },
new { Name = "Florida", Population = 19893297, Capital = "Tallahassee", Area = 170312 },
new { Name = "New York", Population = 19746227, Capital = "Albany", Area = 141297 },
new { Name = "Illinois", Population = 12880580, Capital = "Springfield", Area = 149995 }
};
}
@(Html.DevExtreme().Chart()
.ID("chart")
.Title("Top 5 Most Populated States in US")
.Series(s => s
.Add()
.Type(SeriesType.Bar)
.ArgumentField("Name")
.ValueField("Population")
.Name("Population")
)
.CommonAnnotationSettings(c=>c.Series("Population")
.Type(AnnotationType.Custom)
.AllowDragging(true)
.Template(@<text>
<svg class='annotation'>
<image href="<%-getImagePath(argument)%>" width="60" height="40" />
<rect class="border" x="0" y="0" />
<text x="70" y="25" class="state"><%- argument %></text>
<text x="0" y="60">
<tspan class="caption">Capital:</tspan><tspan class="capital" dx="5"><%- data.Capital %></tspan><tspan dy="14" x="0" class="caption">Population:</tspan><tspan class="population" dx="5"><%- formatNumber(data.Population) %></tspan><tspan dy="14" x="0" class="caption">Area:</tspan><tspan class="area" dx="5"><%- formatNumber(data.Area) %></tspan><tspan dx="5">km</tspan><tspan class="sup" dy="-2">2</tspan>
</text>
</svg>
</text>))
.Annotations(a => {
foreach(var dataItem in dataSource) {
a.Add().Argument(dataItem.Name)
.Data(dataItem);
}
})
.Legend(l=>l.Visible(false))
.DataSource(dataSource)
)
<script>
var formatNumber = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format;
function getImagePath(argument) {
return '../../images/flags/' + argument.replace(/\s/, "") + ".svg";
}
</script>
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 CustomAnnotations() {
return View();
}
}
}
#chart {
height: 440px;
}
.annotation {
font-size: 12px;
}
.border {
width: 60px;
height: 40px;
stroke: rgba(191, 191, 191, 0.25);
stroke-width: 1px;
fill: transparent;
}
.state {
font-weight: 500;
font-size: 14px;
}
.caption {
font-weight: 500;
}
.sup {
font-size: 0.8em;
}