Re: Showing html links in a table

[asgallant]

The Table visualization escapes all HTML content unless you set the "allowHtml" option to true.

On Wednesday, November 14, 2012 11:55:05 AM UTC-5, Jonathon McKitrick wrote:

I have JSON data that will contain a hyperlink, complete as html markup.  I need to display this link as-is, and I think the Table is scrubbing the cell content before display.  Is there a way to suppress this action, or do I need to break down the tag on the server side, then use a PatternFormatter to rebuild it before passing it to Table for display?

[asgallant]

Try it in Chrome and check the developer's console for errors (ctrl+shift+j to open in windows).  If nothing is showing up there, right click on a link and select "inspect element" (bottom of the list); make sure that the link is formatted properly.

My inclination is to say that your column 0 probably contains a string, and you didn't quote the output in the formatter.  Maybe this would work:

var formatter = new google.visualization.PatternFormat('<a href="#" onclick="getJsonforCountries(\'{0}\');">{0}</a>');

Also, you are only using one column in your formatter, you don't need to include it twice in the column array you pass to the format method.  This would be sufficient:

formatter.format(data, [0]);

On Tuesday, November 27, 2012 4:52:31 AM UTC-5, Heena wrote:

After setting allowhtml:true, still i am not able to call javaScrippt function from <a href> tag. Here's a code snippet:

 

I want to call a java script function getJsonforCountries as soon as i click on any link in data table.

var formatter = new google.visualization.PatternFormat('<a href="#" onclick="getJsonforCountries({0});">{0}</a>');

formatter.format(data, [0,0]);

Help appreciated :)

[Daniel LaLiberte]

Be careful to spell "allowHtml" correctly.  It is not "allowhtml" or "allowHTML".  Unknown options are generally ignored silently.

But asgallant's suggestion is probably more relevant since it appears your argument values are strings rather than, say, numbers which can appear without quotes.

dan

On Tue, Nov 27, 2012 at 4:52 AM, Heena <heen...@gmail.com> wrote:

After setting allowhtml:true, still i am not able to call javaScrippt function from <a href> tag. Here's a code snippet:

 

I want to call a java script function getJsonforCountries as soon as i click on any link in data table.

var formatter = new google.visualization.PatternFormat('<a href="#" onclick="getJsonforCountries({0});">{0}</a>');

formatter.format(data, [0,0]);

Help appreciated :)

 

On Thursday, November 15, 2012 12:41:39 AM UTC+5:30, asgallant wrote:

On Thursday, November 15, 2012 12:41:39 AM UTC+5:30, asgallant wrote:

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/SaI_eNwvugEJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Heena]

Thanks a lot for your replies. Yes i missed to quote the output in parameter.

 

Here i would need one more help.

By default the numeric data that appears in table's columns is right alligned. What can i do to allign it on left/center for few columns..?
I have gone through the documentation and found that setColumnProperties() can be used to format the columns of a table, but i cant find a proper way to implement it.

 

On Tuesday, November 27, 2012 10:28:32 PM UTC+5:30, Daniel LaLiberte wrote:

Be careful to spell "allowHtml" correctly.  It is not "allowhtml" or "allowHTML".  Unknown options are generally ignored silently.

But asgallant's suggestion is probably more relevant since it appears your argument values are strings rather than, say, numbers which can appear without quotes.

dan

On Tue, Nov 27, 2012 at 4:52 AM, Heena <heen...@gmail.com> wrote:

After setting allowhtml:true, still i am not able to call javaScrippt function from <a href> tag. Here's a code snippet:

 

I want to call a java script function getJsonforCountries as soon as i click on any link in data table.

var formatter = new google.visualization.PatternFormat('<a href="#" onclick="getJsonforCountries({0});">{0}</a>');

formatter.format(data, [0,0]);

Help appreciated :)

 

On Thursday, November 15, 2012 12:41:39 AM UTC+5:30, asgallant wrote:

The Table visualization escapes all HTML content unless you set the "allowHtml" option to true.

On Wednesday, November 14, 2012 11:55:05 AM UTC-5, Jonathon McKitrick wrote:

I have JSON data that will contain a hyperlink, complete as html markup.  I need to display this link as-is, and I think the Table is scrubbing the cell content before display.  Is there a way to suppress this action, or do I need to break down the tag on the server side, then use a PatternFormatter to rebuild it before passing it to Table for display?

On Thursday, November 15, 2012 12:41:39 AM UTC+5:30, asgallant wrote:

