HTML5 Canvas - awesome charts error - when used inside php - base64 output - html

First thanks for the awesome charts - they are simple and i am trying them out for a friends website.
A brief abt the site -it is a stock market related website trying to show a index from Bombay Stock Exchange in detail. Doing it for a friend basically for free.
The site is in wordpress and use wp exec php for inserting php into posts etc. I am trying to insert the chart html code inside php - since I get a variable data through php from a url and on the fly i define it into a csv - field like - echo $mycsvfile[49][0]; which out puts a value from 49th row 0 coloum.
So if the php ends the temp values are lost so basicallt what i have to do is - get both the java script and also html div into the php.
what i tried first was to get the div only into php to sse the default output - but the output is coming as - base64 code - ie numericals etc. I dont know how to output that into image and embed into the page - inside php.
The link being - http://www.shariah50.net/live-stock-price-quotes-shariah-index-bse/
Trying to display two images- inside php and another one pure html as u had given.
pls guide
how to output that into php and get an image
how to code the javascript into php - since i need to pass variables into the javascript.
Two ideas i had - dont know how good they are - is it ok to convert the canvas element into a jpeg or png, and secondly - can we convert the in page javascript into a php query...
Waiting for ur reply - tried to find a solution for it but couldnt online ...
What code i am using is basically below -
echo ' ';
echo ' ';
echo ' Your web-browser does not support the HTML 5 canvas element.';
echo ' ';
echo ' ';
?>
.chart_container{ text-align: center; width: 400px; height: 400px; margin: 0px 25px; float: right; }
<div class="chart_container">
<canvas id="chartCanvas11" width="400px" height="400px" float="right";>
Your web-browser does not support the HTML 5 canvas element.
</canvas>
</div>
<script type="application/javascript">
var chart11 = new AwesomeChart('chartCanvas11');
chart11.chartType = "horizontal bars";
chart11.title = "Charts";
chart11.data = [-12.62,13.3,10.06,4.27,1.96,0.78];
chart11.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
chart11.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
chart11.randomColors = true;
chart11.draw();
</script>

Ok, the basic flow is:
Create an Image element that has the base64 image string as src value. Example: <img src="data:image/png;base64,iVBORw0KG...
I don't really understand your question and how it is related to html5, but "putting javascript into php code" is the same as "putting html into php code".

Related

JSPDF pdf content is empty when using html string to be converted

I am using jsPDF to convert an HTML string to PDF page using documentation here, it says "HTML element or string contatining HTML" :
http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html
But rendered PDF does not contain anything somehow :
var doc = new jsPDF();
doc.html("<html><body style=" +'"background-color:ffffff;"' +"<div align=center><table width=600 border=0 style=background-color:#ffffff><tr><td><table width=120 border=0 align=right>"
+ "<tr><td width=30></td><td width=10>textetext</td><td width=30></td><td width=10></td><td width=30></td></tr></table></td></tr></div></body></html>", {
callback: function (doc) {
doc.save();
}
});
What am i doing wrong ? It is wrong usage of jsPDF functions with html string ? I just need to use it to make proof of concept for a requirement if it can be done or not, i know that this is not a good usage of pdf rendering here.
Thanks for your answers in advance.
My question is not valid anymore, i've changed the library that i have used to create pdf which is more easily maintained on client side which is "pdfmake" (fully text managed by margin management) :
http://pdfmake.org/playground.html
Hope that it could help anybody that visit that page.

Embedding using iFrame

