HeatMap Chart / Data Binding / JSON Row

Blazor HeatMap Chart Example - JSON Row Data Binding Support

Loading Syncfusion Blazor Server Demos…

This sample visualizes the overall Olympic medals won by countries in all summer Olympic events from 2000 to 2016, using JSON-formatted row data.

JSON Data Binding - This example demonstrates how to bind JSON data and configure the Heatmap using data adaptor support. You can bind JSON data with information for each row using:

  • The IsJsonData property to enable JSON data mode
  • The AdaptorType property to specify the appropriate data adaptor type for row-based data

Row Data Mapping - For row JSON data, the row header is mapped using the XDataMapping property, which identifies each row's label or identifier in the JSON structure.

Data Organization - This row-based approach is ideal when your data is organized with records as rows and properties as columns, making it intuitive for datasets structured around entities or categories.

Interactive Features - The tooltip is enabled in this example. Hover the mouse over a data point or tap on touch-enabled devices to view medal counts by country and Olympic year.