The Table visualization escapes all HTML content unless you set the "allowHtml" option to true.

On Wednesday, November 14, 2012 11:55:05 AM UTC-5, Jonathon McKitrick wrote:

I have JSON data that will contain a hyperlink, complete as html markup.  I need to display this link as-is, and I think the Table is scrubbing the cell content before display.  Is there a way to suppress this action, or do I need to break down the tag on the server side, then use a PatternFormatter to rebuild it before passing it to Table for display?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/SaI_eNwvugEJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   562D 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

setColumnProperties won't do what you want.  You will have to assign a "style" or "className" property to each cell that you want to change the alignment of.  These properties are described here.  Use the DataTable's setProperty method on each cell you need to change.

[Heena]

My data is dynamic , therefore I won't be sure about the number of rows in my data table.
Also data is very large,so setting property for each and every column won't be possible..
Doesn't the Api provide any possible way to format the allignment for one complete column..?
Thanks in advanced..

[asgallant]

No, there's no way to set a property on a whole column.  You can iterate over the data set easily, though:

for (var i = 0; i < data.getNumberOfRows(); i++) {
    data.setProperty(i, column, 'className', 'myClass');
}

where data is your DataTable and column is the index of the column to adjust.  If you have multiple columns that need adjusting, you can stick the indices in an array, and iterate over the array inside the row loop:

for (var i = 0; i < data.getNumberOfRows(); i++) {
    for (var j = 0; j < columns.length; j++) {
        data.setProperty(i, columns[j], 'className', 'myClass');
    }
}

[Heena]

Thanks Asgallant.This was really helpful.

Also is there any way to get the sum of an entire column. I tried using  google.visualization.data.sum function but since it implements 'group by' function, so it did not work out.

[asgallant]

You can use the group function to get the sum of a column, you just likely need to use a modifier function on another column in the table to make all of the values to group by uniform.

var group = google.visualization.data.group(data, [{
    column: 0, // pick something other than a column you need summed
    type: 'number',
    modifier: function () {
        // make all values the same
        return 0;
    }
}], [{
    // you can repeat this object as many times as you like to get the sum of each column that you need
    column: 1, // use the index of the column to sum
    type: 'number',
    aggregation: google.visualization.data.sum
}]);

[Heena]

Hi again :=)

 

Yes it gives me the sum, the way u suggested.

As expected below code gives me the sum for 5 columns as a 1 row table. So, when this all is rendered in a jsp,it gives me table 1 with all rows and below that table 2 with summed data for above table. This table 2 has same column labels as table1, which is an issue, bcoz i just want to display the sum for each column. Is there any way to correct that ( ijust need the row for that table and not the headers).

 

Also i am not able to format the cells for this table. Is it some thing like setProperty() doesn't work for grouped data?

 

 

Here i the code snippet:

var grouped_data = google.visualization.data.group(data, [{
column: 0,type:'string',modifier:
function () {
var modifiedString="A";
return modifiedString;
}
}], [
{column: 1, type: 'number',aggregation: google.visualization.data.sum},
{column: 2, type: 'number',aggregation: google.visualization.data.sum},
{column: 3, type: 'number',aggregation: google.visualization.data.sum},
{column: 4, type: 'number',aggregation: google.visualization.data.sum},
{column: 5, type: 'number',aggregation: google.visualization.data.sum}
]);
grouped_data.setProperty(0, 1, "style","text-align: center;");
var groupedView = new google.visualization.DataView(grouped_data);
groupedView.setColumns([1,2,3,4,5]);
var sumChart = new google.visualization.Table(document.getElementById('summedData'));
sumChart.draw(groupedView);

[asgallant]

You could try to disappear the header row with some css.  Maybe something like this would work:

in css:

.noShow {
    display: none;
}​

in javascript:

sumChart.draw(groupedView, {
    cssClassNames: {
        headerRow: 'noShow'
    }
});

As far as the formatting goes, you left out the "allowHtml" option when you draw the table, which is why it isn't working.

[Heena]

Hi...

Can we even 'Print' and 'Export to Excel' the various data charts on a jsp/html using Google Virtualiation API itself..?

 

I dint find any option for Excel, though i found that it can be exported to csv easily, but i need it directly in excel(xls format).

For Print, I didnt found anything from API docs.

[asgallant]

Printing works just like printing any other HTML - use the browser's print function.  If you want to print just the table, there are several ways to do that (Google for methods).  If you use export to CSV, Excel will open it just fine.  There is no practical means to replicate the internal structure of an XLS file, unless you have MS Office plugged into your webserver with the appropriate API installed (Google for details).

