Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(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.WebApi().Controller("WorldPopulationData"))
.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.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult ChartsDrillDown() {
return View();
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web.Http;
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class WorldPopulationDataController : ApiController {
[HttpGet]
public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(SampleData.WorldPopulationData, loadOptions));
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.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;
}
Bind to Data
This demo binds the drill-down chart to an array of objects. To visualize hierarchical data in the drill-down chart, filter the data source by the parentID for different drill-down views in the filterData function.
Implement View Navigation
To navigate from the main view to a detailed view, filter the data source by a different parentID in the onPointClick event handler. To navigate back, click the Back button. This action resets the data source filter. Use the isFirstLevel flag to distinguish views.
Customize the Appearance
Use the customizePoint function to change the individual point properties. This function returns an object with properties that should be changed for a certain point. In this demo, this function changes the color and hoverStyle properties.