How to Display the Total Order Amount per Day in a Chart

StackOverflow https://stackoverflow.com/questions/1082526

Question

I cant seem to get this working, i need to display the Total Order Amount per day on the Chart.

I got the Open Flash chart to work by the following code:

<?php

// Settings for Database Connection
include_once($root_folder_path . "includes/common.php");
include_once("./admin_common.php");
include_once("./ofc_chart_library/open-flash-chart.php");

$sql = "SELECT * from orders ORDER BY order_placed_date";
   if (!$sql) die('Invalid query: ' . mysql_error());

$result = mysql_query($sql);

$data = array();

while($row = mysql_fetch_array($result))
{
  $data[] = intval($row['order_total']);
}

/*
 *  Create a title object and set the text to present month.
 */
$title = new title( 'Monthly Sales Statistics for ' . date("F Y") . ' (US Dollar)' );
$title->set_style( "{font-size: 18px; font-family: Calibri; color: #808000; text-align: center;}" );

//Make our Bar Chart
$bar = new bar_filled('#f99bd6', '#ee0099');
$bar->set_values($data);

//Create a new Chart object
$chart = new open_flash_chart();

// add the title to the chart:
$chart->set_title( $title );
$chart->set_bg_colour("#FFFFFF");

// Display the bar object on the chart
$chart->add_element($bar);

/*
*  Create a Y Axis object
*/
$y_axis = new y_axis();
$y_axis->set_range(0, 12000, 1000);

// Add the y-axis object to the chart
$chart->add_y_axis($y_axis);

echo $chart->toPrettyString();
?>

Now the above code displayed fine, here is the snapshot:
http://static.zooomr.com/images/7749303_49fd833a44_o.jpg

What i want is to display the Date on the X-Axis, taking the date values from my MySQL Database.

Here are how the dates are stored in my database, which is a DateTime Type:

2008-12-30 00:06:24
2009-02-03 01:57:17
2009-02-03 01:58:27
2009-05-03 01:58:48
2009-06-03 02:00:31
2009-07-03 02:01:47
2009-07-03 02:02:31
2009-07-04 14:21:18
2009-07-04 14:21:36
2009-07-04 14:22:18
2009-07-04 14:23:29
2009-07-04 14:24:24

I tried the following code to display the Date in the X-Axis:

<?php

include_once 'php-ofc-library/open-flash-chart.php';

//Connect to MySQL Database
$con = mysql_connect("localhost", "root", "password");
    if (!$con) die('Could not connect : ' . mysql_error());
$db_selected = mysql_select_db("cart",$con);
    if (!db_selected) die ("Could not find the database: " . mysql_error());

$sql = "SELECT * from orders ORDER BY order_placed_date";
    if (!$sql) die('Invalid query: ' . mysql_error());

$result = mysql_query($sql);

$amountData = array();


while($row = mysql_fetch_array($result))
{
  $amountData[] = intval($row['order_total']); 
}

$chart = new open_flash_chart();
$chart->set_title(new title('Open Flash Chart Downloads'));

//Make Bar Chart
$bar = new bar_filled('#df95c3', '#f34db7');
$bar->set_values($amountData);

//Create a new Chart object
$chart = new open_flash_chart();

/*
 *  Create a title object and set the text to present month.
 */
$title = new title( 'Monthly Sales Statistics for ' . date("F Y") . ' (US Dollar)' );
$title->set_style( "{font-size: 18px; font-family: Calibri; color: #808000; text-align: center;}" );

// add the title to the chart:
$chart->set_title( $title );
$chart->set_bg_colour("#FFFFFF");


// Add the bar object to the chart
$chart->add_element($bar);


//
// create an X Axis object
//
$x_axis = new x_axis();
// grid line and tick every 10
$x_axis->set_range(
    mktime(0, 0, 0, 1, 1, date('Y')),    // <-- min == 1st Jan, this year
    mktime(0, 0, 0, 1, 31, date('Y'))    // <-- max == 31st Jan, this year
    );
// show ticks and grid lines for every day:
$x_axis->set_steps(86400);

$labels = new x_axis_labels();
// tell the labels to render the number as a date:
$labels->text('#date:d#');
// generate labels for every day
$labels->set_steps(86400);
// only display every other label (every other day)
$labels->visible_steps(1);


// finally attach the label definition to the x axis
$x_axis->set_labels($labels);


$y_axis = new y_axis();
$y_axis->set_range(0, 3000, 200);

// Display the Axis on the Chart
$chart->set_x_axis($x_axis);
$chart->add_y_axis($y_axis);

echo $chart->toPrettyString();


?>

Here is what i got:
http://static.zooomr.com/images/7749325_1c8b37fdf9_o.jpg

the Amount is being shown, but there are all in one line at the 0 x-axis.

How can I solve this problem, so get the Order Dates from the Database and then display them on the Chart according to the date the order was placed.

============================================================

Below is the JSON data for both Order Totals and the Date they were placed.

<?php

include_once 'php-ofc-library/open-flash-chart.php';

//Connect to MySQL Database
$con = mysql_connect("localhost", "root", "password");
    if (!$con) die('Could not connect : ' . mysql_error());
$db_selected = mysql_select_db("cart",$con);
    if (!db_selected) die ("Could not find the database: " . mysql_error());

$sql = "SELECT * from orders ORDER BY order_placed_date";
    if (!$sql) die('Invalid query: ' . mysql_error());

$result = mysql_query($sql);

$dateData = array();
$TotalAmountData = array();

while($row = mysql_fetch_array($result))
{
  $TotalAmountData [] = intval($row['order_total']);
  $dateData[] = $row['order_placed_date'];

}

print '<pre>';
print_r( $TotalAmountData );
print_r( $dateData );
print '</pre>';[/code]

?>

This shows the following JSON data:

Array  // This is the Total Order Amount Per Day
(
    [0] => 2499
    [1] => 199
    [2] => 449
    [3] => 299
    [4] => 359
    [5] => 279
    [6] => 1359
    [7] => 5099
    [8] => 2621
    [9] => 2169
    [10] => 2249
    [11] => 5509
)
Array // This is the DateTime on which the orders where placed
(
    [0] => 2008-12-30 00:06:24
    [1] => 2009-02-03 01:57:17
    [2] => 2009-02-03 01:58:27
    [3] => 2009-05-03 01:58:48
    [4] => 2009-06-03 02:00:31
    [5] => 2009-07-03 02:01:47
    [6] => 2009-07-03 02:02:31
    [7] => 2009-07-04 14:21:18
    [8] => 2009-07-04 14:21:36
    [9] => 2009-07-04 14:22:18
    [10] => 2009-07-04 14:23:29
    [11] => 2009-07-04 14:24:24
)

I tried to select the Date by removing the Time from the Date:

SELECT DATE_FORMAT(order_placed_date, '%m-%d-%Y'), order_total FROM orders

But the above code showed Empty values for JSON Data

Update: Can anyone help ?

Was it helpful?

Solution

Are your values really totals per day? It looks like it's the total per order, with the date of the order.

The problem with your first graph is that you're not bucketing your values to totals per day - Open Flash Chart won't do this for you. You could do this as part of your SQL query (eg use DATE() to convert the datetimes to dates), or with PHP by parsing and reformatting the dates, and adding together values for the same day. Note that depending on how you handle the x-axis you might also need to add 0 entries for days without any orders.

The problem with your second graph is that you're setting one element per second, but your data should be per day. The important thing here is to understand the difference between line charts and scatter charts in Open Flash Chart. Line charts are plotted using a one-dimensional array of data points, whereas scatter charts are plotted with co-ordinates.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top