Width Problem
108 views
Skip to first unread message
asgallant
Mar 25, 2013, 4:54:19 PM3/25/13
to google-visua...@googlegroups.com
Use the DataTable#setRowProperty to set the "style" property of each row and assign them a common width, like this:
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setRowProperty(i, 'style', 'width:150px;');
data.setRowProperty(i, 'style', 'width:150px;');
pankti shah
Mar 26, 2013, 9:39:53 AM3/26/13
to google-visua...@googlegroups.com
Hi thank you so much for reply.
but your code does not work for me.
I have attached image and please have a look.
I have give border=1 to table so you can clearly see that parent node are taking double width of child node in some case.
Please help me out. its urgent.
FYI. i have created dynamic chart and each element have below code.
info = "<table><tr><td style='text-align:left'> Name : Feldstein, Daniel A</td></tr>"
+ " <tr><td style='text-align:left'> Business Title : VP Of Operations </td></tr>"
+ "<tr><td style='text-align:left'> Location : Rockleigh - 7 Volvo </td></tr>"
+ "<tr><td style='text-align:left'>Email Id : <a href='mailto:dfeld...@crestron.com'>dfeld...@crestron.com</a> </td></tr>"
+ "<tr><td style='text-align:left'> Department : " + deptLevelTreeview.SelectedNode.Value + "</td></tr>"
+ " <tr><td style='text-align:left'> Phone No : 10214 </td></tr><table>";
Let me know if there is problem in code.
pankti shah
Mar 26, 2013, 9:41:10 AM3/26/13
to google-visua...@googlegroups.com
sorry forgot to attach image in last reply.
On Tuesday, March 26, 2013 9:39:53 AM UTC-4, pankti shah wrote:
On Tuesday, March 26, 2013 9:39:53 AM UTC-4, pankti shah wrote:
Hi thank you so much for reply.but your code does not work for me.I have attached image and please have a look.I have give border=1 to table so you can clearly see that parent node are taking double width of child node in some case.Please help me out. its urgent.FYI. i have created dynamic chart and each element have below code.
info = "<table><tr><td style='text-align:left'> Name : Feldstein, Daniel A</td></tr>"+ " <tr><td style='text-align:left'> Business Title : VP Of Operations </td></tr>"+ "<tr><td style='text-align:left'> Location : Rockleigh - 7 Volvo </td></tr>"
+ "<tr><td style='text-align:left'>Email Id : <a href='mailto:dfeldstein@crestron.com'>dfeldstein@crestron.com</a> </td></tr>"
+ "<tr><td style='text-align:left'> Department : " + deptLevelTreeview.SelectedNode.Value + "</td></tr>"+ " <tr><td style='text-align:left'> Phone No : 10214 </td></tr><table>";
Daniel LaLiberte
Mar 26, 2013, 10:06:30 AM3/26/13
to google-visua...@googlegroups.com
I added the following style:
.google-visualization-orgchart-node {
width: 200px;
}And all the nodes seemed to get changed correctly. Hope that helps.
dan
--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
pankti shah
Mar 26, 2013, 10:19:35 AM3/26/13
to google-visua...@googlegroups.com
hi thanks again but still it doesnot work for me.
On Tuesday, March 26, 2013 10:06:30 AM UTC-4, Daniel LaLiberte wrote:
Its still same and parent node has double width of child node.
On Tuesday, March 26, 2013 10:06:30 AM UTC-4, Daniel LaLiberte wrote:
I added the following style:.google-visualization-orgchart-node {width: 200px; }And all the nodes seemed to get changed correctly. Hope that helps.dan
On Tue, Mar 26, 2013 at 9:41 AM, pankti shah <pank...@gmail.com> wrote:
sorry forgot to attach image in last reply.
On Tuesday, March 26, 2013 9:39:53 AM UTC-4, pankti shah wrote:
Hi thank you so much for reply.but your code does not work for me.I have attached image and please have a look.I have give border=1 to table so you can clearly see that parent node are taking double width of child node in some case.Please help me out. its urgent.FYI. i have created dynamic chart and each element have below code.
info = "<table><tr><td style='text-align:left'> Name : Feldstein, Daniel A</td></tr>"+ " <tr><td style='text-align:left'> Business Title : VP Of Operations </td></tr>"+ "<tr><td style='text-align:left'> Location : Rockleigh - 7 Volvo </td></tr>"
+ "<tr><td style='text-align:left'>Email Id : <a href='mailto:dfeld...@crestron.com'>dfeld...@crestron.com</a> </td></tr>"
+ "<tr><td style='text-align:left'> Department : " + deptLevelTreeview.SelectedNode.Value + "</td></tr>"+ " <tr><td style='text-align:left'> Phone No : 10214 </td></tr><table>";
Let me know if there is problem in code.
On Monday, March 25, 2013 4:54:19 PM UTC-4, asgallant wrote:Use the DataTable#setRowProperty to set the "style" property of each row and assign them a common width, like this:for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setRowProperty(i, 'style', 'width:150px;');
}
On Monday, March 25, 2013 2:45:09 PM UTC-4, pankti shah wrote:Hi,Some parents are taking double width of child Node.I want to make same width of all node.I have added HTML table in each element and set width of that table but it still getting more width.
--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
Daniel LaLiberte
Mar 26, 2013, 10:22:58 AM3/26/13
to google-visua...@googlegroups.com
Perhaps you are generating your chart in some way we are not anticipating. Could your provide a link to a web page so we could see it in action, perhaps using jsfiddle?
dan
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
pankti shah
Mar 26, 2013, 10:26:19 AM3/26/13
to google-visua...@googlegroups.com
you mean do you want to see my code?
because i dont have link and its on my computer because it is in development stage.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
pankti shah
Mar 26, 2013, 10:42:31 AM3/26/13
to google-visua...@googlegroups.com
Here my code :
// here my javascript .aspx
<script type="text/javascript">
google.load('visualization', '1', { packages: ['orgchart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
var table = document.getElementById('<%=gridView.ClientID %>');
if (table != null) {
for (var i = 1; i < table.rows.length; i++) {
//data.setRowProperty(i, 'style', 'width:150px;');
var Row = table.rows[i];
var CellValue = Row.cells[1].innerText;
if (Row.cells[0].innerText != "" && Row.cells[2].innerText != null) {
if (i == 1)
{
data.addRows([
[{ v: Row.cells[0].innerText, f: Row.cells[2].innerText }, '', ' ']
]);
}
else
{
data.addRows([
[{ v: Row.cells[0].innerText, f: Row.cells[2].innerText }, Row.cells[1].innerText, ' ']
]);
}
}
}
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, { allowHtml: true });
document.getElementById('<%= gridView.ClientID %>').style.display = 'none';
}
}
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
function OnTreeClick(evt) {
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var nodeClick = src.tagName.toLowerCase() == "a";
if (nodeClick) {
//innerText works in IE but fails in Firefox (I'm sick of browser anomalies), so use innerHTML as well
var nodeText = src.innerText || src.innerHTML;
var nodeValue = GetNodeValue(src);
__doPostBack(this, ""); // bind grid.
drawChart();
}
return true; //comment this if you want postback on node click
}
//]]>
</script>
<div id='chart_div' runat="server"></div>
and here my code behind :
pass this string to javascript and display in node element.
string info = "<table border='0'><tr><td style='text-align:left'> Name : Pankti Shah A</td></tr>"
+ " <tr><td style='text-align:left'> Business Title : Developer </td></tr>"
+ "<tr><td style='text-align:left'> Location : Newark </td></tr>"
+ "<tr><td style='text-align:left'>Email Id : <a href='xxxx'>xxxx</a> </td></tr>"
+ "<tr><td style='text-align:left'> Department : Sr. developer</td></tr>"
+ " <tr><td style='text-align:left'> Phone No : 11111 </td></tr></table>";
Daniel LaLiberte
Mar 26, 2013, 11:13:51 AM3/26/13
to google-visua...@googlegroups.com
That is almost enough to work with. What I am still missing some same data itself, and how you organize your HTML and styles. Maybe there is something else in your page that affects the layout of the orgchart. Could you save the html that ends up in your browser. You can just send to me if you don't want to post to the list.
dan
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
pankti shah
Mar 26, 2013, 11:30:20 AM3/26/13
to google-visua...@googlegroups.com
hi,
--
Thanks,
i have attached my html page after run. Let me know if you are facing problem to view.
--
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/HyywfcfD-5g/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
Thanks,
Pankti
asgallant
Mar 26, 2013, 3:59:16 PM3/26/13
to google-visua...@googlegroups.com
This is odd...I can get it to work in Chrome and Firefox, but IE seems to be ignoring both the style and the row property.
hi,
--
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/HyywfcfD-5g/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
--
Thanks,Pankti
Daniel LaLiberte
Mar 26, 2013, 4:02:59 PM3/26/13
to google-visua...@googlegroups.com
Yeah, we are finding that IE9 is the problem.
The best workaround so far is to switch to IE8 compatibility, and then some...
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style>
.google-visualization-orgchart-table
.google-visualization-orgchart-linenode
{
width: 1%;
}
.google-visualization-orgchart-table
.google-visualization-orgchart-node {
width: 250px;
}
</style>
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages