Looking for a solution to switch between two MS charts based on radio button selection using JavaScript, ASP.NET, and VB.
1) Problem solved: The radio buttons now alternate between the charts, but both are visible when the page loads. I want only one chart to be displayed initially.
2) The charts should replace each other in the same position. Currently, they are stacked vertically and leave white space when made invisible.
Check out the code below:
Chart Component
<table>
<tr>
<td>
<div id="HomeAutoContainer" runat="server">
<div id="BindsAuto" runat="server">
<asp:Chart ID="chTotalBindsAuto" runat="server" Height="230px" Width="280px">
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
<div id="BindsHome" runat="server">
<asp:Chart ID="chTotalBindsHome" runat="server" Height="230px" Width="280px">
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" align="center">
<asp:RadioButtonList ID="rdoBindsList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="Auto" Text="Auto" Selected="True">Auto</asp:ListItem>
<asp:ListItem Value="Home" Text="Home">Home</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
Page Load of the component
rdoBindsList.Attributes.Add("OnClick", "BindsAutoHomeSwitch('" + rdoBindsList.Items(0).ToString + "','" + BindsAuto.ClientID + "','" + BindsHome.ClientID + "' );")
JavaScript function
function BindsAutoHomeSwitch(rdoAutoHomeID, chTotalBindsAuto1, chTotalBindsHome1) {
var rdoAutoHome = document.getElementById("ctl00_ContentArea_AutoTotalBinds1_rdoBindsList_0");
var chTotalBindsHomeGraph = document.getElementById(chTotalBindsHome1);
var chTotalBindsAutoGraph = document.getElementById(chTotalBindsAuto1);
var selectedGraphValue
if (rdoAutoHome.checked) {
selectedGraphValue = "Auto"
}
else {
selectedGraphValue = "Home"
}
if (selectedGraphValue == "Home") {
chTotalBindsAutoGraph.style.visibility = "hidden";
chTotalBindsHomeGraph.style.visibility = "visible";
}
if (selectedGraphValue == "Auto") {
chTotalBindsAutoGraph.style.visibility = "visible";
chTotalBindsHomeGraph.style.visibility = "hidden";
}
}