I want to build a website for a local football (soccer) team but I'm not sure how I can display the league table standings on the site which are available at http://wnl.org.uk/tables.htm.
I can create an iframe but it pulls in the entire page and I only need one of the tables. I would also like to make it responsive and apply my own styles to be consistent with my theme.
It's only an amateur league so it's not available via opta or something similar so I'm unsure what's the best approach.
Can any one help - This question is more of a how can I do something rather than this is what I've got. I'm not sure how I can achieve it.
If the page you want to fetch the data from is inside your server you can use the jQuery .load() function like this: (this method is without the iframe)
<div id="target-div">
</div>
And than use this code:
$('#target-div').load('./tables.htm #main');
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of target-id, and the rest of the retrieved document is discarded.
.load() jQuery Documentation
But this can only be done if this site is inside your server, because it gets the contents using AJAX.
Hope this helps.
Another Way
If you want to do this with iframe you can use some css-tricks to display only the part of the page you want.
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe scrolling="no" src="http://wnl.org.uk/tables.htm" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;">
</iframe>
</div>
Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
The downside of this is that you will need to test different values for the margins of the iframe and the width of the div manually until you get the result you want.
Shortest way using PHP
1) Create a file "tables.htm" and leave it empty.
2) Create a file "test.php" (Make sure those are in the same folder).
3) Add there this lines of code:
<?php
$contents = file_get_contents("http://wnl.org.uk/tables.htm");
$file = fopen("tables.htm", "w") or die ("Unable to open file");
fwrite($file, $contents);
fclose($file);
echo "Successful";
?>
4) Run this file in your browser. This will write the contents of the file in that website to the file "tables.htm" in your Server.
5) Now that the file is written access its data using the .load() function I mentioned above.
<div id="target-div">
</div>
<script>
$('#target-div').load('tables.htm #main');
</script>
6) If you have option "Cron Jobs" in your host, use that to make the script "test.php" run in a specific time without you needing to run it in your browser manually.
This is the best way you can do it, and the best part is that you can change the style of the elements as well.

SVG Stack not working in Chrome (webkit)

I have been exploring using SVG's for the latest website I've been building - bit behind the times so trying to catch up. I initially setup my file similar to the way I would do a normal sprite. Although this worked, it does seem a little clumsy when you want to take advantage of resizing the vector and then trying to find the new background position in the document!
After doing some research I came across the idea of stacking it via layers - which makes a heap of sense. After getting all excited and successfully doing this I then came across a few posts saying this isn't support in all browsers - typical.
https://code.google.com/p/chromium/issues/detail?id=128055#c6
Here is a great tutorial for stacking SVG images in a single file as well as some work arounds for browsers that don't support it: http://hofmannsven.com/2013/laboratory/svg-stacking/
Although this works fine, is there an alternative to save writing all this extra code and fallbacks?
After thinking about this a little I decided I could take advantage of the Apache server and see if I could simply inject what I needed into the document. The end result? Works perfect in all browsers :)
To start with I added some code in my .htaccess file to capture all .svg requests
RewriteRule ^(.*)\.svg$ /{path-to-file}/svg.php [L]
Then I wrote a few lines to deal with the target layer and inject that into the file
(UPDATE) Added new variable called target-fill to allow for dynamically changing the fill colour of a shape if required
<?php
// Set the SVG header
header('Content-Type: image/svg+xml');
$queryString = Array();
if(isset($_SERVER['QUERY_STRING'])) $queryString = explode('&', $_SERVER['QUERY_STRING']);
// Get target from the query string
$target = $queryString[0];
// Get a fill alternative if available and valid
if(isset($queryString[1]) && hexdec($queryString[1]) !== false) {
$targetFill = '#' . $queryString[1];
} else {
$targetFill = '';
}
// Validate the target - this is your ID in the SVG file
$validTargets = Array('Camera', 'Layer_1');
if(!in_array($target, $validTargets)) $target = false;
// Get contents of the file - tweak this depending on where you have saved this file to relative to the root of your website
$filename = '../..' . $_SERVER['REDIRECT_URL'];
// Get the contents of the file
$contents = file_get_contents($filename);
// Replace the target with the valid target above
// - doing it this way rather than echoing the target in the SVG file as it seemed like a security risk
if($target) $contents = str_replace('g:target', 'g#' . $target, $contents);
// Replace the fill colour if available
$contents = str_replace('target-fill', $targetFill, $contents);
// Output the amended SVG file
echo $contents;
Included near the top of the SVG is the stacking code to hide we don't want displayed and to turn on what we do
<defs>
<style>
svg g { display: none }
svg g:target, svg g:target g { display: inline }
svg g:target * { fill: target-fill; }
</style>
</defs>
And that is it. So now instead of calling your SVG file like (also works as a background image):
<img src="images/svg-file.svg#Camera">
You would do it like this
<img src="images/svg-file.svg?Camera">
The advantage of doing it this way is you can now also do some further checks based on the user agent to return an alternative file altogether if SVG isn't supported.
(UPDATE) You can now also express a second parameter to change the fill colour if required. Use it like this:
<img src="images/svg-file.svg?Camera&cc0000">
Hope this helps someone else out there.

