Chart not shown on IE9

lakshman...@gmail.com

unread,

Dec 19, 2012, 3:04:50 AM12/19/12

to google-visua...@googlegroups.com

Hi All
I am using google API visualization , functions are loading in IE9 , and not shown in IE9
Please could you give a suggestion on this Issue

here is my code
<div class="graph" id="graph" style="margin-top:50px !important;">
          <script type="text/javascript">
            google.load('visualization', '1', {packages: ['<%=graphPkgType%>']});
            //google.load('visualization', '1', {packages: ['corechart']});
            var data;
            function drawVisualization()
            {
              // Create and populate the data table.
              data = new google.visualization.DataTable();

              data.addColumn('string', 'Name');
              data.addColumn('number', 'Salary');
              data.addColumn('boolean', 'Full Time');
              data.addRows(5);
              data.setCell(0, 0, 'Lakshman');
              data.setCell(0, 1, 10000);
              data.setCell(0, 2, true);
              data.setCell(1, 0, 'Sreenivas');
              data.setCell(1, 1, 25000);
              data.setCell(1, 2, true);
              data.setCell(2, 0, 'Vaseem');
              data.setCell(2, 1, 8000);
              data.setCell(2, 2, false);
              data.setCell(3, 0, 'saritha');
              data.setCell(3, 1, 20000);
              data.setCell(3, 2, true);
              data.setCell(4, 0, 'Mei');
              data.setCell(4, 1, 12000);
              data.setCell(4, 2, false);

              // Create and draw the visualization.
              chart=new google.visualization.<%=graphClass%>(document.getElementById('graph'));
              var options = {
              //width: 1500,
              height: 700,
              fontSize: 20,
              legend: 'bottom',
              isStacked: true,
              allowHtml:false,
              chartArea: {left: 80, top: 50},
              titleX: 'Date', titleY: 'Page views',
              title: '<%=keyDisplayName%>'
              }
              chart.draw(data, options);
            }
            google.setOnLoadCallback(drawVisualization);
          </script>
        </div>

Thanks
Lakshman

lakshman...@gmail.com

unread,

Dec 19, 2012, 4:09:25 AM12/19/12

to google-visua...@googlegroups.com

I can see view source if we select mouse right click on the browser , but data not loading

asgallant

unread,

Dec 19, 2012, 11:13:11 AM12/19/12

to google-visua...@googlegroups.com

Post the code you see in IE9, as your server-side code doesn't help here.

Lakshman Bolla

unread,

Jan 23, 2013, 11:44:44 PM1/23/13

to google-visua...@googlegroups.com

Hi All

Could please suggest

why google graph is not supporting IE9,

Thanks

Lakshman

--
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/-/3SH3jXt7Rm0J.

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.

asgallant

unread,

Jan 24, 2013, 12:04:46 AM1/24/13

to google-visua...@googlegroups.com

I need to see what the rendered HTML/javascript looks like in order to help you.

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

asgallant

unread,

Jan 24, 2013, 12:16:21 AM1/24/13

to google-visua...@googlegroups.com

I made some assumptions about what your server code was rendering, and found that the chart doesn't draw in any browser at all (not just IE 9), because you didn't separate out the boolean data column before drawing the chart. If you use a DataView to remove that column, then the chart draws fine. See an example based on your code here: http://jsfiddle.net/asgallant/HHK6p/

Also note that if you put the <script> tags inside the chart's container div, the javascript will be deleted when you draw the chart. I'm not sure if there are negative consequences to this or not, but it's certainly not going to help anything.

Lakshman Bolla

unread,

Jan 24, 2013, 1:00:05 AM1/24/13

to google-visua...@googlegroups.com

HI

here is my code

please suggest any changes I need to do...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Overall provider stats </title>

</head>

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

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

asgallant

unread,

Jan 24, 2013, 1:24:48 AM1/24/13

to google-visua...@googlegroups.com

Add these lines after you create the DataTable and before you create the chart:

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

view.setColumns([0, 1]);

then change the chart.draw() call to use "view" instead of "data":

chart.draw(view, options);

See if that fixes the problem for you.

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

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

Lakshman Bolla

unread,

Jan 24, 2013, 6:15:38 AM1/24/13

to google-visua...@googlegroups.com

Hi

here is my actual code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean"%>

<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>

<%@ taglib prefix="logic" uri="http://struts.apache.org/tags-logic"%>

<head>

<title>Overall provider stats </title>

</head>

<body>

<div class="right"><a href="http://www.myhotcourses.com/"><img src="<%=cmi.util.CMIUtil.getKeyValue(null,"myhc.img.path")%>/myhclogo.gif" width="202" height="35" alt="Myhotcourses.com" border="0"/></a></div>

