TeeChart for PHP : Differences between image render and JavaScript Export - php

I try to use the right axis of TeeChart for PHP. I'm aware that we need to link a valid serie to both vertical axis. In fact, I have tried a simple test with the custom axis demo on the Steema site. I cut and pasted the demo and try to export it to javascript instead of rendering it.
I used this code to export to javascript :
echo $tChart1->getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();
Here is a snapshot of the 2 renders side-by-side (sorry to put it in a link, this forum don't allow me to post pictures yet...)
Is there a way to get the right axis to show with the export?
EDIT:
Here is the code to test on your side :
<?php
//Includes
include "../../../sources/TChart.php";
$chart1 = new TChart(600,450);
$chart1->getChart()->getHeader()->setText("Custom Axes Demo");
$chart1->getAspect()->setView3D(false);
$line1 = new Line($chart1->getChart());
$line2 = new Line($chart1->getChart());
$line1->setColor(Color::RED());
$line2->setColor(Color::GREEN());
$chart1->addSeries($line1);
$chart1->addSeries($line2);
// Speed optimization
$chart1->getChart()->setAutoRepaint(false);
for($t = 0; $t <= 10; ++$t) {
$line1->addXY($t, (10 + $t), Color::RED());
if($t > 1) {
$line2->addXY($t, $t, Color::GREEN());
}
}
$chart1->getAxes()->getLeft()->setStartPosition(0);
$chart1->getAxes()->getLeft()->setEndPosition(50);
$chart1->getAxes()->getLeft()->getAxisPen()->color = Color::RED();
$chart1->getAxes()->getLeft()->getTitle()->getFont()->setColor(Color::RED());
$chart1->getAxes()->getLeft()->getTitle()->getFont()->setBold(true);
$chart1->getAxes()->getLeft()->getTitle()->setText("1st Left Axis");
$chart1->getAxes()->getTop()->getLabels()->setAngle(45);
$chart1->getAxes()->getTop()->getTitle()->getFont()->setColor(Color::YELLOW());
$chart1->getAxes()->getTop()->getTitle()->getFont()->setBold(true);
$chart1->getAxes()->getBottom()->getLabels()->setAngle(0);
$chart1->getAxes()->getRight()->getLabels()->setAngle(45);
$chart1->getAxes()->getBottom()->getTitle()->getFont()->setColor(new Color(255,25,25));
$chart1->getAxes()->getBottom()->getTitle()->getFont()->setBold(true);
$chart1->getAxes()->getRight()->getTitle()->getFont()->setColor(Color::BLUE());
$chart1->getAxes()->getRight()->getTitle()->getFont()->setBold(true);
$chart1->getAxes()->getRight()->getTitle()->setText("OtherSide Axis");
$chart1->getAxes()->getRight()->getLabels()->getFont()->setColor(Color::BLUE());
$chart1->getAxes()->getRight()->getAxisPen()->setColor(Color::BLUE());
$chart1->getAxes()->getTop()->getTitle()->setText("Top Axis");
$chart1->getAxes()->getBottom()->getTitle()->setText("Bottom Axis");
$line1->setHorizontalAxis(HorizontalAxis::$BOTH);
$line1->setVerticalAxis(VerticalAxis::$BOTH);
$axis1 = new Axis(false, false, $chart1->getChart());
$chart1->getAxes()->getCustom()->add($axis1);
$line2->setCustomVertAxis($axis1);
$axis1->setStartPosition(50);
$axis1->setEndPosition(100);
$axis1->getTitle()->getFont()->setColor(Color::GREEN());
$axis1->getTitle()->getFont()->setBold(true);
$axis1->getTitle()->setText("Extra Axis");
$axis1->getTitle()->setAngle(90);
$axis1->setRelativePosition(20);
$axis1->getAxisPen()->setColor(Color::GREEN());
$axis1->getGrid()->setVisible(false);
echo $tChart1->getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();?>

I've modified the end of your test page to show both the HTML5 and the PHP charts at the same page:
echo $chart1->getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();
$chart1->render("chart1.png");
$rand=rand();
print '<img src="chart1.png?rand='.$rand.'">';
Then, I've modified TeeChart PHP sources to also export the custom axes and the assign.
It now looks like this:
Please, send a mail to "info#steema.com" and we'll send you the modified unit (JavaScriptExport.php).

Related

CSS Pie Chart with different PHP values

I am trying to create a CSS Pie Chart script that will display three sets of results every time, every time these results appear, they will be different. i.e I am using different pie charts across the site that will display different information.
I want to know how I would do this, I have managed to write the PHP that will give my 3 sections rotate starts and total values of each segment, but actually implementing the rest of the pie chat is quite hard.
PHP for determining size of each area and it's total rotation:
<?php
$T1 = $degree['UFIRST'];
$T2 = $degree['UUPPER'];
$T3 = $degree['ULOWER'];
$TotalTs = $T1 + $T2 + $T3;
$PieTotal = 360 / $TotalTs;
// AREA OF SLICES %'s
$Slice1 = $T1 * $PieTotal;
$Slice2 = $T2 * $PieTotal;
$Slice3 = $T3 * $PieTotal;
// ROTATION %'s
$StartSlice1 = 0;
$StartSlice2 = $Slice1 + $StartSlice1;
$StartSlice3 = $StartSlice2 + $Slice2;
?>
This is my HTML for each segment:
<div class="pie" data-start="0" data-value="<?php echo $Slice1 ?>"></div>
<div class="pie" data-start="<?php echo $StartSlice2 ?>" data-value="<?php echo $Slice2 ?>"></div>
<div class="pie" data-start="<?php echo $StartSlice3 ?>" data-value="<?php echo $Slice3 ?>"></div>
All of this is correct and works, however I don't know where to start with writting the CSS for this, as I don't wish for it to be a static pie chart.
Any ideas/help is greatly appreciated.
Please no links or mention to jQuery examples as I wish to avoid this as much as possible.
I would reccomend using Google Charts API, as it is relatively simple to implement but it requires Java Script.
Another option is to use plain CSS charts based on circles and their sectors which an example of can be found here
Well on of the best charts are jquery if you want to write it yourself you should post at least what you have so far.If you want them be dynamic you want to use js, even for static you still need to use js.Bcs entering manually css value through php is just meh.

Pagination: How to display a long text as book pages?

I have a very long text and I want to display it as a book in a web page. The user will use arrow keys to move forward and backward in same way like flipping pages of the book.
Leaving apart the transition of pages, how can this be achieved using jQuery?
What I thought was calculating the amount of text that will occupy the space on one page and then breaking the whole text into such pages and then displaying them. But it seems to be a bad idea for the space occupied will be platform dependent even if we fix the font.
One more problem that I was facing while using the space calculation method was due to the css justified display of text.
Has anyone done such thing before for a web page?
To layout a long string in a beautiful book page format. You need to get the exact string portion. You can use this function.
function get_page($text, $page_index, $line_length=76, $page_length=40){
$lines = explode("\n", wordwrap($texxt, $line_length, "\n"));
$page_lines = array_slice($lines, $page_index*$page_length, $page_length);
return implode("\n", $page_lines);
}
$line_length = 70;
$lines_per_page=50;
$page = 3;
$longtext= "...";
$page_text = get_page($longtext, $page-1, $line_length, $page_length);
See Demonstration.
Example
PHP
$longtext = "..."; // it can be retrieved from sql as well.
$index=is_int($_GET['page'])? intval($_GET['page']): 1;
$line_length = 70;
$lines_per_page=50;
$longtext= "...";
$page_text = get_page($longtext, $index-1, $line_length, $page_length);
echo json_encode(array('text'=>$page_text));
JQuery
var nextPage=2;
$.get("getpage.php", { page: nextPage }, function(data){
alert("text is "+data.text;
// show the text data.text
});

Add or Remove HTML code on Windows Resize

I'm working on a responsive website. I'm using CSS Media Queries and Adaptive Images (http://adaptive-images.com/) to render each page correctly on different devices.
My problem is that some elements are downloaded by the browser even if there are hidden! For instance, a element with the property {display:none;} is downloaded despite the fact that I don't want it.
So, here is my question: is there a way to add or remove HTML code depending on the device's screen-size?
By reading the code of "Adaptive Images" script, I saw they used a cookie, which stores the screen-size value.
<script>
document.cookie='resolution='+(window.innerWidth)+'; path=/';
window.addEventListener("resize", function() {
document.cookie='resolution='+(window.innerWidth)+'; path=/';
}, false);
</script>
So, I tried to read this cookie with a PHP function:
<?php
$fallback_res = 481;
$res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] :
$fallback_resolution; // Get the viewport resolution in $res variable
?>
It allows me to write a very useful PHP condition :
<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px
{
echo '<video>...</video>'; // Display the video
}
else { //if the screen is smaller
echo ''; // Echo something else
}
?>
It work very well. If the viewport is < 481px, the video is not downloaded. If the viewport is > 481px, the video is downloaded. But it only works, on page load! If I load the page with a 480-wide-opened-browser (=video not loaded), and then resize my browser to higher resolution, there is a big hole in the middle of the page.
What I need is to reload some part of the code on window resize. (Each time I resize the browser window, I want the $res condition to be updated automatically, and the following code as well)
Thanks.
if you combine blow jquery code with ajax , maybe you can do that .
$(window).resize(function() {
if($(window).width() > 480 )
{
#ajax code for download video
#or use .after in jquery
}
})
Html will looks like
<div id="phone">Content For the below 450px </div>
<div id="desktop">Content For the above 450px </div>
Add jQuery
if($(window).width() < 450 )
{
$('#desktop').remove();
}
else
{
$('#phone').remove();
}

A fast way (or alternate way) to dynamically load 40000 links in an image map?

I'm bringing back a GD Image which is generated from user information in a database, now on the page where this image is viewed. I have the following area map for the image generated by the same sort of query to create a link to that users profile. However, there are a possible 40000 users in the database... anyway, what I have IS working, but as you can imagine it takes a long while for it to load.
<map id="pixel" name="pixel">
<?
$map_x_1 = 0;
$map_y_1 = 0;
$map_x_2 = 5;
$map_y_2 = 5;
$block_num = 1;
while ($map_y_2 <= 1000) {
while ($map_x_2 <= 1000) {
$actual_x_cood = $map_x_1+1;
$actual_y_cood = $map_y_1+1;
$grid_search = mysql_query("SELECT *
FROM project
WHERE project_x_cood = '$actual_x_cood' AND project_y_cood = '$actual_y_cood'") or die(mysql_error());
$block_exists = mysql_num_rows($grid_search);
if ($block_exists == 1) {
echo("<area shape=\"rect\" coords=\"$map_x_1, $map_y_1, $map_x_2, $map_y_2\" href=\"/block/$block_num/\" alt=\"\" title=\"$block_num\" />\n");
} else {
echo("<area shape=\"rect\" coords=\"$map_x_1, $map_y_1, $map_x_2, $map_y_2\" href=\"/block/$block_num/\" alt=\"\" title=\"$block_num\" />\n");
}
$map_x_1 = $map_x_1 + 5;
$map_x_2 = $map_x_2 + 5;
$block_num = $block_num+1;
}
$map_y_1 = $map_y_1 + 5;
$map_y_2 = $map_y_2 + 5;
$map_x_1 = 0;
$map_x_2 = 5;
}
?>
</map>
I was thinking about just throwing in a quick jquery load screen over the top in a div and then hiding it once the page has fully loaded so it looks nicer. But I'm not really too happy with the idea of it since I would just like to load it faster.
So is there a quicker way to do it, maybe PHP? JS? Thanks!
You should consider using an input:image element. It will retreive the x-y coords as built-in functionality, and can be used in JavaScript or as part of the submission of a form.
After receiving the x-y coords, you can use a quad-tree or other algorithm for quick spacial-searching in your dataset.
you should capture the coordinates in the image map (easy with jquery) and pass it to the server which then calculates the user clicked.
i did something similar with a rate bar that hat hat 100 values (1-100%). but it was done in prototype so the code wont help you much.
small hint: i had to substract the left position of the container from the absolute click position.
in php and forms its not so flexible but far easier. you can just specify an input type image. the coordinates will be passed as post variables.
something like
will suffice

Trying to scrape the entire content of a div

I have this project i'm working on and id like to add a really small list of nearby places using facebooks places in an iframe featured from touch.facebook.com I can easily just use touch.facebook.com/#/places_friends.php but then that loads the headers the and the other navigation bars for like messges, events ect bars and i just want the content.
I'm pretty sure from looking at the touch.facebook.com/#/places_friends.php source, all i need to load is the div "content" Anyway, i'm extremely new to php and im pretty sure what i think i'm trying to do is called web scraping.
For the sake of figuring things out on stackoverflow and not needing to worry about authentication or anything yet i want to load the login page to see if i can at least get the scraper to work. Once I have a working scraping code i'm pretty sure i can handle the rest. It has load everything inside the div. I've seen this done before so i know it is possible. and it will look exactly like what you see when you try to login at touch.facebook.com but without the blue facebook logo up top and thats what im trying to accomplish right here.
So here's the login page, im trying to load the div which contains the text boxes to login the actual login button. If it's done correctly we should just see those with no blur Facebook header bar above it.
I've tried
<?php
$page = file_get_contents('http://touch.facebook.com/login.php');
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
if ($div->getAttribute('id') === 'login_form') {
echo $div->nodeValue;
}
}
?>
all that does is load a blank page.
I've also tried using http://simplehtmldom.sourceforge.net/
and i modified the example basic selector to
<?php
include('../simple_html_dom.php');
$html = file_get_html('http://touch.facebook.com/login.php');
foreach($html->find('div#login_form') as $e)
echo $e->nodeValue;
?>
I've also tried
<?php
$stream = "http://touch.facebook.com/login.php";
$cnt = simplexml_load_file($stream);
$result = $cnt->xpath("/html/body/div[#id=login_form]");
for($i = 0; $i < $i < count($result); $i++){
echo $result[$i];
}
?>
that did not work either
$stream = "http://touch.facebook.com";
$cnt = simplexml_load_file($stream);
$result = $nct->xpath("/html/body/div[#id=content]");
for ($i = 0; $i < count($result); $i++){
echo $result[$i];
}
there was a syntax error in this line i removed it now just copy and paste and run this code
Im assuming that you can't use the facebook API, if you can, then I strongly suggest you use it, because you will save yourself from the whole scraping deal.
To scrape text the best tech is using xpath, if the html returned by touch.facebook.com is xhtml transitional, which it sould, the you should use xpath, a sample should look like this:
$stream = "http://touch.facebook.com";
$cnt = simplexml_load_file($stream);
$result = $nct->xpath("/html/body/div[#id=content]");
for ($i = 0; $i < $i < count($result); $i++){
echo $result[$i];
}
You need to learn about your comparison operators
=== is for comparing strictly, you should be using ==
if ($div->getAttribute('id') == 'login_form')
{
}
Scraping isn't always the best idea for capturing data else where. I would suggest using Facebook's API to retrieve the values your needing. Scraping will break any time Facebook decides to change their markup.
http://developers.facebook.com/docs/api
http://github.com/facebook/php-sdk/

Categories