I am trying to use the Flot JavaScript plotting library (version 0.8.2) and excanvas.js to adapt it to IE8.
Calling $.plot(plotPlaceholder, data, options); I get the JS error 'fillStyle' is null or not an object on excanvas.js, line 230, character 5, which corresponds to a snippet:
function copyState(o1, o2) {
o2.fillStyle = o1.fillStyle;
...
}
Here is my index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script src="jquery.flot.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
data = []
data.push({data: [[63.62, 16.93]], label: 0, color: "red"});
data.push({data: [[56.1, 13.11]], label: 1, color: "blue"});
data.push({data: [[30, 13]], label: 2, color: "green"});
var options = {};
plotPlaceholder = ".results-container";
var plot = $.plot(plotPlaceholder, data, options);
});
</script>
</head>
<body>
<div class="plot-container">
<div class="results-container" style="width: 600px; height: 300px; margin:auto;"></div>
</div>
</div>
</body>
Related
I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">Hello</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.getElementById("content"), {
callback: function(pdf) {
pdf.save("cv-a4.pdf");
}
});
});
</script>
</body>
</html>
What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)
#threxx
Try this code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">
<h1 style="color: brown;">Hello, He/She..</h1>
<p style="color: green;">How Are you ??</p>
Thank you.
</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = window.document.getElementById('content').innerHTML;
doc.fromHTML(source, 30, 30);
doc.save("cv-a4.pdf");
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = document.body;
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
doc.fromHTML(source, 30, 30, {
'width': 80, // max width of content on PDF
},
function(pdf){doc.save('saveInCallback.pdf');},
margin
);
});
</script>
I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.
Here is the HTML / JavaScript and the CSS.
Your help is appreciated.
<!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" xml:lang="en" lang="en">
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<link rel="stylesheet" type="text/css" href="poolstyle.css">
<head>
</head>
<body>
<script type="text/javascript">
var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});
var GraphChannel = "xxx";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
</body>
</html>
Here is the CSS:
.outer {
margin: 0 auto;
width:1500px;
}
.inner{
display: table;
float: left;
width: 30%;
}
Couple things going on here:
move your library references to inside the <head> tags
but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>
<body>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
<script type="text/javascript">
var pubnub = PUBNUB.init ({
publish_key: 'pubkey', subscribe_key: 'subkey',
error: function (error) {console.log('Error: ', error)}});
var GraphChannel = "a";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
</body>
</html>
I'm trying to grab the <title> tag in Codemirror and set it's value as a input[type=text] value. However I keep getting an integer instead of the text.
In this sample it's "HTML5 canvas demo". Of course it changes.
DEMO
$(document).ready(function() {
var dest = $(".projectname");
var editorTitle = editor.getValue().search("<title>");
dest.val(editorTitle).val(dest.val().split(" ").join(""));
});
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
.CodeMirror, iframe {
border: 1px solid black;
}
.CodeMirror, iframe, .projectname {
float: left;
}
.CodeMirror {
width: 50%;
}
iframe {
width: 49%;
height: 300px;
border-left: 0;
}
.projectname {
width: 99.4%;
}
<!DOCTYPE html>
<html>
<head>
<title>Codemirror: Grab Title Value</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=9' />
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
</head>
<body>
<div>
<input type="text" class="projectname" placeholder="Find title tag in editor and add what's inside it here..." />
</div>
<textarea id='code' name='code'><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
hello world!
</body>
</html></textarea>
<iframe id='preview'></iframe>
</body>
</html>
The integer you are getting is the index of "<" in the title tag. To get the title you can use regEx.
var content = editor.getValue();
var openTagIndex = content.search(/<title/);
var closeTagIndex = content.search(/<\/title>/);
var titleTag = content.slice(openTagIndex , closeTagIndex);
var editorTitle = titleTag.slice(titleTag.search(/>/) + 1);
I tried to export jchartfx to canvas using html2canvas.js but it only converts other attributes into canvas but svg element is displayed as blank area. here is my code.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />
<script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/exportLibrary.js"></script>
<style>
.exportChart{}
.exportTable{max-width:700px;border:1px solid blue; margin:2px;}
</style>
<script type="text/javascript" >
var chart1;
function loadChart(){
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
var title;
title = new cfx.TitleDockable();
title.setText("Sample Demo");
chart1.getTitles().add(title);
var divHolder = document.getElementById('ChartDiv1');
PopulateCarProduction(chart1);
chart1.create(divHolder);
}
function PopulateCarProduction(chart) {
var items = [{
"Proportion": 70,
"Month": "Jan"
}, {
"Proportion": 30,
"Month": "Feb"
}];
chart.setDataSource(items);
}
</script>
</head>
<body onload="loadChart()">
<div><h1>HTML content to render:</h1>
<div id="content">
<div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>
<div class="exportTable" id="TableDiv1" style="width:600px;">
<table id="table1" >
<tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
<tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
<tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
<tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
</table>
</div>
</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="1000" height="800"></canvas>
<script type="text/javascript" src="tableexport/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>
The table is converted into canvas but svg is not converted. i need to convert svg to canvas with styles.
Here is the generated output.
It's due to security constraints. If a SVG contains any external references (foreignObject such as image data, css etc.) the browser will not allow the SVG to be drawn.
For security purposes, Gecko places some restrictions on SVG content
when it's being used as an image:
External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder [Blob] object URLs or
data: URIs.
[...]
Note that the above restrictions are specific to image contexts; they
don't apply when SVG content is viewed directly, or when it's embedded
as a document via the <iframe>, <object>, or <embed> elements.
Source
You could always save the SVG itself as an image, or if an absolute requirement, parse it using for example a library such as canvg.
I've debugged my code and realized that a method in my Javascript isn't working properly. Anyone have an idea why?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
main.js:
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
The result of document.getElementById("tetrisBoard") is a null value. Why?
Because you're calling your code prior to the elements existing. Put the script right before the closing body tag and you'll be fine.
Another solution is to do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="setup();">
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
Then, in your main.js use something like this:
function setup() {
// Your code here
}
The good thing about this is that you don't have to put the script tag in an unintuitive and unstandard spot (such as right before the end of the body).
Also you could make the script to wait until all the DOM it is loaded... like this:
using jquery
$(document).ready(function(){
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
});
vanilla JavaScript:
document.addEventListener("DOMContentLoaded", function () {
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
}, false);