Click here to Skip to main content
14,391,319 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am using google line chart. Now i want to export that chart into PDF. How can I do that?

<div runat="server" id="chart_div" style="width: 100%; height: 500px">
    <asp:Literal ID="lt" runat="server"></asp:Literal>

</div>



<script type="text/javascript">

$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(BindEvents)
});

function BindEvents() {
$('.selectpicker').selectpicker();

$(".currencyFormat").maskMoney({ thousands: ',', decimal: '.', allowZero: true, prefix: '$' });
$(".percentageFormat").maskMoney({ thousands: ',', decimal: '.', allowZero: true, suffix: '%' });



}
function drawChart(dataObject) {

var globaldata = google.visualization.arrayToDataTable(dataObject);
var options = {
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#ff6600'],
series: {
0: { lineDashStyle: [10, 2] },
1: { lineDashStyle: [0, 0] },
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img id="myChart" src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);

});

chart.draw(globaldata, options);
}
Posted
Updated 15-Oct-15 0:28am
v2
Comments
Member 13351180 9-Aug-17 7:55am
   
have to convert google chart to PDF file.how can i do that?
see my code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>



<title>







&lt;!-- This adds the proper namespace on the generated SVG -->
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function AddNamespace() {
var svg = jQuery('#chart_div svg');
svg.attr("xmlns", "http://www.w3.org/2000/svg");
svg.css('overflow', 'visible');
}
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2009', 1300, 600],
['2010', 1200, 400],
['2011', 740, 1210],
['2012', 1090, 590],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);

var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', AddNamespace);
chart.draw(data, options);
}
var click="return xepOnline.Formatter.Format('JSFiddle', {render:'download', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>');
click="return xepOnline.Formatter.Format('JSFiddle', {render:'newwin', mimeType:'image/png', resolution:'120', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PNG @120dpi</button>');
click="return xepOnline.Formatter.Format('JSFiddle', {render:'newwin', mimeType:'image/jpg', resolution:'300', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">JPG @300dpi</button>');




.buttons button:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.buttons button:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

button {
color:#111;
background-image: linear-gradient(to bottom,#ffffff 0,#777777 100%);
background-repeat: repeat-x;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
cursor: pointer;
border-width:1px;
border-color: #777;
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
}
button:hover{
color:#fff;
background-image: linear-gradient(to top,#337ab7 0,#265a88 100%);
}











This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100