Who knows about rgraph and HTML5? ( http://www.rgraph.net )
The code of my chart is the following and my problem is that I can't save the canvas (image) on the server even following their suggestion.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Title</title>
<meta name="keywords" content="rgraph javascript charts html5 canvas basic example" />
<meta name="description" content="A basic example of an RGraph chart for implementation help" />
<meta name="googlebot" content="NOODP">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.context.js" ></script>
<script src="../libraries/RGraph.common.annotate.js" ></script>
<script src="../RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.common.zoom.js" ></script>
<script src="../libraries/RGraph.common.effects.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script src="../libraries/jquery.min.js" ></script>
<script>
window.onload = function ()
{
var line1 = new RGraph.Line('line1', [3,56,22,7,84,8,34,1,1], [3,4,45,0,5,97,46,29,7]);
line1.Set('chart.background.grid', true);
line1.Set('chart.linewidth', 3);
line1.Set('chart.gutter.left', 35);
line1.Set('chart.hmargin', 5);
if (!document.all || RGraph.isIE9up()) {
line1.Set('chart.shadow', true);
}
line1.Set('chart.tickmarks', null);
line1.Set('chart.units.post', '');
line1.Set('chart.colors', ['#FA4E1D', '#2D659A']);
line1.Set('chart.background.grid.autofit', true);
line1.Set('chart.background.grid.autofit.numhlines', 10);
line1.Set('chart.background.grid.autofit.numvlines', 29);
line1.Set('chart.curvy', 0);
line1.Set('chart.curvy.factor', 0.25);
line1.Set('chart.labels',['1','2','3','4','5','6','7','8','9']);
line1.Set('chart.title','Title of the Chart');
line1.Set('chart.key.text.size',7);
line1.Set('chart.key',['A','B']);
line1.Set('chart.key.shadow','shadow');
line1.Set('chart.key.position','graph');
line1.Set('chart.ymax',200);
line1.Draw();
}
</script>
</head>
<body>
<center><h2>My title</h2><center>
<!-- 2/3. This is the canvas that the graph is drawn on -->
<div style="text-align: center">
<canvas id="line1" width="300" height="180">[Please wait...]</canvas>
</div>
</body>
</html>
The suggestion is at the end of this page: http://www.rgraph.net/docs/index.html#image at the specific paragraph "Saving the chart as an image on the server".
My only result is a 0-lenght file .png inside my server.
Could someone help me?
Thanks in advance.
Mattew
This is how I do it (you'll probably want to add some sort of validation in the PHP to prevent random uploading):
JS:
function saveImage(){
var xmlhttp;
xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//do something with the response
}
}
xmlhttp.open("POST","myImageSavingScript.php",true);
var oldCanvas = document.getElementById('line1').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.send(oldCanvas);
}
PHP:
<?php
$im = imagecreatefrompng($GLOBALS["HTTP_RAW_POST_DATA"]);
imagepng($im, 'filename.png');
?>
And this is a variation if you need to pass other parameters along with it:
JS (just the mod):
var oldCanvas = document.getElementById('line1').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
var params=oldCanvas+"&someOtherParameter=parameterValue";
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
PHP:
<?php
$params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]);
$val=split("=",$params[1]);
$someOtherParam=urldecode($val[1]);
$imgsrc=str_replace(' ','+',$params[0]);
$im = imagecreatefrompng($imgsrc);
imagepng($im, 'filename.png');
?>
Related
I am in a situation where I have to download a HTML page into PDF now. I know JSPDF is the best solution for this and I have implemented the following code but its not working...
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Invoice</title>
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/css/main.css">
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jspdf/dist/jspdf.debug.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/basic.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
</script>
</head>
<body id="target">
<div id="content">
<h3>H3 tag</h3>
<p>a Para</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
</body>
</html>
Please help me with this situation...
The following is an example of how to implement the jspdf.js library in order to create PDF pages out of the current website.
The JS libraries needed can be downloaded here:
Please contact me or write down your comment if you find any bugs.
<script type="text/javascript" src='jspdf.min.js'></script>
<script type="text/javascript" src='html2canvas.js'></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body, {
onrendered : function(canvas)
{
try
{
var canvas1 = document.createElement('canvas');
canvas1.width = canvas.width; canvas1.height = canvas.height;
var context1 = canvas1.getContext('2d');
context1.drawImage(canvas, 0,0);
options = {orientation: "0", unit: "mm",format: "a4" };
var doc = new jsPDF(options,'p', 'pt', 'a4');
var number_needed_pages = canvas.height / 900;
if(number_needed_pages < 1) number_needed_pages = 1;
for(var x=0; x < number_needed_pages ; x++)
{
var canvas2 = document.createElement('canvas');
canvas2.width = 794; canvas2.height = 900;
var context2 = canvas2.getContext('2d');
context2.drawImage(canvas1, 0 , 0 + 900*x , canvas1.width, canvas2.height, 50, 0, canvas.width, canvas2.height);
doc.addImage(canvas2.toDataURL('image/png'), 'JPEG', '', '', '');
doc.addPage();
}
doc.save("output_file.pdf");
} catch(e){alert(e);}
}
});
}
I'm new to backboneJS so i have a problem sync the data from PHP server with backbone that i dont even get the json data from the php server to backbone model!Help me
Here is my php code
$data = array('1'=>array('id'=> 1, 'description'=>'Pick up milk', 'status'=> 'incomplete' ));
echo json_encode($data);
and the backbone js code
<html>
<head>
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({});
var todoItem = new TodoItem();
todoItem.url = '/backboneJS/todo.php';
console.log(todoItem.fetch());
</script>
<body>
</body>
</html>
I cant get the json data from the php to the backbone.What wrong with my code ?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">
var TodoModel = Backbone.Model.extend({
urlRoot: '/backboneJS/todo.php',
initialize: function(){
// Place init message or else
}
});
var todoItem = new TodoModel();
todoItem.fetch({
success: function(todoResult){
console.log(todoResult);
console.log(todoItem.get(1));
}
});
</script>
</html>
Sticking to design pattern also, if you call your todoItem outside of nested function its likely to be executed before the actual fetch() is performed. Tested locally.
Can anyone tell me why this canvas won't show up? I just don't get it, it doesn't even display the tag. I'm on crunchbang 10 using chromium. All other canvases work, but this one doesn't.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
The problem is a syntax error in your JavaScript code. You're missing a ); on the closing } of the main function
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});
There's an error in your JavaScript syntax:
}) // you are missing this parenthesis
</script>
Other than that the canvas absolutely shows up. Add:
<canvas id="canvas" width="800px" height="100px" style="border: 1px solid black">
To see a border around it.
Example:
http://jsfiddle.net/RmVs4/8/
Javascript Section:
var token = $.cookie("csrf_cookie_name");
var tx = document.getElementById("tx"+working_row).value;
var mods =document.getElementById("mods"+working_row).value;
var pos = document.getElementById("pos"+working_row).value;
var startdate = document.getElementById("startdate"+working_row).value;
var enddate = document.getElementById("enddate"+working_row).value;
var fordx = document.getElementById("4dx"+working_row).value;
var qty = document.getElementById("qty"+working_row).value;
var price = document.getElementById("price"+working_row).value;
obj = new Object();
obj={'csrf_token_name':token,'tx':tx,'mods':mods,'pos':pos,'startdate':startdate,'enddate':enddate,'fordx':fordx,'qty':qty,'price':price};
alert(obj.csrf_token_name);
$.post("index.php/auth/fee_schedule",obj, function(data){
alert(data);
});
The issue I'm having is that the token variable isn't being included in the post. I'm not sure why. The Alert is [Object Object] so, null. The header of the page has the following:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Medata Preauthorzation System</title>
<link rel="stylesheet" href="<?php echo base_url();?>css/screen.css" type="text/css" media="screen">
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.sexy-combo.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url();?>css/jquery-ui-1.8.13.custom.css" type="text/css" media="screen">
<link rel="icon" type="image" href="/medata/favicon.ico">
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.impromptu.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/cookie.js"></script>
</head>
So the Library and Cookie Functions are included. I use the cookie function 10 other times on the same page to do posts and it works fine, but I don't put any of them into objects with other variables, so it's just inline alla
$.post("index.php/auth/tx_history/"+tx_code, { csrf_token_name: $.cookie("csrf_cookie_name") }, function(data){
//alert(data);
$("#price"+rowid).val(data);
});
I'd Love some Suggestions, i've been hitting my head against this code most of the afternoon for non-stop issues.
Maybe:
var token = $.cookie("<?php echo $this->config->item("csrf_cookie_name"); ?>");
I created a facebook app and the login loads but once it does that I get a blank screen. Its seems like my swf is not loading at all. This is my index.php file:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var APP_ID = "my_id";
var REDIRECT_URI = "my_url";
var PERMS = "publish_stream, user_photos"; //comma separated list of extended permissions
function init()
{
FB.init({appId:APP_ID, status: true, cookie: true});
FB.getLoginStatus(handleLoginStatus);
}
function handleLoginStatus(response)
{
if (response.session) { //Show the SWF
swfobject.embedSWF("main.swf", "flashContent", "640", "480", "9.0", null, null, null, {name:"flashContent"});
} else { //ask the user to login
var params = window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+APP_ID+'&scope='+PERMS+'&redirect_uri=' + REDIRECT_URI + params;
}
}
$(init);
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="ConnectDemo"></div>
</body>
</html>
Is there any reason why this wouldnt work?
The second parameter to the swfobject.embedSWF needs to be the id of the element to which you are injecting the SWF. You use flashContent which doesn't exist in your DOM?