I'm trying to implement this chart builder through the writing of a URL instead of building a data file, so that the chart can be implemented on the fly. I seem to be running into a bug in the reading of data by the flash file. I've been trying to pass the data from the text file into the URL and then use javascript to pull that data and insert it in the embed tag.
In my debugging process, I simply tried to paste all the text from the normal data file into the embed tag after the &data= string. It looks something like this:
I left out a bunch of the data, but you get the picture. The result when loading this html file is a background with an animated icon that says "Loading data..." indefinitely. Does passing a text file into flash create a different set of circumstances than simply replacing the text?
Thanks for any help on this.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Yes, I wouldn't expect what you are doing to work.
I have fixed the next version of Open Flash Chart to load data either from an external file or by passing values in using the SWFObject.
I forget the exact Javascript syntax but it is something like:
o.set_parameter( 'title', 'My Chart Title' );
This would be inside the swfobject javascript bit on the page. The data file variables will map exactly to these swfobject variables, because the same code will parse them.
I am still testing this, but it seems to work OK. I will do a release as soon as I get Internet Access at home. This should be this month sometime.
If I were you I'd wait for the next release :-)
monk.e.boy
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I am also very interested in this. It will help to be able to have my blog plugin generate straight JS and HTML without me going and writing a data.php file elsewhere for it to look at. DO WANT!
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I didn't know 2.0 was out. I expect it'll work with any version you like, writing out flash parameters is very basic functionality and should be supported in all versions.
I will upgrade to 2.0 though.
monk.e.boy
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thank you for your work on this. I was looking around for some flash charting s/w and I think I have settled on this!
I have one related request. I need to generate charts dynamically by pinging the database based on query parameters passed in from the URL. What I was hoping to accomplish is this:
In the chart-data.php file, I would like to extract this "p" value and then make the appropriate database connection. I tried doing a $_REQUEST for "p" but I am unable to do so.
Is there any way to do it ?
thanks in advance!
kreaper
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I was foolishly attempting to retrieve the value and "print" it (for testing). The REQUEST object is indeed passed to the chart-data.php. I was able to use it in my query (just not able to print it anywhere and that threw me off!)
kreaper
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
How to do this kind of debugging using Open flash Chart. Personally I type the data URL in and browse the results, so I chuck in some echo commands to see what is passed in (well my fav is print_r( $_GET ) )
When it all looks ok, I remove the echos (or sometimes I have:
Yes and no. I see where you are going with this, but not as easy as passing the data in the function. That would be awesome to have a php function pre-made. I am looking at writing a module for drupal so they can use these graphs. I think all the js code would be too much so a function would be best. For consistency I suggested the above method of doing it. Maybe taking the open_flash_chart_object function and running a parse_url against it to check if it's a url or not and then make your decision based on that. Something like:
function _ofc()
if (parse_url($url))
{
$url = urlencode($url);
}
Then if it is a url then it will pass the url otherwise it will pass the data as variables. I'm taking some guesses on how the code works, but hopefully you get the idea.
Adam
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
May be I am missing something, but what is being discussed here is already doable with the stock code.
I use a *slightly* different method. My interests were in passing some variables to the chart-data.php that would then make appropriate database calls to extract the data and render the chart. However, this method can also be used to simply pass the chart data itself.
The REQUEST and GET METHODs are indeed available to the chart-data.php file. So it is simply a matter of parsing the HEADER and getting the data out.
Hmm looking at your example it's not quite what I'm looking for I don't think. I'm trying to work this out in my head. This would be the ideal situation for the code to work.
// label each point with its value
$g->set_x_labels( $monthLabels );
// set the Y max
$g->set_y_max( 500 );
// label every 50 (0,50,100,150)
$g->y_label_steps( 10 );
// This part doesn't exist.
$g->set_width( 500 );
$g->set_height( 250 );
//out comes the code for the flash object.
echo $g->render();
Hope that makes sense. Your post has made me think though is there a way I can rewrite the current php library to fit my situation. Can I pass variables to the flash object the same way as width and height is done? Something like
and render_js() gets the info from render(); and then builds the js output. What I'm looking for here is conistency and less include files. Fair warning, I am by no means an expert php developer. So this may be not possible for some reason.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Looking through the source of open-flash-chart.php I was hoping to use the methods that already exist, but they seem to get formatted as soon as they are called. For example the set_data() method adds a \r\n. That would exclude me from adding it to the js variable without stripping those correct? monk. e. boy, are you looking to implement the function in the near term? If not then am I getting closer with this code? Do I have to modify the current methods?
//increment a value for multiple charts.
function increment_occurence()
{
$this->occurence++;
}
//set the width of the flash chart.
function set_width( $width )
{
$this->width = $width;
}
//set the height of the flash chart.
function set_height( $height )
{
$this->height = $height;
}
//set the base of the js location.
function set_base( $base='js/' )
{
$this->base = $base;
}
I just emailed you an updated open-flash-chart.php file. It adds new functions and makes adjustments to the existing ones to remove the labels for example some methods returned y_max=..... which doesn't work in the js. I need some help with the data and the lines so if you could take a look at it that would help.
Thanks,
Adam
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
First of all compliments with a capital "C" for this fine application!
I guess this is the most appropriate thread to add my post: In my current setup I also pass data to the swf through swfobject. I have need for the right y-axis to display additional data, however I cannot seem to get it displayed using so.addVariable:
This works (using a test data file):
&title=Testplot& &show_y2=true&
This does not (using swfobject):
so.addVariable("variables","true");
so.addVariable("title","Testplot");
so.addVariable("show_y2","true");
Any insights as to where I should delve into which code would be extremely useful!
Thanks, Plivius.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thanks Jason, monk.e.boy,
I had also tried to reproduce example data-36, unfortunately without success.
Inspired by comments above, I came up with a shortcut: A simple php-function parses all variables into the data-file format. Then I pass all variables to a template php script, acting as a data-file.
*** Main page HTML/PHP/JS ***
function getOFCqueryString () {
$returnString = "";
$arg_list = func_get_args();
foreach ($arg_list as $arg) {$returnString .= "&".trim($arg)."& ";}
return base64_encode($returnString);
}
*** Main page HTML/PHP/JS (embedding open-flash-chart.swf) ***
so.addVariable("data", "ofc_parsedata.php?ofc_query=<?=getOFCqueryString("title=Testplot","show_y2=true")?>");
*** IN TEMPLATE PHP FILE (ofc_parsedata.php) ***
echo base64_decode($_GET['ofc_query']);
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I'm trying to implement this chart builder through the writing of a URL instead of building a data file, so that the chart can be implemented on the fly. I seem to be running into a bug in the reading of data by the flash file. I've been trying to pass the data from the text file into the URL and then use javascript to pull that data and insert it in the embed tag.
In my debugging process, I simply tried to paste all the text from the normal data file into the embed tag after the &data= string. It looks something like this:
<embed src="open-flash-chart.swf?width=500&height=250&data=&title=My%20Title
...
&tool_tip=%23val%23&" quality="high" bgcolor="#d1e0bc" width="900" height="250" name="open-flash-chart" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
I left out a bunch of the data, but you get the picture. The result when loading this html file is a background with an animated icon that says "Loading data..." indefinitely. Does passing a text file into flash create a different set of circumstances than simply replacing the text?
Thanks for any help on this.
Astenfte,
Yo.
Yes, I wouldn't expect what you are doing to work.
I have fixed the next version of Open Flash Chart to load data either from an external file or by passing values in using the SWFObject.
I forget the exact Javascript syntax but it is something like:
o.set_parameter( 'title', 'My Chart Title' );
This would be inside the swfobject javascript bit on the page. The data file variables will map exactly to these swfobject variables, because the same code will parse them.
I am still testing this, but it seems to work OK. I will do a release as soon as I get Internet Access at home. This should be this month sometime.
If I were you I'd wait for the next release :-)
monk.e.boy
I am also very interested in this. It will help to be able to have my blog plugin generate straight JS and HTML without me going and writing a data.php file elsewhere for it to look at. DO WANT!
This has been implemented but not released yet.
I have added the functionality so you can use the swfobject to add parameters like (I can't remember the exact syntax! But it is like:)
Javascript:
swfobj.add_parameter( 'x_axis_legend', 'hello!,{color: #00ff00; size: 33px}' );
The parameters are the same as in the data file.
Does that make sense? So you *need* swfobject (or you need to code your own <object> and <embed> by hand)
When the next version is released I will do a nice example :-) so don't worry too much.
The code will do exactly what you want!
monk.e.boy
what version(s) of swfObject will be supported? Will it work with 2.0?
Thanks,
Troy
Troy,
I didn't know 2.0 was out. I expect it'll work with any version you like, writing out flash parameters is very basic functionality and should be supported in all versions.
I will upgrade to 2.0 though.
monk.e.boy
monk.e.boy
Thank you for your work on this. I was looking around for some flash charting s/w and I think I have settled on this!
I have one related request. I need to generate charts dynamically by pinging the database based on query parameters passed in from the URL. What I was hoping to accomplish is this:
open_flash_chart_object( 500, 300, 'chart-data.php?p=4094');
In the chart-data.php file, I would like to extract this "p" value and then make the appropriate database connection. I tried doing a $_REQUEST for "p" but I am unable to do so.
Is there any way to do it ?
thanks in advance!
kreaper
/false alarm!/
I was foolishly attempting to retrieve the value and "print" it (for testing). The REQUEST object is indeed passed to the chart-data.php. I was able to use it in my query (just not able to print it anywhere and that threw me off!)
kreaper
Kreaper,
Now that is an interesting thought.
How to do this kind of debugging using Open flash Chart. Personally I type the data URL in and browse the results, so I chuck in some echo commands to see what is passed in (well my fav is print_r( $_GET ) )
When it all looks ok, I remove the echos (or sometimes I have:
if( isset( $_GET['debug'] ) )
{
echo '<html><head></head><body>';
print_r( $_GET );
echo '<br><br><br><br>';
}
// do data stuff here
if( isset( $_GET['debug'] ) )
{
echo '</body></html>';
}
Then I browse to 'data.php?debug=1&page=99&user_id=123'
This is quite nice.
Maybe I'll do a tutorial on this? What do you think? Any other tips?
monk.e.boy
I debug the same way by going straight to the data file.
Back to the original topic. Is this change going to allow putting data directly in the function. I would like to be able to do something like this.
$g = new graph();
// Title
$g->title( 'Unique Monthly Clicks '. $year, '{font-size: 26px;}' );
$g->set_data( $data );
$g->line_hollow( 2, 4, '0x80a033', 'Clicks', 10 );
// label each point with its value
$g->set_x_labels( $monthLabels );
// set the Y max
$g->set_y_max( 500 );
// label every 50 (0,50,100,150)
$g->y_label_steps( 10 );
// display the data
open_flash_chart_object( 500, 250, $g->render(), false );
Is that available or will something like it be?
http://teethgrinder.co.uk/open-flash-chart/tutorial-js.php
does this help?
I am currently writing the PHP to do this for you.
monk.e.boy
Yes and no. I see where you are going with this, but not as easy as passing the data in the function. That would be awesome to have a php function pre-made. I am looking at writing a module for drupal so they can use these graphs. I think all the js code would be too much so a function would be best. For consistency I suggested the above method of doing it. Maybe taking the open_flash_chart_object function and running a parse_url against it to check if it's a url or not and then make your decision based on that. Something like:
function _ofc()
if (parse_url($url))
{
$url = urlencode($url);
}
Then if it is a url then it will pass the url otherwise it will pass the data as variables. I'm taking some guesses on how the code works, but hopefully you get the idea.
Adam
May be I am missing something, but what is being discussed here is already doable with the stock code.
I use a *slightly* different method. My interests were in passing some variables to the chart-data.php that would then make appropriate database calls to extract the data and render the chart. However, this method can also be used to simply pass the chart data itself.
The REQUEST and GET METHODs are indeed available to the chart-data.php file. So it is simply a matter of parsing the HEADER and getting the data out.
working off of memory (do not have my code handy)
open_flash_chart_object( 500, 300, 'chart-data.php?title=My%20Data&x_series=1:2:3:4:5&y_values=34:45:65:67&x_legend_color=ffffff&........');
In the chart-data.php file
$chart_title = $_GET['title'];
$x_series=$_GET['x_series']; // and then split the series using split()
$y_series=$_GET['y_values'];
...
am I discussing the same problem as yours ?
kreaper
Hmm looking at your example it's not quite what I'm looking for I don't think. I'm trying to work this out in my head. This would be the ideal situation for the code to work.
$g = new graph();
// Title
$g->title( 'Unique Monthly Clicks '. $year, '{font-size: 26px;}' );
$g->set_data( $data );
$g->line_hollow( 2, 4, '0x80a033', 'Clicks', 10 );
// label each point with its value
$g->set_x_labels( $monthLabels );
// set the Y max
$g->set_y_max( 500 );
// label every 50 (0,50,100,150)
$g->y_label_steps( 10 );
// This part doesn't exist.
$g->set_width( 500 );
$g->set_height( 250 );
//out comes the code for the flash object.
echo $g->render();
Hope that makes sense. Your post has made me think though is there a way I can rewrite the current php library to fit my situation. Can I pass variables to the flash object the same way as width and height is done? Something like
open-flash-chart.swf?width=500&height=250&data=70,160,190,50...etc.
Adam
I think I'm a bit lost here.
Let me explain what I am coding (you gave me some good ideas in the code above :-) )
$g = new graph();
$g->title( 'Unique Monthly Clicks '. $year, '{font-size: 26px;}' );
$g->set_data( $data );
$g->line_hollow( 2, 4, '0x80a033', 'Clicks', 10 );
$g->set_x_labels( $monthLabels );
$g->set_y_max( 500 );
$g->y_label_steps( 10 );
//
// this is yet to be written:
//
$chart = open_flash_chart_object_2( 500, 300, $g );
// make the page
echo $chart;
------------------------------------------------------------------
Now open_flash_chart_object_2() will call a NEW method in the graph object called 'render_js()'
open_flash_chart_object_2() will output:
<div id="my_chart"></div>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfobject.js">
var so = new SWFObject("open-flash-chart.swf", "ofc", "250", "200", "9", "#FFFFFF");
so.addVariable("variables","true");
so.addVariable("title","Test,{font-size: 20;}");
so.addVariable("y_legend","Open Flash Chart,12,0x736AFF");
so.addVariable("y_label_size","15");
so.addVariable("y_ticks","5,10,4");
so.addVariable("bar","50,0x9933CC,Page views,10");
so.addVariable("values","9,6,7,9,5,7,6,9,9");
so.addVariable("x_labels","Jan,Feb,Mar,Apr,May,Jun,Jul,Aug");
so.addVariable("x_axis_steps","2");
so.addVariable("y_max","20");
so.write("my_chart");
</script>
------------------------------------
So in our example above, the $chart contains the above string. Then you can dump it where you need it on the page.
Does this do what you want?
I hope that makes sense.
If this does not do what you guys are talking about, could you post some 'I wish it would work like this' code :-)
Cheers dudes.
monk.e.boy
Looks good and is pretty much what I want. I just have a question. Is it necessary to have this function?
$chart = open_flash_chart_object_2( 500, 300, $g );
In other words is it possible to do add 4 new methods to the object
$g->set_Width();
$g->set_Height();
$g->set_Base();
$g->render_js();
and render_js() gets the info from render(); and then builds the js output. What I'm looking for here is conistency and less include files. Fair warning, I am by no means an expert php developer. So this may be not possible for some reason.
See I told you I'm not an expert php developer. The whole part about render_js() gets the info from render() was ignorance speaking.
Looking through the source of open-flash-chart.php I was hoping to use the methods that already exist, but they seem to get formatted as soon as they are called. For example the set_data() method adds a \r\n. That would exclude me from adding it to the js variable without stripping those correct? monk. e. boy, are you looking to implement the function in the near term? If not then am I getting closer with this code? Do I have to modify the current methods?
//increment a value for multiple charts.
function increment_occurence()
{
$this->occurence++;
}
//set the width of the flash chart.
function set_width( $width )
{
$this->width = $width;
}
//set the height of the flash chart.
function set_height( $height )
{
$this->height = $height;
}
//set the base of the js location.
function set_base( $base='js/' )
{
$this->base = $base;
}
function js_render()
{
$this->increment_occurence();
$tmp = '';
$tmp .= '<div id="my_chart' . $this->occurence . '"></div>
<script type="text/javascript" src="' . $this->base . 'swfobject.js"></script>
<script type="text/javascript" src="' . $this->base . 'swfobject.js">
var so = new SWFObject("open-flash-chart.swf", "ofc", "'. $this->width . '", "' . $this->height . '", "9", "#FFFFFF");
so.addVariable("variables","true");
so.addVariable("title","' . $this->title . ',{' . $this->title_style . '}");
so.addVariable("y_legend","' . $this->y_legend . '");
so.addVariable("y_max","' . $this->y_max . '");
so.write("my_chart' . $this->occurence . '");
</script>';
return $tmp;
}
I just emailed you an updated open-flash-chart.php file. It adds new functions and makes adjustments to the existing ones to remove the labels for example some methods returned y_max=..... which doesn't work in the js. I need some help with the data and the lines so if you could take a look at it that would help.
Thanks,
Adam
Adam,
Thanks, I will check my emails :-)
BTW your PHP code seems fine :-) I guess you are now a seasoned open source developer :-)
monk.e.boy
First of all compliments with a capital "C" for this fine application!
I guess this is the most appropriate thread to add my post: In my current setup I also pass data to the swf through swfobject. I have need for the right y-axis to display additional data, however I cannot seem to get it displayed using so.addVariable:
This works (using a test data file):
&title=Testplot& &show_y2=true&
This does not (using swfobject):
so.addVariable("variables","true");
so.addVariable("title","Testplot");
so.addVariable("show_y2","true");
Any insights as to where I should delve into which code would be extremely useful!
Thanks, Plivius.
astenfte:
Have you thought about using getQueryParam with SWFObject?
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</script>
In my opinion that would be an extremely easy way to pass data in.
See: http://blog.deconcept.com/swfobject/
Plivius: Yep tested, no combination of show_y2 could I get to work.
Jason, Plivius,
I am working on your PHP code at the moment :-)
I will check the 2nd Y axis when I get home. It should work?
Take a look at:
http://teethgrinder.co.uk/open-flash-chart/gallery-data-36.php
http://teethgrinder.co.uk/open-flash-chart/gallery-y-axis-4.php
You need to attach one of the lines of data to the right Y axis:
&y2_legend=Free Ram (MB),12,#164166&
&y2_lines=2&
&show_y2=true&
&y2_max=1700&
&y2_axis_colour=#164166&
So these variables need to be set using swfobject. This will all be SO much easier when I have finished the PHP wrapper :-)
oh, y2_lines attaches the 2nd data set to the right Y axis, so &y2_lines=1,2& would attach sets 1 and 2 to the right axis.
Cheers,
monk.e.boy
Here's a sample monk-e-boy using the data-36 example data:
I can't get it to produce correctly and I think the variables are all identical etc.
<div id="MyChart" style="width:500; height:500; display:block;"></div>
<script type="text/javascript">
var so = new SWFObject("chart/open-flash-chart.swf", "MyChart", "600", "600", "9", "#FFFFFF");
so.addVariable("variables","true");
so.addVariable("title","Users vs. Ram - 24h statistics,{color: #7E97A6; font-size: 20; text-align: center}");
so.addVariable("x_legend","My IRC Server,12,#164166");
so.addVariable("x_label_style","10,#164166,0,3,#818D9D");
so.addVariable("y_legend","Max Users,12,#164166");
so.addVariable("y2_legend","Free Ram (MB),12,#164166");
so.addVariable("y_ticks","5,10,5");
so.addVariable("line_dot","2,#818D9D,Max Users,10,4");
so.addVariable("line_hollow_2","2,#164166,Free Ram,10,4");
so.addVariable("values","289,198,143,126,98,96,124,164,213,238,256,263,265,294,291,289,306,341,353,353,402,419,404,366,309");
so.addVariable("values_2","698,1101,1324,1396,1568,1571,1496,1349,1140,1045,966,926,906,754,766,757,672,510,431,436,227,533,566,744,1004");
so.addVariable("y2_lines","2");
so.addVariable("show_y2","true");
so.addVariable("x_labels","00:00,01:00,02:00,03:00,04:00,05:00,06:00,07:00,08:00,09:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00,17:00,18:00,19:00,20:00,21:00,22:00,23:00,24:00");
so.addVariable("y_min","0");
so.addVariable("y_max","600");
so.addVariable("y2_max","1700");
so.addVariable("bg_colour","#FFFFFF");
so.addVariable("x_axis_colour","#818D9D");
so.addVariable("x_grid_colour","#F0F0F0");
so.addVariable("y_axis_colour","#818D9D");
so.addVariable("y_grid_colour","#ADB5C7");
so.addVariable("y2_axis_colour","#164166");
so.addVariable("tool_tip","#key#<br>#val# (#x_label#)");
so.write("MyChart");
</script>
Thanks Jason, monk.e.boy,
I had also tried to reproduce example data-36, unfortunately without success.
Inspired by comments above, I came up with a shortcut: A simple php-function parses all variables into the data-file format. Then I pass all variables to a template php script, acting as a data-file.
*** Main page HTML/PHP/JS ***
function getOFCqueryString () {
$returnString = "";
$arg_list = func_get_args();
foreach ($arg_list as $arg) {$returnString .= "&".trim($arg)."& ";}
return base64_encode($returnString);
}
*** Main page HTML/PHP/JS (embedding open-flash-chart.swf) ***
so.addVariable("data", "ofc_parsedata.php?ofc_query=<?=getOFCqueryString("title=Testplot","show_y2=true")?>");
*** IN TEMPLATE PHP FILE (ofc_parsedata.php) ***
echo base64_decode($_GET['ofc_query']);