Before begin, I tested the following code on a C# project "not SharePoint related" and it works, I know a little about Sharepoint webpart development, but I don't understand why this code doesn't works in the webpart that I'm doing...
EDIT: script API added.:
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
I'm facing the following issue:
I'm developing a farm solution webpart that generates dynamically a Column Chart or a Pie Chart (according to selection of one of ListItem in RadioButtonList):
<asp:RadioButtonList ID="rbt_graphicType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbt_graphicType_SelectedIndexChanged">
<asp:ListItem Text="Meeting Type" Selected="True" /> <!--Column Chart-->
<asp:ListItem Text="Meeting Category" /> <!--Pie Chart-->
</asp:RadioButtonList>
When I say dynamically, I mean, I build Javascript code in a method and I call it in Page_Load event.
The javascript generated will be contained in the Panel control called "pnl_data" and the chart will be in "chart_div" div element.
<asp:Panel ID="pnl_data" runat="server">
</asp:Panel>
<div id="chart_div">
</div>
<asp:Label ID="MessageLabel" runat="server" />
The code-behind is simple (in my opinion).
/// <summary>
/// Page_Load.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
GenerateChart();
}
/// <summary>
/// SelectedIndexChanged event for call "GenerateChart" method.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void rbt_graphicType_SelectedIndexChanged(object sender, EventArgs e)
{
GenerateChart();
}
/// <summary>
/// Method called in Page_Load.
/// Generate a chart according to RadioButtonList selection.
/// </summary>
private void GenerateChart()
{
try
{
//Initialize variables.
string built_js = ""; //The "built_js" variable will hold the js generated in the folowing lines of code.
HtmlGenericControl html_js = new HtmlGenericControl("script");
pnl_data.Controls.Clear();
if (rbt_graphicType.Items[0].Selected)
{
//Build js code for generate Column Chart.
built_js += " \n google.load('visualization', '1', { 'packages': ['columnchart'] }); \n";
built_js += " \n";
built_js += " google.setOnLoadCallback(drawChart); \n";
built_js += " \n";
built_js += " function drawChart() { \n";
built_js += " var data = google.visualization.arrayToDataTable([ \n";
built_js += " ['Tipo de reunión No.1 33.5%', 'Tipo de reunión No.2 70%', 'Tipo de reunión No.3 58%', 'Tipo de reunión No.4 82%', 'Tipo de reunión No.5 44%'], \n";
built_js += " [33.5, '', '', '', ''], \n";
built_js += " ['', 70, '', '', ''], \n";
built_js += " ['', '', 58, '', ''], \n";
built_js += " ['', '', '', 82, ''], \n";
built_js += " ['', '', '', '', 44] \n";
built_js += " ]); \n";
built_js += " \n";
built_js += " var options = { \n";
built_js += " width: 600, \n";
built_js += " height: 300, \n";
built_js += " is3D: true, \n";
built_js += " title: '" + dd_salas.SelectedItem.Text + "', \n";
built_js += " bar: { groupWidth: '20%' }, \n";
built_js += " legendFontSize: '10', \n";
built_js += " min: 10, \n";
built_js += " max: 100 \n";
built_js += " }; \n";
built_js += " \n";
built_js += " var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); \n";
built_js += " chart.draw(data, options); \n";
built_js += " } \n";
//Show text for "check" which Chart was generated.
MessageLabel.Text = "Column Chart generated.<br/>";
}
if (rbt_graphicType.Items[1].Selected)
{
//Build js code for generate Pie Chart.
//...
//Show text for "check" which Chart was generated.
MessageLabel.Text = "Pie Chart generated.<br/>";
}
//Add javscript code to InnerHtml attribute and built the <script> tag correctly.
html_js.Attributes.Add("type", "text/javascript");
html_js.InnerHtml = built_js;
pnl_graficos.Controls.Add(html_js);
html_js = new HtmlGenericControl("script");
}
catch { MessageLabel = "Error in the ''GenerateChart'' method."; }
}
EDIT: The values of Charts may change according to selected item from DropDownList control (the items already has values and there's no point focused on DropDownList's items values) - my bad, I didn't added this code before the answer of @Rephistorch -.
EDIT: The javascript code for generate the charts might not be elegant but it's fully functional (I tested it in C# project - as I said at the beginning of my question - ).
<asp:Label ID="lbl_selRoom" Text="Select the room" />
<asp:DropDownList ID="dd_rooms" runat="server">
<asp:ListItem Text="Room 1" Selected="True" />
<asp:ListItem Text="Room 2" />
<asp:ListItem Text="Room 3" />
<asp:ListItem Text="Room 4" />
<asp:ListItem Text="Room 5" />
</asp:DropDownList>
The results obtained in the webpart deployed when I executed it shows only the sample text added on "MessageLabel" control and the Column Chart generated correctly (because the first element in the RadioButtonList is selected by default - I checked too putting the second element selected as default and the same situation happens - ).
I checked the console browser and there's no warning or error about js generated, however, when the selection changes, the chart code "even when the page reloads" doesn't change (still the Column Chart but no rendering, the "chart_div" element is empty).
I can share the js generated (and the C# sample code full), but the code is in spanish and I'm trying make the question the best understandable that I can.
