Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 2335
Home > Forums > ASP.NET >

How display google chart in window.open() in asp.net [Resolved]

Posted by Cpatil1000 under ASP.NET on 10/15/2016 | Points: 10 | Views : 1949 | Status : [Member] | Replies : 1
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
Hi,
I have developed a for open window and in windows i am display in
google chart. when i close this window, I am getting error. becuase
of my div and google chart are storing in the buffter.

when i use following javascript it is working but my original(backand screen changing,
after some type it getting original screen which i stored in (var originalContents)
so i want store my original screen after close window chart.. So give my advice
how to do avoid error..

I want work perfect. I press linkbutton to open window by javsscript(one time or more time)
it should not getting error.. Other wise give another solution but with practically code to
open window display google chart..

I think my problem in : 
document.body.innerHTML = originalContents;



 <script type="text/javascript">

        function PrintDiv() {
            var showActivityChart = document.getElementById('<%=dActivityChart.ClientID %>');
            showActivityChart.style.display = "none";

            var logo = document.getElementById('<%=dMainLogoPrint.ClientID %>');
            logo.style.display = "block";

            var hideActivityChart = document.getElementById('<%=dHideActivityChart.ClientID %>');
            hideActivityChart.style.display = "block";

            drawhideActivityChart();

            var printContents = document.getElementById('<%=dChartContainer.ClientID %>').innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;

            divHide(); 
        }
    </script>

 <script type="text/javascript">
        function divHide() {
            var logo = document.getElementById('<%=dMainLogoPrint.ClientID %>');
            logo.style.display = "none";

            var hideActivityChart = document.getElementById('<%=dHideActivityChart.ClientID %>');
            hideActivityChart.style.display = "none";
        }
</script>


<script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        //Do not call this method on pageload
        //google.setOnLoadCallback(drawhideActivityChart);

        function drawhideActivityChart() {
               var data = new google.visualization.DataTable();

            data.addColumn('string', 'Status');
            data.addColumn('number', 'TotalStatus');

            data.addRows(2);

           <%= SetFarmerChart() %>

            var activityChart = new google.visualization.PieChart(document.getElementById('activityChart'));

            activityChart.draw(data, { title: 'Farmer Status Details', titleTextStyle: { color: 'Maroon', fontSize: '20', fontStyle: 'normal' }, is3D: 'true', tooltip: { text: 'value' }, pieSliceText: 'value', legend: 'right', width: 600, height: 320 });
        }
    </script>




Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Rajnilari2015 on: 10/15/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
Try this

<!DOCTYPE html>
<html>
<head>  
    
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>    
      <link rel="stylesheet" type="text/css" href="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.css">    
      <script type="text/javascript" src="https://www.google.com/jsapi?key=ABS.js"></script>
<script type='text/javascript'>//<![CDATA[

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

function strToArr(str) {
    var arr = [];
    var rows = str.split("|");
    for (var i = 0; i < rows.length; i++) {
        var row = [];
        var regex = new RegExp("^\"(.*)\"$");
        var values = rows[i].split(",");
        for (var j = 0; j < values.length; j++) {
            var value = values[j].trim();
            row.push(regex.test(value) 
                    ? RegExp.$1 
                    : parseInt(value, 10));
        }
        arr.push(row);
    }
    return arr;
}

function drawVisualization(dataArr) {
    var data = google.visualization.arrayToDataTable(dataArr);
    /*var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],

        ]);*/
    var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'red'
            }
        }
    };
    // Create and draw the visualization.
    new google.visualization.ColumnChart(document.getElementById('data')).draw(data, options);
}

$(document).ready(function() {
    $("a.chartLink").each(function() {
        var dataArr = strToArr(this.dataset.chartData);
        $(this).fancybox({
           'hideOnContentClick': true,
            onComplete: function() { drawVisualization(dataArr); }
        });
    });
});
//]]> 

</script>

  
</head>

<body>
  <a href="#data" class="chartLink" 
        data-chart-data='"Year","Sales","Expenses"|"2004",1000,400'>
    Show Chart
</a>
<br />
<a href="#data" class="chartLink" data-chart-data='
        "Period","Sales (K)","Profit(K(&euro;))"|
        "1950-59",100,1500|
        "1960-69", 90,1000|
        "1970-79", 90,1200|
        "1980-89",250, 300|
        "1990-99",100,3000'>
    Show Other Chart
</a>

<div style="display:none">
    <div style='height:400px;width:600px' id="data"></div>
</div>  
</body>
</html>


--
Thanks & Regards,
RNA Team

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts