The google chart images were perfectly coming in PDF till few months back.
But now images are not coming.
If I try the html, google chart is coming correctly.
If I try to convert that HTML into PDF using wkhtmltopdf, chart not showing.
I am using wkhtmltopdf from command line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GRAPH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<b>GRAPH</b>
</td>
</tr>
<tr>
<td align="center">
<div class="text-center" id="chart_div70918" style="display: block; margin: 0 auto; width: 400px;height: 160px; "></div>
</td>
</tr>
</table>
<script type="text/javascript">
var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart", "bar"],"callback":"drawChart70918"}]}');
document.head.appendChild(scr);
function drawChart70918() {
var data = google.visualization.arrayToDataTable([
["Subject", "Class Highest", "Marks Obtained", { role: "style" } ]
,["English", 13, 43, "#1909a0"],["Hindi -Oral", 48, 40, "#1909a0"],["Maths", 13, 38, "#1909a0"],["G.k.", 12, 39, "#1909a0"],["Drawing", 48, 44, "#1909a0"] ]);
var view = new google.visualization.DataView(data);
var options = {
fontSize : 6,
fontName: 'Times New Roman',
hAxis :{showTextEvery:1,"slantedText":true, "slantedTextAngle": 45 },
vAxis: {minValue: 0},
legend: { position: "right" },
colors: ['#a5e893', '#1909a0'],
bar: {groupWidth: "40%"},
chartArea:{left:10,top:20,width:'75%',height:'60%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div70918"));
chart.draw(view, options);
}
</script>
</body>
</html>
Related
Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):
Here it's the code
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
margin:0px;
background-size: cover;
background-position: left top;
padding-top:0px;
height: 1100px;
width: 900px;
}
#divb
{
font-size: 12px;
font-family: Arial;
}
div.footer {
display: block; text-align: center;
position: running(footer);
#page {
#bottom-center { content: element(footer) }
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="border:0; margin: 0;">
<div id="divb">
<p><strong>Materials :</strong> {{ materiel }}</p>
.........(the rest of calling the data)
</div>
<div class='footer'>
Page <span id='page'></span> of
<span id='topage'></span>
<script>
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
window.load = function() {
window.status = 'render-pdf';
};
</script>
</body>
</html>
and here it's the result :
the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.
see the screenshoot please.
enter image description here
.Thanks In Advance for everyone here.
I am using velocity template to send email.
I am able to send the mail with static text as body of the mail.
But I am unable to style the mail body like adding color styling tables in the mail body.
thus could you please suggest how I can acheive.
This is sample vm file which I am getting as it is mail body i.e it is not styled.
<!DOCTYPE html>
<html>
<head>
<title>User Information</title>
<style>
body{
font-family: verdana;
}
table {
width: 500px;
}
table, th, td {
border: 1px solid black;
padding: 2px;
}
th{
background-color: #00439A;
color : #FFFFFF;
}
tr.odd{
background-color: #CFCFCF;
}
tr.even{
background-color: #1076F5;
}
</style>
</head>
<body>
<h1>User Information</h1>
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</table>
</body>
</html>
I am trying to print Datatable in Django Template. I am using Django 1.7 and using metro style CSS. If I try to return output as JSON from view , it just prints JSON output without any HTML formatting. If I return non JSON output from view it prints HTML and Datatable with heading but no values and the f12 debugger tool in IE gives a JSON error. My objective is to print a basic Datatable without any customization, I am using ServerSide ajax processing to pull data from Database(model), I have tried using sAjaxsource as well in Javascript. Here is my template :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/static/fnsbuild/metro/docs/css/metro-bootstrap.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/iconFont.css" rel="stylesheet" />
<link href="/static/fnsbuild/metro/docs/css/docs.css" rel="stylesheet" />
<link href="CSS/Override.css" rel="stylesheet" />
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.widget.min.js"></script>
<script type="text/javascript" src="/static/fnsbuild/metro/docs/js/jquery/jquery.dataTables.min.js"></script>
<script src="/static/fnsbuild/metro/docs/js/metro.min.js"></script>
<script src="/static/fnsbuild/metro/docs/js/load-metro.js"></script>
<script src="/static/fnsbuild/metro/docs/js/docs.js"></script>
<title>Metro UI CSS : Simple responsive css framework</title>
</head>
<body class="metro">
<div class="container">
<table class="table striped hovered dataTable" id="example">
<thead>
<tr>
<th class="text-left">Engineer</th>
<th class="text-left">Site_Code</th>
<th class="text-left">NSSA</th>
<th class="text-left">Region</th>
<th class="text-left">GFSD</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var oTable=$('#example').DataTable( {
"aaSorting": [[ 2, "asc" ]],
"bprocessing": true
"bServerSide": true,
"ajax": "{% url 'api' %}",
}
);
});
</script>
</div>
Here is my View :
from django_datatables_view.base_datatable_view import BaseDatatableView
class MyAjaxView(BaseDatatableView):
template_name = 'fnsbuild/table_test.html'
model = OspfNssa
columns = ['id', 'site_code', 'nssa', 'region', 'gfsd']
def render_column(self, row, column):
return super(MyAjaxView, self).render_column(row, column)
URL.py
url(r'^fnsbuild/table_test/$', fnsbuild.views.MyAjaxView.as_view(), name="api"),
Instead of Printing Datatable and values, it just prints JSON Output
{"recordsTotal": 79, "recordsFiltered": 79, "draw": 0, "data": [[56, "by2", "0.0.3.187", "West NA", 1111], [57, "sn3", "0.0.1.24", "Central NA", 1111], [58, "cpq01", "0.0.12.39", "South America", 1111], [59, "hk2", "0.0.4.178", "Asia", 1111], [60, "co1", "0.0.3.32", "West NA", 1111], [61, "bl4", "0.0.1.169", "East NA", 1111], [62, "co2", "0.0.3.37", "West NA", 1111], [63, "kaw", "0.0.4.76", "Asia", 1111], [64, "ch1", "0.0.0.201", "Central NA", 1111], [65, "bn3", "0.0.0.203", "East NA", 1111]], "result": "ok"}
I have tried almost everything suggested on Various forums, Almost given up. I am new to Django so I might be missing something silly. Please suggest.
From django-datatables-view BaseDatatableView documentation:
django-datatables-view simplifies handling of sorting, filtering and creating JSON output
Therefore your view produces JSON, which it would be expected if this would be used within an AJAX request.
If you need something different, you should either make MyAjaxView not inherit from BaseDatatableView, or construct another view that does something sensible with an ajax request.
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Hi I am new to google charts, here I have a Column Chart and a Table. What I am getting now is something like below
Here is the image
But I want the column chart to be displayed something like this :
Here is the image
Here is my code:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization(){
var data = google.visualization.arrayToDataTable([
["Period","Type","Name","Unitssold","OrderCount","TotalSales"],
["7/1/2014 12:00:00 AM","Category One","iPod Touch 12Gb",2,2,0],
["7/2/2014 12:00:00 AM","Category One","iPod Touch 12Gb",1,1,800],
["7/2/2014 12:00:00 AM","Category One","iPod Nano 12Gb",1000,100,700],
["7/3/2014 12:00:00 AM","Category One","iPod Touch 12Gb",8,1,360]
]);
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel':'Period',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'selectedValuesLayout': 'belowStacked',
'allowNone': false
}
}
});
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'view': {'columns':[2,5]},
'options':{'width':'800'}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options':{'width':'800'
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [columnChart, table]).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<table>
<tr>
<td align="center">
<div id="control"></div>
</td>
</tr>
<tr>
<td align="center">
<div id="chart"></div>
<div id="table"></div>
</td>`
</tr>
</table>
</div>
</body></html>
Try This
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Name","TotalSales"],
["iPod Touch 12Gb",0],
["iPod Touch 12Gb",800],
["iPod Nano 12Gb",700],
["iPod Touch 12Gb",360]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Type', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>