@(Html.DevExtreme().Chart()
.ID("chart")
.Series(s => {
s.Add().ArgumentField("Arg")
.ValueField("Val").Type(SeriesType.Bar).TagField("ParentID");
})
.Title("The Most Populated Countries by Continents")
.ValueAxis(
a => a.Add()
.ShowZero(false)
)
.CustomizePoint("customizePoint")
.Legend(l => l.Visible(false))
.DataSource(d => d.Mvc().Controller("WorldPopulationData").LoadAction("Get"))
.DataSourceOptions(o => o.Filter("['ParentID', '']"))
.OnPointClick("pointClickHandler")
)
<div class="button-container">
@(Html.DevExtreme().Button()
.ID("backButton")
.Text("Back")
.Icon("chevronleft")
.Visible(false)
.OnClick("buttonClickHandler")
)
</div>
<script>
var isFirstLevel = true,
colors = ["#6babac", "#e55253"],
chartContainer;
$(function () {
chartContainer = $("#chart");
addPointerCursor();
});
function customizePoint() {
var pointSettings = {
color: colors[Number(isFirstLevel)]
};
if (!isFirstLevel) {
pointSettings.hoverStyle = {
hatching: "none"
};
}
return pointSettings;
}
function buttonClickHandler() {
if (!isFirstLevel) {
isFirstLevel = true;
addPointerCursor();
refreshDataSource("");
this.option("visible", false);
}
}
function pointClickHandler(e) {
if (isFirstLevel) {
isFirstLevel = false;
removePointerCursor(chartContainer);
refreshDataSource(e.target.originalArgument);
$("#backButton")
.dxButton("instance")
.option("visible", true);
}
}
function refreshDataSource(argument) {
var dataSource = chartContainer.dxChart("instance").getDataSource();
dataSource.filter(["ParentID", argument]);
dataSource.load();
}
function addPointerCursor() {
chartContainer.addClass("pointer-on-bars");
}
function removePointerCursor() {
chartContainer.removeClass("pointer-on-bars");
}
</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 ChartsDrillDown() {
return View();
}
}
}
using System;
using System.Linq;
using System.Collections.Generic;
using System.Net.Http;
using Microsoft.AspNetCore.Mvc;
using DevExtreme.AspNet.Mvc;
using DevExtreme.AspNet.Data;
using DevExtreme.NETCore.Demos.Models.SampleData;
namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers {
[Route("api/[controller]")]
public class WorldPopulationDataController : Controller {
[HttpGet]
public object Get(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.WorldPopulationData, loadOptions);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<WorldPopulationDataItem> WorldPopulationData = new[] {
new WorldPopulationDataItem { Arg= "Asia", Val= 3007613498, ParentID= "" },
new WorldPopulationDataItem { Arg= "North America", Val= 493603615, ParentID= "" },
new WorldPopulationDataItem { Arg= "Europe", Val= 438575293, ParentID= "" },
new WorldPopulationDataItem { Arg= "Africa", Val= 381331438, ParentID= "" },
new WorldPopulationDataItem { Arg= "South America", Val= 331126555, ParentID= "" },
new WorldPopulationDataItem { Arg= "Nigeria", Val= 181562056, ParentID= "Africa" },
new WorldPopulationDataItem { Arg= "Egypt", Val= 88487396, ParentID= "Africa" },
new WorldPopulationDataItem { Arg= "Congo", Val= 77433744, ParentID= "Africa" },
new WorldPopulationDataItem { Arg= "Morocco", Val= 33848242, ParentID= "Africa" },
new WorldPopulationDataItem { Arg= "China", Val= 1380083000, ParentID= "Asia" },
new WorldPopulationDataItem { Arg= "India", Val= 1306687000, ParentID= "Asia" },
new WorldPopulationDataItem { Arg= "Pakistan", Val= 193885498, ParentID= "Asia" },
new WorldPopulationDataItem { Arg= "Japan", Val= 126958000, ParentID= "Asia" },
new WorldPopulationDataItem { Arg= "Russia", Val= 146804372, ParentID= "Europe" },
new WorldPopulationDataItem { Arg= "Germany", Val= 82175684, ParentID= "Europe" },
new WorldPopulationDataItem { Arg= "Turkey", Val= 79463663, ParentID= "Europe" },
new WorldPopulationDataItem { Arg= "France", Val= 66736000, ParentID= "Europe" },
new WorldPopulationDataItem { Arg= "United Kingdom", Val= 63395574, ParentID= "Europe" },
new WorldPopulationDataItem { Arg= "United States", Val= 325310275, ParentID= "North America" },
new WorldPopulationDataItem { Arg= "Mexico", Val= 121005815, ParentID= "North America" },
new WorldPopulationDataItem { Arg= "Canada", Val= 36048521, ParentID= "North America" },
new WorldPopulationDataItem { Arg= "Cuba", Val= 11239004, ParentID= "North America" },
new WorldPopulationDataItem { Arg= "Brazil", Val= 205737996, ParentID= "South America" },
new WorldPopulationDataItem { Arg= "Colombia", Val= 48400388, ParentID= "South America" },
new WorldPopulationDataItem { Arg= "Venezuela", Val= 30761000, ParentID= "South America" },
new WorldPopulationDataItem { Arg= "Peru", Val= 28220764, ParentID= "South America" },
new WorldPopulationDataItem { Arg= "Chile", Val= 18006407, ParentID= "South America" }
};
}
}
#chart {
height: 440px;
width: 100%;
}
#chart.pointer-on-bars .dxc-series rect {
cursor: pointer;
}
.button-container {
text-align: center;
height: 40px;
position: absolute;
top: 7px;
left: 0px;
}