I think I have most of it but the only thing showing up is the table. I've
included the previous hardcoded orgchart (what I want to replace), the .cs
page and a picture of the website without the actual orgchart just the
table, I want to eventually get rid of the table and just have the orgchart.
On Fri, Nov 14, 2014 at 1:46 PM, 'Sergey Grabkovsky' via Google
Visualization API <[email protected]> wrote:
> OK, so it looks like you'll mainly need to modify your Graph.aspx.cs file.
> Here are the things you'll need to change:
>
> 1. Line 41: This is the part that tells it which package(s) to load.
> You need to load the "orgchart" package, as per the documentation
> <https://developers.google.com/chart/interactive/docs/gallery/orgchart>
> page I linked to in my last post. Change "corechart" to "orgchart" to load
> the orgchart package instead of the corechart package.
> 2. Line 46: These are the headers of your columns. Effectively, these
> are just the titles. I don't know if you're planning on using tooltips, but
> you'd have either two or three columns here. Look at the Data Format
>
> <https://developers.google.com/chart/interactive/docs/gallery/orgchart#Data_Format>
> section of the documentation for that. Play around with the jsfiddle
> example linked from the documentation page to help you decide.
> 3. Lines 50-51: This is where you're reading the actual data from the
> SQL response. You'll need to replace "Month", "Bolivia", etc. with whatever
> your column names are. *Make sure to only have as many items here as
> you have headers*. Otherwise, you'll get an error. Pay special
> attention to the quotes (the single ones—"[*'*"), since those will be
> surrounding your strings in the generated JavaScript, and if they're not
> there or are unmatched, that will cause errors. Note that there are no
> single quotes are row["Bolivia"]. This is because in this example, that
> datum is a number. *You will need to put quotes there, since OrgChart
> only takes strings*. So, for example, "[*'*" + row["Month"] + "*'*,*'*" +
> row["Bolivia"] + "*'*,*'*" + ...
> 4. Line 56: Most of the pie chart options don't apply to the org
> chart. You would clear this object and put your options (i.e. collapsible:
> true) here. Make sure to close all the braces.
> 5. Line 57: Instead of "ComboChart", you will need to write
> "OrgChart", since you want to construct an OrgChart, and not a ComboChart.
>
> All of that should get you started. I hope you have enough coding
> knowledge to not miss quotes and close all the braces, since computers are
> very picky about that.
>
> In my opinion, this code is poorly structured. Your chart logic should be
> in a JavaScript file, instead of being generated by an ASPX file. The ASPX
> file should only return JSON, which should be fetched by a query. You could
> also insert the JSON directly into the file, though I would personally
> discourage that.
>
> On Fri Nov 14 2014 at 3:17:44 PM Edward Sokolove <[email protected]>
> wrote:
>
>> Here are the code files that I got to work with their examples for a
>> graph but as you know I'd like it changed slightly to output to an
>> orgchart. Thanks for all of your help.
>>
>> On Fri, Nov 14, 2014 at 10:32 AM, Edward Sokolove <[email protected]>
>> wrote:
>>
>>> I'm really trying to find an example of how to connect a SQL Server DB
>>> to populate the orgChart. I've looked and have not found a good working
>>> example. I found a really good one for a pie chart but not exactly sure
>>> how to convert it to an orgchart. Any help would be greatly appreciated.
>>>
>>> On Monday, November 10, 2014 7:47:43 AM UTC-7, Edward Sokolove wrote:
>>>>
>>>> I wanted to know how I would integrate a recordset from a sql server
>>>> database? I'm creating an org chart. Also, how do I set options like
>>>> collapsible =true?
>>>>
>>> --
>>> You received this message because you are subscribed to a topic in the
>>> Google Groups "Google Visualization API" group.
>>> To unsubscribe from this topic, visit
>>> https://groups.google.com/d/topic/google-visualization-api/7R83Swnufm0/unsubscribe
>>> .
>>> To unsubscribe from this group and all its topics, send an email to
>>> [email protected].
>>>
>>
>>> To post to this group, send email to
>>> [email protected].
>>> Visit this group at
>>> http://groups.google.com/group/google-visualization-api.
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Visualization API" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected].
>> To post to this group, send email to
>> [email protected].
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Google Visualization API" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/7R83Swnufm0/unsubscribe
> .
> To unsubscribe from this group and all its topics, send an email to
> [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
#region " [ Using ] "
using System;
using System.Web.UI;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Text;
#endregion
public partial class Graph : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Bind Gridview
BindGvData();
// Bind Charts
BindChart();
}
}
private void BindGvData()
{
gvData.DataSource = GetChartData();
gvData.DataBind();
}
private void BindChart()
{
DataTable dsChartData = new DataTable();
StringBuilder strScript = new StringBuilder();
try
{
dsChartData = GetChartData();
strScript.Append(@"<script type='text/javascript'>
google.load('visualization', '1', {packages:
['orgchart']});</script>
<script type='text/javascript'>
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Name', 'Manager', 'ToolTip']
");
foreach (DataRow row in dsChartData.Rows)
{
strScript.Append("data.addRows [{ v: '" + row["Name"] + "'f:
'" + row["Name"] + "}'," +
row["Manager"] + "," + row["Tooltip"] + "],");
}
strScript.Remove(strScript.Length - 1, 1);
strScript.Append("]);");
strScript.Append("var options = { allowCollapse: true, allowHtml:
true, size: 'small'};");
strScript.Append(" var chart = new
google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, options); } google.setOnLoadCallback(drawVisualization);");
strScript.Append(" </script>");
ltScripts.Text = strScript.ToString();
}
catch
{
}
finally
{
dsChartData.Dispose();
strScript.Clear();
}
}
/// <summary>
/// fetch data from mdf file saved in app_data
/// </summary>
/// <returns>DataTable</returns>
private DataTable GetChartData()
{
DataSet dsData = new DataSet();
try
{
SqlConnection sqlCon = new
SqlConnection(ConfigurationManager.ConnectionStrings["JPPSONCConnectionString1"].ConnectionString);
SqlDataAdapter sqlCmd = new SqlDataAdapter("GetData", sqlCon);
sqlCmd.SelectCommand.CommandType = CommandType.StoredProcedure;
sqlCon.Open();
sqlCmd.Fill(dsData);
sqlCon.Close();
}
catch
{
throw;
}
return dsData.Tables[0];
}
}