[deepak]

Hey..

The number of rows in my table is not fixed. If i add scrolll bar in my div after a particular height, then header bar also scrolls with rows.

If i define height in google api's option while drawing chart then that height is always fixed and if number of rows is very less then a huge amount of empty space is visible in table.

How can this be fixed..?

Thanks

<span style="color:rgb(102,102,102);line-height:15px;font-family:Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;font-size:1...
Show original

[asgallant]

Check the number of rows in your DataTable (use the DataTable#getNumberOfRows method).  If it is above some value (you'll have to figure out what a good value to check is based on the height of a row and the max height you want the table to be), set the table's height option, otherwise leave the height option out.

[Heena]

Even after providing height in Options for chart, it scrolls the header bar in IE9 browser.

    for (var j = 0; j < columns.length; <span style="color:rgb(0,68,153);line-height:15px;font-family:Inconsolata,Monaco,Consolas,&qu...
Show original

[Heena]

Also

overflow:visible CSS property for print doesnt work when i apply API's height option.

i.e., it prints the window with scrollbar and not entire content

[asgallant]

Looks like the hack that makes the header fixed in the table isn't setting the div height correctly in IE 9.  Use this to fix it:

if ($.browser.msie && $.browser.version == 9) {

    google.visualization.events.addListener(table, 'ready', function () {

        var headerHeight = $('#table_div div div:eq(1)').find('.google-visualization-table-tr-head').outerHeight();

        $('#table_div div div:eq(1)').height(headerHeight);

    });

}

That code uses jQuery to help with browser detection and element selection, but you can rewrite the code without jQuery if you don't use it.

The problem with the overflow in print mode is probably just setting it on the wrong element.  When you set the height of the chart manually, the API actually creates two tables in HTML, each inside its own div, positioned one on top of the other.  The top table's container div has overflow set to hidden, and is large enough to show the header row (the height of this table's containing div is what you are setting in the code above to fix the IE 9 problem).  The bottom table's container div has overflow set to auto, and is the height set in the options.  You don't want to change the overflow settings, as they will cause the table to overlap with other content.  Set the top table's container div to "display: none"  and the bottom table's container div to "height: auto !important", like this:

#table_div > div > div:nth-child(2) {

    display: none;

}

#table_div > div > div:first-child {

    height:auto !important;

}

where "table_div" is the id of your table div.

[Heena]

Hii Asgallant,

 

I am using Area Chart. It loads fine for the first time when page is being load.

But as soon as i click on the tab to reload the area chart, the h-axis and v-axis values disappear in IE8, although my json is very same.

This works fine in all the browsers except for IE8. any idea about why it can happen..?

 

Thanks..

[asgallant]

Can you post your code or a link to the page so I can see this first-hand?  The page link might be more helpful in this case.

[Heena]

The site is not public facing so i won't be able to provide you the link. Although the code & functionality is as below:

 

As soon as the page loads, ajax call is sent to server and the response, which is in json format, is sent as parameter to drawAreaChart(). There are multiple links on the page, the problem occurs when the link, which again makes an ajax call and send the same json to drawAreaChart(), is hit.

 

function drawAreaChart(js,tab,cols) {

 

tabSectionA = tab;

var data = new google.visualization.DataTable(js);

var view = new google.visualization.DataView(data);

var chart = new google.visualization.AreaChart(document.getElementById(tab));

google.visualization.events.addListener(chart,

"error", function errorHandler(e) {

google.visualization.errors.removeError(e.id);

});

view.setColumns(cols);

 

var options = {

width : 600,

height : 200,

hAxis : {showTextEvery : days},

chartArea : {left :'auto'

top:'auto',

width: 'auto',

height : 'auto'

},

'pointSize' : 5,

legend : {

position : 'none'

}

};

  chart.draw(view, options);

[asgallant]

Unfortunately, that isn't enough for me to replicate the problem.  Can you provide me with the source code for the whole page and sample JSON to draw the charts with?  I need to be able to replicate the exact conditions in order to figure out what is going on.

[Heena]

The code is a lil complex and LOC is huge, so would be difficult to share.

Anyways, I would check this at my end and let you know if i find anything.

Thnaks for your concern.

[asgallant]

The first thing I would look into is whether or not the div (or any of its parent elements) is hidden when the draw call is made (this is usually the case when a chart is drawn in an inactive tab), as problems of this type are usually the result of drawing in a hidden div.