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.
Related
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).
i'm trying to echo this
echo $row['positionX'] . " " . $row['positionY'];
as polygone points in a svg graphic code snippet
<polyline points = "...HERE..." fill = "none" stroke = "blue" stroke-width = "3"/>
how do i that?
thanks
There are other ways, depending on requirements or coding style:-
$.getJSON(....) jQuery method where the server echo json_decode($row);, then dynamically draw the polyline from JSON data (eg: RaphaelJS or SnapSVG saves you a bit of coding)
echo "<polyline points=\"$row['positionX'],$row['positionX']\" \/>";
For Single Page Application, use #1 since it is an AJAX call.
For a one time page load, #2 coding is simple enough.
Note: too many <?php echo in a HTML is hard to debug, also recommend moustache templating to help readability and code simplification.
Something like this?
<polyline points = "<?php echo $row['positionX'] . " " . $row['positionY']; ?>" fill = "none" stroke = "blue" stroke-width = "3"/>
I'm trying to make a site that loads values from a database and then displays these values in the form of gauges. I'm using a jquery plugin for the gauge's and the format for these is
<p id='NameofGauge' class='plot' style='height:100px;width:175px;float:left;' title='GaugeValue'></p>
There is a top level which displays say 4 gauges and when you click on one of these top level gauges it shows other gauges which fall into the category this top level gauge represents.
I've pulled the values from the database and can write them to a gauge, and had the side working although fully hardcoded. I'm now attempting to make the site more dynamic ie. more enteries in the database result in more gauges.
I can do this for the top level gauges or the lower level gauges, but I can't find a way to allow the lower level gauges to be displayed when a top level gauge is clicked.
Here's the code I have so far;
$mymodel2 = new model();
print "<div id='gaugearray5'>";
$Testkpiquery1 = mysql_query("select * FROM KPI where KpiSection like 'Finance'");
$TotalValue;
$number = mysql_num_rows($Testkpiquery1);
$Group = $KPIArray['KpiGroup'];
while ($KPIArray = mysql_fetch_array($Testkpiquery1, MYSQL_ASSOC)) {
$Group = $KPIArray['KpiGroup'];
$kpiname = $KPIArray['KpiName'];
$kpidescription = $KPIArray['KpiDescription'];
$Units = $KPIArray['Units'];
$Column1 = $KPIArray['Val1'];
$Column2 = $KPIArray['Val2'];
$Target = $KPIArray['Target'];
$Gauge = $KPIArray['GaugeType'];
$TestdataqueryThis = mysql_query("select * FROM data_nir where period like '201101'");
$TestdataqueryCompare = mysql_query("select * FROM data_nir where period like '201001'");
$DataArray = mysql_fetch_array($TestdataqueryThis);
$DataArrayCompare = mysql_fetch_array($TestdataqueryCompare);
$ValueNow = ($DataArray[$Column1]) / ($DataArray[$Column2] * 1.609344);
$ValueCompare = ($DataArrayCompare[$Column1]) / ($DataArrayCompare[$Column2] * 1.609344);
$ValuetoPrint = ($ValueNow * 100) / $ValueCompare;
$TotalValue = $ValuetoPrint + $TotalValue;
$TargetPerc = ($ValueNow * 100) / $Target;
$StringtoPrint .= "<p id='".$kpiname."' class='plot' style='height:100px;width:175px;float:left;' title=".$ValuetoPrint." onmouseover=GenericLabel('".$kpidescription."',".$ValueNow.",".$ValueCompare.",".$Target.",".$ValuetoPrint.",".$TargetPerc.")></p>";
}
$TotalValuetoPrint = $TotalValue / $number;
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint('".$StringtoPrint."')></p>";
print("</div>");
Because of the multiple quote marks in '$StringtoPrint' I'm having trouble getting it to pass to the javascript function LowerLevelPrint(). LowerLevelPrint() contains a document.GetElementById('breakdownlayer').innerHTML to write the contents of the string to the element 'breakdownlayer'.
I need a way to either pass this string or else a way php can write directly to the element 'breakdownlayer'.
I've only been using php for about 2 months so I'm not entirely sure how else to get this to work, any help would be appreciated.
Thanks
Edit: Using the JSON idea #Leif Wickland suggested below I've change a line to this
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";
This is what the actual gauge code then appears as;
<p id="CSP" class="plot jqplot-target" p>")="" km',3.4933572974895,3.243523598341,6,107.70253989446,58.222621624825)><\="" km',2.7133283796449e-6,2.7133283796449e-6,6,100,4.5222139660748e-5)><\="" cost="" p><p="" km',11.080618560725,10.535479658845,7,105.17431497694,158.2945508675)><\="" service="" per="" onmouseover="GenericLabel('OperatingCostperServiceKm',4.2798431771458,4.2520569037415,5,100.65347839959,85.596863542916)><\/p><p" onclick="LowerLevelPrint("<p" title="103.38258331775" style="height: 100px; width: 175px; float: left; position: relative;">
id, plot, title and the style are all correct. I'm if the middle section is what JSON is encoding the values as. The onClick event doesn't appear to pass anything other than <p and there should be 4 gauges worth of paragraphs sent through.
Instead of passing the whole <p> thing from PHP, it should be easier for the PHP to just pass back the $TargetPerc as JSON. The JQuery should then update it as necessary.
You need to ensure that the HTML you're passing to JavaScript is escaped for both HTML and for Javascript. I believe wrapping
$StringtoPrint
with calls to
json_encode(htmlspecialchars($StringtoPrint))
will fix your troubles. So, that whole line of code would look like:
print "<p id='".$Group."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode(htmlspecialchars($StringtoPrint)).")></p>";
You'll need to be running on PHP 5.2 or newer to have json_encode available. Strictly speaking, it's not necessary to HTML encode the markup with htmlspecialchars, but it's better form by far.
I'd like an easy way for content contributors with limited coding experience to designate the expiration date for selected content on existing HTML (PHP) pages on our site. I'd prefer to remove the content server-side so it isn't still available in the source code.
Illustration of a potential solution I am mulling over:
<div class="story"> ... </div>
Let's say I'd like the above div and its contents to disappear starting on June 1, 2011. So I would add a value to the class attribute:
<div class="story disappears-20110601"> ... </div>
Then I would have to write some code (xpath?) to locate all elements that have a class value with a pattern like ="... disapears-YYYYMMDD". If the date reference is valid, and that date is today or earlier, the code would remove the entire div and its contents from the DOM, and then serve the page without the expired div.
Before I try to set this up, what do you think of the concept? Is it feasible? If implemented sitewide, would it be a horrible resource hog?
A much better way is to store the content in a database table and assign the expiration date via a DATETIME field. Using a css class for this is a little square-peg.
Here is code for you:
<?php
$content = <<<EOF
<div>
some text 1
<div class="story disappears-20110101"> 20110101 </div>
<div class="story disappears-20110601"> 20110601 </div>
some text 2
</div>
EOF;
$doc = new DOMDocument();
$doc->loadHTML($content);
$xpath = new DOMXPath($doc);
$expired = $xpath->query('//*[contains(#class, \'disappears-\')]');
$remove = array();
foreach ($expired as $n)
if (preg_match('~disappears-(\d{4})(\d{2})(\d{2})~', $n->getAttribute('class'), $m))
if (time() > mktime(0, 0, 0, $m[2], $m[3], $m[1]))
$remove[] = $n;
foreach ($remove as $n)
$n->parentNode->removeChild($n);
echo $doc->saveHTML();
Have a nice day.
Well, you could do that using Regexp, but I assume it /could/ (doesn't meant it will) get a little bit messy. I suggest using a database if you have access to one, if not store the stories into separate files (in one directory) and then load/delete/edit them via file-name.
Doing that through HTML would be unpleasant, in my opinion.
EDIT:
<?php
$html_content = file_get_contents('...');
preg_match('/class="story disappears-(\d*)"/i', $html_content, $match_array)
foreach($match_array as $val) {
if (intval($val) < intval(date('Ymd'))) {
$new_html_content = preg_replace('/(<div class="story disappears-'. $val .'">.*<\/div>)/', '', $html_content);
echo $new_html_content;
}
}
?>
Just a side note, you should try debugging this first, I might've done some mistake since I didn't use php in a while. However, if you stumble upon any errors, let me know in the comments, so I can update the code.
I mean there has to be a database available. Even if the pages are hand-coded, you can have them upload each page to your server, and have the back-end create a database entry that correlates to the uploaded page. this database entry could store info about the uploaded page such as the expire date. This also makes it easier organize/serve the page.
This XPath 1.0 will select the desired elements:
//*[
20110601
>=
substring-before(
substring-after(
concat(
' ',
normalize-space(#class),
' '
),
' disappears-'
),
' '
)
]
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