Annotation chart inside Wordpress page displays annotations under the chart

mortgageA

unread,

May 23, 2015, 6:42:33 PM5/23/15

to google-visua...@googlegroups.com

Hello there,

I've been struggling fora while to get the chart working inside my Wordpress template page. The problem can be seen on the screenshot:

Annotations column is located under the chart but I need it on right side. It looks like this div has incorrect size:

<div class="containerTable" id="google_chart_AnnotationChart_containerTable">

Cheers,
Oleg.

mortgageA

unread,

May 23, 2015, 6:47:26 PM5/23/15

to google-visua...@googlegroups.com

Added screenshot as attachment.

On Saturday, 23 May 2015 23:42:33 UTC+1, mortgageA wrote:

Hello there,

I've been struggling fora while to get the chart working inside my Wordpress template page. The problem can be seen on the screenshot:

problem.png

Brandon Matthews

unread,

May 24, 2015, 6:53:11 PM5/24/15

to google-visua...@googlegroups.com

Hi ...I emailed you my code, just to try to be helpful. I had a bear of a time getting my charts to load within wordpress, and given the solution I emailed you did not work, my second thought that may be of help to you, is to put the div's into tables. It works for me, and I've included a screenshot because I've been hacked beyond belief (through no fault of Google or the charts....simply because Wall street doesnt want this information public so I have a "hit" on me now) within 15 minutes of putting this information online more than a dozen times since December, and it takes about 2 to 3 weeks to to rebuild everything. This way even if they shoot me down a final time, at least I'll have a record of having accomplished it...

I sent you my code, so here's some samples of what I did with the DIV's....specific to your request is highlighted below...

<form method="POST"><p>Enter Ticker Symbol:</p>

</form></div></td>

</td></tr></tbody></table>

</td></tr></tbody></table>

(This is the annotated chart below...I think I played with max-width:100% and width:100% and for whatever reason, when with width...anyway..it works...good luck!)

<table border="2" style="width:100%; border-color:#000000";>

<tbody style="background-color:#F0F0F0";>

<tr><td>

<div id="prvoalertchart_div"></div>

</td></tr></tbody></table>

On Saturday, May 23, 2015 at 6:42:33 PM UTC-4, mortgageA wrote:

Hello there,

I've been struggling fora while to get the chart working inside my Wordpress template page. The problem can be seen on the screenshot:

...

Oleg

unread,

May 25, 2015, 4:28:10 AM5/25/15

to google-visua...@googlegroups.com

Many thanks Brandon!

I'll try to use your code on my end. Having a vanilla example from Google works though - that could be a problem with my settings. I will look into more and let you know what was the problem.

Cheers,

Oleg.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/AXOgbgzqGjE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Brandon Matthews

unread,

May 25, 2015, 7:51:39 PM5/25/15

to google-visua...@googlegroups.com

Well here...I'll go one more ....in the script below, I am using a json encoded result from a mysql search using, php. ( and how great that I had to learn all of it on my own the past year at 50 years old....and cant for the life of me even get started with java before passing out from mental exhaustion...), but I got it to work...hopefully I can use it to be able to hire a pro before I drop dead....anyway...I think the only thing you need to change in the below code, is '<?=$annotchart?>' to 'whatever json encoded data source you already use' and with the code I gave you for the html/css table script on the wordpress page, it should render exactly as mine does in wordpress,

Prerequisites:

php 5.3 or up and mysql database

1. I need an html search form on an html webpage somewhere...anywhere really but I have mine in the front page sidebar initially....

Enter Ticker Symbol:<input type="text" name="query" />

</form>

2.. You'll need a connection file to your database. I know everyone is a big fan of jumping on anyone not using mysqli, Tell it to GoDaddy. Some of us just dont have our own servers and the ability get them up to speed.

For now, I have to use the options available to me.....and I'll be dealing with GoDaddy in court. so....with mysqli not an option for me at the moment, ....

<?php

$hostname = "yourdatabasehost";

$username = "yourusername";

$dbname = "thedbname";

$password = "yourdatabasepassword";