<h1>Overall provider stats</h1>

<%

String startDate=request.getParameter("startDate")!=null?"startDate="+request.getParameter("startDate"):"";

String endDate=request.getParameter("endDate")!=null?"endDate="+request.getParameter("endDate"):"";

String institutionId=request.getParameter("searchInstitutionId")!=null?"searchInstitutionId="+request.getParameter("searchInstitutionId"):"";

String reportTypeId=request.getParameter("reportTypeId")!=null?"reportTypeId="+request.getParameter("reportTypeId"):"";

String keyId=request.getParameter("keyId")!=null?"keyId="+request.getParameter("keyId"):"";

String mobileFlag=request.getParameter("mobileFlag")!=null?"mobileFlag="+request.getParameter("mobileFlag"):"";

String selectedAffiliates[]=request.getParameterValues("selectedAffiliates");

String selectedDepartments[]=request.getParameterValues("selectedDepartments");

String selectedOrderItems[]=request.getParameterValues("selectedOrderItems");

String affiliateQueryString="";

if(selectedAffiliates!=null){

for(int i=0;i<selectedAffiliates.length;i++){

affiliateQueryString+="&selectedAffiliates="+selectedAffiliates[i];

}

String departmentQueryString="";

if(selectedDepartments!=null){

for(int i=0;i<selectedDepartments.length;i++){

departmentQueryString+="&selectedDepartments="+selectedDepartments[i];

}

String ordersQueryString="";

if(selectedOrderItems!=null){

for(int i=0;i<selectedOrderItems.length;i++){

ordersQueryString+="&selectedOrderItems="+selectedOrderItems[i];

}

String paremValues= startDate +"&"+ endDate +"&"+ institutionId +"&"+ reportTypeId +"&"+ keyId +"&"+ mobileFlag +"&"+ affiliateQueryString +departmentQueryString+ordersQueryString;

String graphUrl = request.getContextPath() + "/stats/search.html?action=intsalesstats&searchStatsRpt=Yes&" + paremValues;

String graphType=request.getParameter("graphType");

String graphClass= (graphType!=null && graphType.equals("bar"))?"ColumnChart":"LineChart";

String graphPkgType= (graphType!=null && graphType.equals("bar"))?"columnchart":"linechart";

String keyDisplayName=request.getAttribute("keyDisplayName")!=null?(String)request.getAttribute("keyDisplayName"):(String)request.getParameter("keyDisplayName");

int totalIndexVal=1000;

%>

<div class="right clear"><a href="<%=graphUrl%>&graphType=bar">Bar chart</a> | <a href="<%=graphUrl%>&graphType=line">Line chart</a></div>

<logic:notEmpty name="dataList" scope="request">

google.load('visualization', '1', {packages: ['<%=graphPkgType%>']});

//google.load('visualization', '1', {packages: ['corechart']});

var data;

function drawVisualization()

{

// Create and populate the data table.

data = new google.visualization.DataTable();

<logic:notEmpty name="displayHeader" scope="request">

<logic:iterate id="bean" name="displayHeader" scope="request" indexId="index">

<bean:define id="dispName" name="bean" property="displayName" />

<%if (!request.getParameter("reportTypeId").equals("1") && !request.getParameter("reportTypeId").equals("-1") && "Total".equals(dispName) && "ColumnChart".equals(graphClass)){

totalIndexVal = index.intValue();

}else{%>

data.addColumn('<%=index.intValue()==0?"string":"number"%>', '<bean:write name="bean" property="displayName" filter="false" />');

<%}%>

</logic:iterate>

</logic:notEmpty>

<logic:iterate id="bean" name="dataList" scope="request" indexId="topIndex">

data.addRows(1);

<logic:notEmpty name="bean" property="columnsData">

<logic:iterate id="data" name="bean" property="columnsData" indexId="index">

<%if (totalIndexVal!=index.intValue()){%>

data.setCell(<%=topIndex%>, <%=index%>, <%=index.intValue()==0?"'"+data+"'":data%>);

<%}%>

</logic:iterate>

</logic:notEmpty>

</logic:iterate>

// Create and draw the visualization.

chart=new google.visualization.<%=graphClass%>(document.getElementById('graph'));

var options = {

//width: 1500,

height: 700,

fontSize: 20,

legend: 'bottom',

isStacked: true,

chartArea: {left: 80, top: 50},

titleX: 'Date', titleY: 'Page views',

title: '<%=keyDisplayName%>'

};

chart.draw(chart, options);

}

google.setOnLoadCallback(drawVisualization);

</script>

</div>

</logic:notEmpty>

<logic:empty name="dataList" scope="request">

</logic:empty>

</div>

</body>

</html>

I did as u said , but same Issue happing

Thanks

Lakshman

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

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

asgallant

unread,

Jan 24, 2013, 1:06:50 PM1/24/13

to google-visua...@googlegroups.com

You didn't add the view. Your drawVisualization function should probably look like this:

function drawVisualization () {

// Create and populate the data table.

data = new google.visualization.DataTable();

<logic:notEmpty name="displayHeader" scope="request">

<logic:iterate id="bean" name="displayHeader" scope="request" indexId="index">

<bean:define id="dispName" name="bean" property="displayName" />

<%if (!request.getParameter("reportTypeId").equals("1") && !request.getParameter("reportTypeId").equals("-1") && "Total".equals(dispName) && "ColumnChart".equals(graphClass)){

totalIndexVal = index.intValue();

} else{ %>

data.addColumn('<%=index.intValue()==0?"string":"number"%>', '<bean:write name="bean" property="displayName" filter="false" />');

<%}%>

</logic:iterate>

</logic:notEmpty>

<logic:iterate id="bean" name="dataList" scope="request" indexId="topIndex">

data.addRows(1);

<logic:notEmpty name="bean" property="columnsData">

<logic:iterate id="data" name="bean" property="columnsData" indexId="index">

<%if (totalIndexVal!=index.intValue()){%>

data.setCell(<%=topIndex%>, <%=index%>, <%=index.intValue()==0?"'"+data+"'":data%>);

<%}%>

</logic:iterate>

</logic:notEmpty>

</logic:iterate>

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

view.setColumns([0, 1]);

// Create and draw the visualization.

chart=new google.visualization.<%=graphClass%>(document.getElementById('graph'));

var options = {

//width: 1500,

height: 700,

fontSize: 20,

legend: 'bottom',

isStacked: true,

chartArea: {left: 80, top: 50},

titleX: 'Date', titleY: 'Page views',

title: '<%=keyDisplayName%>'

};

chart.draw(view, options);

}

That is just a guess, though, since I can't tell what your server-side code will end up rendering. I need to see what the code looks like when you view it in a browser to tell for certain what is needed.

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

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

Lakshman Bolla

unread,

Jan 25, 2013, 6:41:09 AM1/25/13

to google-visua...@googlegroups.com

Hi

I used yours given code , but it is supporting in IE8 with XP ,

but its not supporting In windows7 IE9, this is actual Issue

Please suggest ,

Thanks
Lakshman

To unsubscribe from this group, send email to google-visualizati...@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.

asgallant

unread,

Jan 25, 2013, 12:34:45 PM1/25/13

to google-visua...@googlegroups.com

I can't help you if you don't post the code as it appears to a browser. Open it in IE 9 and view the source code, then paste it here. Alternatively, you could link to the page so I can take a look myself.

Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Lakshman Bolla

unread,

Feb 6, 2013, 7:44:03 AM2/6/13

to google-visua...@googlegroups.com

Hi

Sorry for late reply ,

here is my code

i Open in IE 9 and view and selected the source code, please provide your assistence

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Overall provider stats </title>

</head>

<body>

<h1>Overall provider stats</h1>

<div class="right clear"><a href="/cmint/stats/search.html?action=intsalesstats&searchStatsRpt=Yes&startDate=06-Jan-13&endDate=05-Feb-13&searchInstitutionId=3769&reportTypeId=1&keyId=10&mobileFlag=A&&selectedOrderItems=551577&graphType=bar">Bar chart</a> | <a href="/cmint/stats/search.html?action=intsalesstats&searchStatsRpt=Yes&startDate=06-Jan-13&endDate=05-Feb-13&searchInstitutionId=3769&reportTypeId=1&keyId=10&mobileFlag=A&&selectedOrderItems=551577&graphType=line">Line chart</a></div>

google.load('visualization', '1', {packages: ['columnchart']});

//google.load('visualization', '1', {packages: ['corechart']});

var data;

function drawVisualization()

{

// Create and populate the data table.

data = new google.visualization.DataTable();

data.addColumn('string', 'Description');

data.addColumn('number', 'Total');

data.addRows(1);

data.setCell(0, 0, '06 Jan');

data.setCell(0, 1, 0);

data.addRows(1);

data.setCell(1, 0, '07 Jan');

data.setCell(1, 1, 0);

data.addRows(1);

data.setCell(2, 0, '08 Jan');

data.setCell(2, 1, 0);

data.addRows(1);

data.setCell(3, 0, '09 Jan');

data.setCell(3, 1, 0);

data.addRows(1);

data.setCell(4, 0, '10 Jan');

data.setCell(4, 1, 0);

data.addRows(1);

data.setCell(5, 0, '11 Jan');

data.setCell(5, 1, 0);

data.addRows(1);

data.setCell(6, 0, '12 Jan');

data.setCell(6, 1, 0);

data.addRows(1);

data.setCell(7, 0, '13 Jan');

data.setCell(7, 1, 0);

data.addRows(1);

data.setCell(8, 0, '14 Jan');

data.setCell(8, 1, 0);

data.addRows(1);

data.setCell(9, 0, '15 Jan');

data.setCell(9, 1, 0);

data.addRows(1);

data.setCell(10, 0, '16 Jan');

data.setCell(10, 1, 0);

data.addRows(1);

data.setCell(11, 0, '17 Jan');

data.setCell(11, 1, 2);

data.addRows(1);

data.setCell(12, 0, '18 Jan');

data.setCell(12, 1, 0);

data.addRows(1);

data.setCell(13, 0, '19 Jan');

data.setCell(13, 1, 0);

data.addRows(1);

data.setCell(14, 0, '20 Jan');

data.setCell(14, 1, 0);

data.addRows(1);

data.setCell(15, 0, '21 Jan');

data.setCell(15, 1, 1);

data.addRows(1);

data.setCell(16, 0, '22 Jan');

data.setCell(16, 1, 0);

data.addRows(1);

data.setCell(17, 0, '23 Jan');

data.setCell(17, 1, 0);

data.addRows(1);

data.setCell(18, 0, '24 Jan');

data.setCell(18, 1, 0);

data.addRows(1);

data.setCell(19, 0, '25 Jan');

data.setCell(19, 1, 0);

data.addRows(1);

data.setCell(20, 0, '26 Jan');

data.setCell(20, 1, 0);

data.addRows(1);

data.setCell(21, 0, '27 Jan');

data.setCell(21, 1, 0);

data.addRows(1);

data.setCell(22, 0, '28 Jan');

data.setCell(22, 1, 0);

data.addRows(1);

data.setCell(23, 0, '29 Jan');

data.setCell(23, 1, 0);

data.addRows(1);

data.setCell(24, 0, '30 Jan');

data.setCell(24, 1, 0);

data.addRows(1);

data.setCell(25, 0, '31 Jan');

data.setCell(25, 1, 0);

data.addRows(1);

data.setCell(26, 0, '01 Feb');

data.setCell(26, 1, 0);

data.addRows(1);

data.setCell(27, 0, '02 Feb');

data.setCell(27, 1, 0);

data.addRows(1);

data.setCell(28, 0, '03 Feb');

data.setCell(28, 1, 0);

data.addRows(1);

data.setCell(29, 0, '04 Feb');

data.setCell(29, 1, 0);

data.addRows(1);

data.setCell(30, 0, '05 Feb');

data.setCell(30, 1, 0);

// Create and draw the visualization.

chart=new google.visualization.ColumnChart(document.getElementById('graph'));

var options = {

//width: 1500,

height: 700,

fontSize: 20,

legend: 'bottom',

isStacked: true,

chartArea: {left: 80, top: 50},

titleX: 'Date', titleY: 'Page views',

title: 'Total onsite engagement'

};

chart.draw(data, options);

}

google.setOnLoadCallback(drawVisualization);

</script>

</div>

</body>

</html>

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

Lakshman Bolla

unread,

Feb 6, 2013, 7:51:44 AM2/6/13

to google-visua...@googlegroups.com

Hi

this is code from IE9 (previosly i was taken from IE7 comapatable mode)

<head>

var _loaded = false;

function GCHART_loaded() {

_loaded = true;

}

</script>

</head>

<body marginwidth="0" marginheight="0"

onload="GCHART_loaded()"

>

</body>

</html>

asgallant

unread,

Feb 6, 2013, 11:03:50 AM2/6/13

to google-visua...@googlegroups.com

The code you pasted from IE 9 looks to be the code inside an iframe, not the page source.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@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.

asgallant

unread,

Feb 6, 2013, 11:10:48 AM2/6/13

to google-visua...@googlegroups.com

I copied the IE7 source, and using that determined that the problem is likely the package you are loading, which shows up as:

google.load('visualization', '1', {packages: ['columnchart']});

The old "columnchart" package is deprecated. Change your code to use "corechart" (the google.load line you commented out) and that should fix the problem.

Reply all

Reply to author

Forward