ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

PHP, MySql and Yahoo Flash Charts, yahoo dev network

Updated on January 17, 2014

Screen shot of Chart Poll

Screen shot of polling chart
Screen shot of polling chart

Using the Yahoo Flash chart API

Today we will do a chart using PHP, MySql and Yahoo Astra API (charts).

The list of books that can be used as reference depending on level of comfort can be found below.

Our poll will be using PHP as scripting language, a MySql data base and the Yahoo Dev Network Flash API.

Some comfort level with javascript would help, but is not necessary.

Using your MySql console or however you create your databases and tables, you can run this simple query:

CREATE TABLE chartTbl (
'chartId' INT NOT NULL AUTO_INCREMENT ,
'chartVal' INT NOT NULL ,
'chartStamp' DATETIME NOT NULL ,
PRIMARY KEY ( `chartId` )
) ENGINE = MYISAM COMMENT = 'Sample Chart Table'

Afterwards creating the table run this:

INSERT INTO `chartTbl` (`chartId`, `chartVal`, `chartStamp`) VALUES
(1, 1, '2009-04-02 16:14:03'),
(2, 2, '2009-04-02 16:14:07'),
(3, 2, '2009-04-02 16:14:21'),
(4, 1, '2009-04-02 16:14:28'),
(5, 1, '2009-04-02 16:14:32'),
(6, 3, '2009-04-02 16:14:39'),
(7, 1, '2009-04-02 16:14:44');

Now what we've done above is to create a db and a table that will hold our poll results.

Now we can connect to it and display the information, but before we do so, we need to create a small form that will insert the poll results into the database (db).

Form:

<form action="<?=$_SERVER['PHP_SELF'];?>" method="post"/>
<ul>
<li><input type="radio" id="like_1" name="pbj" value="1"/> Oh Yeah</li>
<li><input type="radio" id="like_2" name="pbj" value="2"/> No Way</li>
<li><input type="radio" id="like_3" name="pbj" value="3"/> Its Cool...</li>
</ul>
<div align="center">
<input type="submit" name="Submit" value="Show what ya Like!" />
</div>
</form

Short, simple and sweet, you can style the form and the holding contents however you want, and there are the styles that are included in the source (src) file.

Now the first thing you want is some kind of validation, No EMPTY form values in the db.

This how we do that:

if(empty($_POST['pbj'])){

Notice in bold the $_POST is the same name as the radio button, the reason being is so we can relate that value to another when we process the form.

Not if all goes as plan for the above snippet, the form will show again, with some feedback, now you can do alot of things with javascript, CSS, but in this particular sample we are using the PHP to check things out before we insert the values.

If the value that we are looking for is filled in (radio button), we can begin insertion.

$sql = "insert into chartTbl (chartVal,chartStamp) values('" . $_POST['pbj'] . "',now())";

Look at the things in bold starting from left to right:

  1. The name of the table chartTbl
  2. There is the name of the radio button
  3. NOW(), this is just a function that will give the record a stamp, this can be used to show when the record was created, and if you track users to show the stamp etc.

Now in our example if all goes well with our script, a new message will be on the screen,"I guess you like it!", do whatever you want with this, it is the logic of this that is important.

Along with message the form will be shown, along with a link to show the poll results.

With our example the poll results are shown by using a querystring the value is: $_GET['showMePoll'].

Look at the address bar after you submit the form.

You will see something like this:

http://diadde.com/test/charts/chartTest.php?showMePoll=true

And this is all we look for to show it.

<?php if(isset($_GET['showMePoll'])){?>

It reads; if this is set do whatever is below and in between the code, which is just this.

<div id="chart"></div>

That is the tag of the div element that holds all the code for the yahoo dev api:

Here it is:

<!--insert yahoo chart stuff here-->
<script type="text/javascript">
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
YAHOO.example.pbj =
[
{ response: "Yes", count: <?=$row['yes'];?>},
{ response: "No", count: <?=$row['no'];?>},
{ response: "Maybe", count: <?=$row['maybe'];?>}
]

var subData = new YAHOO.util.DataSource( YAHOO.example.pbj );
subData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
subData.responseSchema = { fields: [ "response", "count" ] };
var mychart = new YAHOO.widget.PieChart( "chart", subData,
{
dataField: "count",
categoryField: "response",
style:
{
padding: 20,
legend:
{
display: "right",
padding: 10,
spacing: 5,
font:
{
family: "Arial",
size: 13
}
}
},
//only needed for flash player express install
expressInstall: "assets/expressinstall.swf"
});
</script>

This is the same code from the yahoo library that is free to everyone, now in the code above notice this:

{ response: "Yes", count: <?=$row['yes'];?>},
{ response: "No", count: <?=$row['no'];?>},
{ response: "Maybe", count: <?=$row['maybe'];?>}

In bold are the results of a query at the top of our page that is giving the values to the script text, here is the query:

if(isset($_GET['showMePoll'])){
###########################
//this is for the chart
$sql="select distinct (select count(chartVal) from chartTbl where chartVal = 1) as yes,";
$sql.="(select count(chartVal) from chartTbl where chartVal = 2) as no,";
$sql.="(select count(chartVal) from chartTbl where chartVal = 3) as maybe";
$sql.=" from chartTbl";
$result = mysql_query($sql);
$row = mysql_fetch_assoc($result);
//echo $sql;
//return;
###########################
}

Look at the very top of that script in bold, if isset, the reason I am using this is because, if we call the page using the querystring again, then I want to do the query, not before, be aware of the things in your app or page, you don't want unnecessary queries or widgets running without needing them.

This line here (from the script)

$row = mysql_fetch_assoc($result);

Is where we assign the value to the variable $row

This is little tricky, but I can explain in another tutorial in a little more detail, we are using subsqueries in this code snippet.

Take this:

$sql="select distinct (select count(chartVal) from chartTbl where chartVal = 1) as yes,";
$sql.="(select count(chartVal) from chartTbl where chartVal = 2) as no,";
$sql.="(select count(chartVal) from chartTbl where chartVal = 3) as maybe";

Notice they are using the same column name chartVal, in our insert no matter what value came from the form we put it in the db, since these are different values we need to separate by type:

  • 1 = yes
  • 2 = no
  • 3 = maybe

Simple, the sub query takes care of that along with giving them an alias (as yes for 1) so that the query won't have problems finishing, otherwise it would stop and kick off an error; we don't want that, we just want our flash chart.

Anyway after that query runs, it fills in the variables that are being called inside the yahoo script, painless.

Now alot of other charts can be used in the same manner as this, you have to read through the yahoo dev page, and see what works for your situation.

Also, this is just an example and by far not the ony way you can go about assembling or managing some app or page, there are more elegant ways to do it.

Take it and get comfortable and looking forward to having you read my articles again.


Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      landing page design 

      7 years ago

      Loving and amazing , I like it .

    • profile image

      real soft 

      7 years ago

      I've never used any of yahoo's developer API's but this looks awesome, especially with the flash integration.

    • profile image

      Flash video news 

      8 years ago

      Thanks for this great article. I've never used any of yahoo's developer API's but this looks awesome, especially with the flash integration. I wonder what other more advanced methods can be used in conjunction with this...

    • Alpho011 profile imageAUTHOR

      Alpho011 

      8 years ago from Marietta, Georgia

      @adorababy it sure does.

    • adorababy profile image

      adorababy 

      8 years ago from Syracuse, NY

      The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies.

    • profile image

      vczawqerfsdsdk 

      8 years ago

      Montage has put together an interesting package with their convertible Plaid Hip Bag. With the ability classic shoes to be worn as a hip bag, the top compartment also opens up to turn into a full fledged backpack. A small Montage patch is seen over the plaid print in cheap UGG Classic Cardy boots three colors. Available for Classic UGG 5819 Cardy Boots pre-order at eproze.

    • profile image

      tall boots 

      8 years ago

      classic tall uggs sale

      classic tall ugg boots black

      classic tall ugg boots sand

    • tonyhubb profile image

      tonyhubb 

      8 years ago

      Thanks for such a great article.

    • psychicdog.net profile image

      psychicdog.net 

      9 years ago

      Thanks Alpho011, I can definitely adapt this for a poll on my site. Did you know though that the downloadable script doesn't have (used pseudo code as these post wont accept the real thing)

      { response: "Yes", count: php yes code},

      { response: "No", count: php no code},

      { response: "Maybe", count: php maybe code}

      but the yahoo.example.

      Thanks heaps for this tutorial.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)