mysql_connect($hostname, $username, $password) OR DIE ("Unable to

connect to database! Please try again later.");

mysql_select_db($dbname);

3. Save the above using any blank text editor such as word or notepad and save it as "connect.php", Upload or place the 'connect.php' file to a folder in your root directory. I named mine "functions".

4.. Get the data, ..adapt the following according to whatever database columns you might have or wish to chart , The Mysql date format is rendered as YYYY-MM-DD and that's a problem due to the "dashes" - the date needs to be modified from mysql's output format to JSON's preferred input format. The extraction process below solves this if you are querying dates from a mysql database using a single 'Ymd' formatted column as I am, and you do not have seperated columns for year, month, and day. If you have such, you may query them directly.

<?php

include("connect.php");

$query = $_POST['query'];

$query = strtoupper($query);

$query = htmlspecialchars($query);

$query = mysql_real_escape_string($query);

$180mdate = date("Ymd", strtotime("-180 days"));

$SQL="SELECT EXTRACT( YEAR FROM `date`) AS 'year',

EXTRACT( MONTH FROM `date`) AS 'month',

EXTRACT( DAY FROM `date`) AS 'day',

`close`,

`alertcode`,

`shortvolumealerts`

FROM `yourtableName`

WHERE `symbol` = '$query'

AND `date` > '$180mdate'

ORDER BY `date` ASC";

$table = array();

$table['cols'] = array(

array('label' => 'Date', 'type' => 'date', 'role' => 'domain'),

array('label' => 'Close', 'type' => 'number', 'role' => 'data'),

array('label' => '', 'type' =>'string', 'role' => 'annotation' ),

array('label' => '', 'type' =>'string', 'role' => 'annotationText')

);

$table['rows'] = $rows;

$res = mysql_query($SQL);

while($r = mysql_fetch_assoc($res)) {

$temp = array();

$r['date'] = array($r['year'], $r['month']-1, $r['day']);

$r['date'] = implode(",", $r[('date')]);

$temp[] = array('v' =>"Date(".$r['date'].")");

$temp[] = array('v' => (float) $r['close']);

$temp[] = array('v' => $r['alertcode']);

$temp[] = array('v' => $r['shortvolumealerts']);

$rows[] = array('c' => $temp);

};

$table['rows'] = $rows;

$annotchart = json_encode($table);

?>

5.. copy the above as modified to a blank text document with word or notepad, etc, and save it as a .php file;

example: 'annotchart.php',

........then upload it to the 'functions' folder in your root directory.

6. Go to your header file: /wp-content/themes/theme_name/header.php

(child themes are suggested and there are wordpress plugins that build child themes that work well so no future updates will wipe out the code being added.)

7. You'll see a lot of stuff like this:

<!DOCTYPE html>

<head>

8. place immediately after the <head> tag, the following:

9. Then you will have something that looks a lot like this:

<!DOCTYPE html>

<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

10. Here you call your data using the php function we created by adding in the following: (notice there is no visible db connection file or code here for hackers... ) and add the google chart script to create the chart...

<?php include("functions/annotchart.php"); ?>

<script type="text/javascript">

google.load("visualization", "1.1", {"packages":["annotationchart"]});

google.setOnLoadCallback(drawChart18);

function drawChart18) {

var data = new google.visualization.DataTable(<?=$annotchart?>);

var options = {

title: "<?=$query?>: Short Volume Alert Price Chart",

height: 400,

displayAnnotations: true,

displayAnnotationsFilter: true

};

var chart18 = new google.visualization.AnnotationChart(document.getElementById("prvoalertchart_div"));

chart.draw(data, options);

};

</script>

11. Create a wordpress result / return page and insert:

<table border="2" style="width:100%; border-color:#000000";>

<tbody style="background-color:#F0F0F0";>

<tr><td><div id="prvoalertchart_div">

</div></td></tr></tbody></table>

12. ...and stick something like this in there before or after and you'll be able to search from that same page,

and the results will be returned to that same page...

complete wordpress unity to go with any page setup...and the tables work well on mobile devices I should add.

<form method="POST"><p>Enter Ticker Symbol:</p>

</form></div></td>

Happy Holiday Everyone!

Here's a link to the working version...3 tables down I believe.

Normally it would not be initially accessed from the back door link I'm going to give you,

so it would not be blank to other people as they will come from the search box on the home page.

If you are not familiar with stocks, go ahead and type in 'GOOG' that's Google's symbol and you'll see the chart working in wordpress.

Only other reason it might not work Oleg, if all else fails, is that you need to increase the width of your wordpress site....

here's the back door link I promised: http://realshortdata.com/?page_id=950

Someone might as well use it before the sniper takes me out for publishing it...

yes...I'm serious....data isnt available anywhere else and they arent hacking me for customer emails,...there are only stock symbols and data in mine...,.Hopefully the FBI moves in and does something this week to save it and me.serious...i like my chances so much, I just told the world of google half of what they need to steal the data I created that doesnt exist anywhere else in the world. I dont expect I'll be around long if I succeed in defending the site from them...and I'm doing pretty good since yesterday....

Thanks everyone..it's been great being a part of this and thank you Google for helping me visualize this historical moment when the playing field on Wall Street became leveled for everyone!

I hope you all like it. From day one it was my intention that it would replace me and protect investors worldwide.

I gotta run....literally...

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Daniel LaLiberte

unread,

May 26, 2015, 8:21:44 AM5/26/15

to google-visua...@googlegroups.com

Oleg,

I suspect the problem with showing the AnnotationChart in a wordpress page involves when the chart is drawn. If it is drawn when the container you are drawing it in is not visible, then the chart doesn't know how to place things properly. But I'd have to see the page in action to tell for sure. Could you point us at a page that demonstrates the problem?

If this is the case, what can be done about it is the next question, but in general terms, you will need to find a way to delay drawing the chart until the container is visible, or force it to be visible when you do draw the chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

mortgageA

unread,

May 26, 2015, 2:59:51 PM5/26/15

to google-visua...@googlegroups.com

Hi Daniel,

I draw the chart in different way that Google's example suggested. In my environment a user enters initial parameters then the script sends POST request to the server and then it draws the chart on "success" ajax call. However, initial div placeholder is presented in HTML code and has "height" & "width" parameters specified.

Just for note that Google's example works just fine showing annotations part in proper area.

Thanks,
Oleg.

On Tuesday, 26 May 2015 13:21:44 UTC+1, Daniel LaLiberte wrote:

Oleg,

I suspect the problem with showing the AnnotationChart in a wordpress page involves when the chart is drawn. If it is drawn when the container you are drawing it in is not visible, then the chart doesn't know how to place things properly. But I'd have to see the page in action to tell for sure. Could you point us at a page that demonstrates the problem?

If this is the case, what can be done about it is the next question, but in general terms, you will need to find a way to delay drawing the chart until the container is visible, or force it to be visible when you do draw the chart.

On Sat, May 23, 2015 at 6:47 PM, mortgageA <oleg.sa...@gmail.com> wrote:

Added screenshot as attachment.

On Saturday, 23 May 2015 23:42:33 UTC+1, mortgageA wrote:
Hello there,

I've been struggling fora while to get the chart working inside my Wordpress template page. The problem can be seen on the screenshot:

Annotations column is located under the chart but I need it on right side. It looks like this div has incorrect size:

<div class="containerTable" id="google_chart_AnnotationChart_containerTable">

Cheers,
Oleg.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Reply all

Reply to author

Forward