Skip to content

Commit 6a9100b

Browse files
github-actions[bot]KB Bot
authored and
P1l3T0
committed
Added new kb article htmlchart-create-scrollable-legend (#667)
Co-authored-by: KB Bot <[email protected]>
1 parent 660df4b commit 6a9100b

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed

‎knowledge-base/htmlchart-create-scrollable-legend.md

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Implementing a Scrollable Legend for RadHtmlChart in ASP.NET AJAX
3+
description: This article demonstrates how to create a custom, scrollable legend for RadHtmlChart when handling large amounts of data.
4+
type: how-to
5+
page_title: How to Create a Scrollable Legend for RadHtmlChart in ASP.NET AJAX Without KendoUI
6+
slug: htmlchart-create-scrollable-legend
7+
tags: radhtmlchart, asp.net ajax, legend, scrollable, custom legend
8+
res_type: kb
9+
ticketid: 1682206
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadHtmlChart for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>All</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When dealing with large amounts of data in RadHtmlChart, the chart and its legend may disappear or become unmanageable. Additionally, there's a need to have a legend with a scrollbar at the bottom without relying on external libraries like KendoUI. This knowledge base article also answers the following questions:
30+
31+
- How can I make a legend with a scrollbar for RadHtmlChart?
32+
- How to manage large data sets in RadHtmlChart without losing the chart or the legend?
33+
- How to implement a custom legend for RadHtmlChart that is scrollable?
34+
35+
## Solution
36+
To create a custom, scrollable legend for RadHtmlChart, follow the steps below:
37+
38+
1. Ensure your RadHtmlChart is properly configured in your ASPX page. The legend visibility in the chart settings must be set to `false` since we are implementing an external legend.
39+
40+
2. Include a `div` element in your HTML markup where the custom legend will be rendered. This div will be made scrollable through CSS.
41+
42+
3. Implement JavaScript logic to dynamically create the legend based on the chart data. This includes creating legend items for each series item in the chart, handling hover effects to highlight corresponding chart segments, and toggling series visibility upon clicking a legend item.
43+
44+
4. Style the legend container to be scrollable and adjust the styling of legend items to match your design requirements.
45+
46+
Here is an example implementation:
47+
48+
````HTML
49+
<div id="legend"></div>
50+
51+
<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true" Skin="Silk">
52+
<ChartTitle Text="Browser Usage for October 2021">
53+
<Appearance Align="Center" Position="Top">
54+
</Appearance>
55+
</ChartTitle>
56+
<Legend>
57+
<Appearance Position="Right" Visible="false">
58+
</Appearance>
59+
</Legend>
60+
<PlotArea>
61+
<Series>
62+
<telerik:PieSeries StartAngle="90">
63+
<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
64+
</LabelsAppearance>
65+
<TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
66+
<SeriesItems>
67+
<telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Chrome" Y="64.67"></telerik:PieSeriesItem>
68+
<telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Internet Explorer" Y="0.61"></telerik:PieSeriesItem>
69+
<telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Safari" Y="19.06"></telerik:PieSeriesItem>
70+
<telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Firefox" Y="3.66"></telerik:PieSeriesItem>
71+
<telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Opera" Y="2.36"></telerik:PieSeriesItem>
72+
<telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Samsung Internet" Y="2.81"></telerik:PieSeriesItem>
73+
<telerik:PieSeriesItem BackgroundColor="#222222" Exploded="false" Name="Edge" Y="3.11"></telerik:PieSeriesItem>
74+
<telerik:PieSeriesItem BackgroundColor="#111111" Exploded="false" Name="Others" Y="3.34"></telerik:PieSeriesItem>
75+
</SeriesItems>
76+
</telerik:PieSeries>
77+
</Series>
78+
</PlotArea>
79+
</telerik:RadHtmlChart>
80+
````
81+
82+
````JavaScript
83+
function pageLoadHandler() {
84+
let kendoChart = $find("<%= PieChart1.ClientID %>").get_kendoWidget();
85+
let series = kendoChart.options.series[0].data; // Assuming it's a Pie Chart
86+
let legendContainer = document.getElementById("legend");
87+
88+
// Clear previous legends
89+
legendContainer.innerHTML = "";
90+
91+
// Create legend items dynamically
92+
series.forEach((item, index) => {
93+
let legendItem = document.createElement("div");
94+
legendItem.className = "legend-item";
95+
96+
let marker = document.createElement("span");
97+
marker.className = "legend-marker";
98+
marker.style.background = item.color;
99+
100+
let label = document.createElement("span");
101+
label.textContent = item.category;
102+
103+
legendItem.appendChild(marker);
104+
legendItem.appendChild(label);
105+
legendContainer.appendChild(legendItem);
106+
107+
// Hover effect
108+
legendItem.addEventListener("mouseenter", function () {
109+
kendoChart.toggleHighlight(index, true);
110+
});
111+
112+
legendItem.addEventListener("mouseleave", function () {
113+
kendoChart.toggleHighlight(index, false);
114+
});
115+
116+
// Click event to toggle visibility
117+
legendItem.addEventListener("click", function () {
118+
let isVisible = kendoChart.options.series[0].data[index].visible !== false;
119+
120+
kendoChart.options.series[0].data[index].visible = !isVisible;
121+
marker.style.background = isVisible ? "grey" : item.color;
122+
kendoChart.refresh();
123+
});
124+
});
125+
}
126+
127+
Sys.Application.add_load(pageLoadHandler);
128+
````
129+
130+
````CSS
131+
#legend {
132+
display: flex;
133+
width: 300px;
134+
overflow-x: scroll; /* Make it scrollable */
135+
}
136+
137+
.legend-item {
138+
font: 12px sans-serif;
139+
margin: 5px;
140+
cursor: pointer;
141+
display: flex;
142+
align-items: center;
143+
}
144+
145+
.legend-marker {
146+
display: inline-block;
147+
width: 12px;
148+
height: 12px;
149+
margin-right: 5px;
150+
border-radius: 50%;
151+
}
152+
````
153+
154+
This solution provides a way to manage large data sets in RadHtmlChart by implementing a custom, scrollable legend without the need for KendoUI.
155+
156+
## See Also
157+
158+
- [RadHtmlChart Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/overview)
159+
- [Creating Custom HTML Elements with JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
160+
- [Managing Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

0 commit comments

Comments
 (0)