Progress Bar for Online Web Form

I am making a application form for a survey of sorts, and want to include a progress bar at the top showing graphically (not really high end) how far the user has got.
I've spent a while surfing the net and asking Google in various ways to do this but it all comes out with progress bar for upload/download.
I am writing the form in XHTML and CSS with a PHP handler to a MySQL Database. The general thinking seems to be ASP (a few are JQuery)to which I have no experience, if it needs to be ASP then fine, but is there any other way and if it does need to be ASP can you please help?
Thank you in advance.
Possible solutions:
Include another image on each page, showing the progress.
Use php to get the current progress and include the image.
Make a div as a progressbar with different width
...
You could even just use simple html... However, here are two possible solutions with php:
<?php
$progress = 1;
$max = 5
echo "<img src=\"progress_".$progress.".jpg\" />"
?>
where progress_1.jpg, progress_2.jpg,... are your images.
Without images - just CSS:
<?php
$progress = 70;
$max = 100;
?>
<div style="height:15px; width:<?=$max?>px; background-color:silver; padding:1px;">
<div style="height: 100%; width:<?=$progress?>px; background-color:yellow"></div>
</div>

How to convert a block of rendered HTML code or a div into a PNG?

A few notes:
a) not an entire page,
b) not from server side.
c) rendered or "treated" HTML, for instance,
<table>
<tr><td width="5%"> <td>fact 1 </td> fact 2 </td> </tr>
</table>
desired results (for the PNG):
fact 1 fact 2
fact 3 fact 4
...
not
fact 1 fact 2
fact 3 fact 4
...
The <code> "sign"nbsp; </code> may be used to create white space but again it needs to be rendered.
Probably some javascript that first acts a ua (browser) to get the rendered data first and
then transforms it into a bmp format that PNG supports... how? code sample would be much appreciated.
Many thanks.
What's wrong with generating it server-side?
EDIT: What's wrong with just using html+css? For the user it looks the same, prints the same AND it's faster, searchable and accessible AND you can easily manipulate it with Javascript. I fail to see why you would want to have the images in the first place.
This question's short answer is the same as from the other post: No, you cannot.
There are many problems you have to overcome, including but not limited to:
You would need to correctly render HTML into a bitmap. This is infinitely more difficult than it seems.
Compressing an image using PNG is not trivial, and while it's technically possible to do that with JS, it's definitely a very bad idea.
Even if you somehow manage to get around these problems, you will end up with hacky and extremely brittle code that have nearly no chance of working cross-browser.
Doing this would be like needing some
concrete and developing a Moon rocket
to harvest lunar dust to make it
instead of buying some at Home Depot.
- ceejayoz, on a similar topic
There are however alternatives (SVG, Canvas, server-side generation, ...) you might want to look at.
EDIT 2: Here's an example of images loaded directly from the HTML file
I used PHP to base64_encode those images. Here's the source:
<script type="text/javascript">
var i = 0;
var imgs = [];
<?php
$imgArray = array('angry.gif', 'pray.gif', 'think.gif');
$imgs = array_map(function ($d) {return base64_encode(file_get_contents($d));}, $imgArray);
$i=0;
foreach ($imgs as $img) {
echo 'imgs[' . $i++ . '] = "' . $img . "\";\n";
}
?>
function changeImg() {
i = (i+1) % imgs.length;
var img = document.getElementById('theImage');
img.src = 'data:image/gif;base64,' + imgs[i];
}
</script>
<body onload="changeImg()">
<input type="button" onclick="changeImg();" value="Change Image" /><br /><br />
<img src="" id="theImage" alt="" />