Written
If your form is collecting data it may be useful to display some of the results as a chart. This FAQ is a simple demonstration of using the pChart library with ChronoForms.
To follow this FAQ you will need to download the pChart library from here, you will also find full documentation on using the library on the pChart wiki.
Unzip the pChart file, rename the enclosed folder to pChart ( to remove the version number) and upload the whole folder to your site into a new components/com_chronoforms/extras folder.
Create a second new folder for chart images as components/com_chronoforms/charts
You can use other locations on your site if you prefer. You will then need to modify the example code below.
Check that the library is working by browsing to http://your_domain.com/components/com_chronoforms/extras/pChart/examples/ to view the pChart example library.
Create a new test form with the Wizard Edit.
Drag a Custom Element element from the Advanced group into the Preview box. Open the element and add this code:
<?php echo $form->data['pchart']; ?>
You can add other HTML or form elements if you like.
Click the Events tab and drag a Custom Code action and a Show HTML action into the On Load event.
Open the Custom Code action and copy and paste this code into it:
<?php
/* Generate random chart data */
function rand_array ( $total = 6, $min = 1, $max = 30 ) {
$rand = array();
while ( count($rand) < $total ) {
$rand[] = mt_rand($min, $max);
}
return $rand;
}
/* CAT:Area Chart */
/* pChart library inclusions */
$pchart_path = JPATH_SITE.'/components/com_chronoforms/extras/pChart/';
require_once $pchart_path.'class/pData.class.php';
require_once $pchart_path.'class/pDraw.class.php';
require_once $pchart_path.'class/pImage.class.php';
/* Create and populate the pData object */
$chart_data = new pData();
$chart_data->addPoints( rand_array(), "Probe 1" );
$chart_data->addPoints( rand_array(), "Probe 2" );
$chart_data->addPoints( rand_array(), "Probe 3" );
$chart_data->setSerieTicks( "Probe 2", 4 );
$chart_data->setAxisName( 0, "Temperatures" );
$chart_data->addPoints( array( "Jan", "Feb", "Mar", "Apr", "May", "Jun" ), "Labels" );
$chart_data->setSerieDescription( "Labels", "Months" );
$chart_data->setAbscissa( "Labels" );
/* Create the pChart object */
$chart_image = new pImage( 700, 230, $chart_data );
/* Turn off Antialiasing */
$chart_image->Antialias = false;
/* Draw the background */
$chart_settings = array(
"R" => 170,
"G" => 183,
"B" => 87,
"Dash" => 1,
"DashR" => 190,
"DashG" => 203,
"DashB" => 107
);
$chart_image->drawFilledRectangle( 0, 0, 700, 230, $chart_settings );
/* Overlay with a gradient */
$chart_settings = array(
"StartR" => 219,
"StartG" => 231,
"StartB" => 139,
"EndR" => 1,
"EndG" => 138,
"EndB" => 68,
"Alpha" => 50
);
$chart_image->drawGradientArea( 0, 0, 700, 230, DIRECTION_VERTICAL, $chart_settings );
/* Add a border to the picture */
$chart_image->drawRectangle( 0, 0, 699, 229, array( "R" => 0, "G" => 0, "B" => 0 ) );
/* Write the chart title */
$chart_image->setFontProperties(
array( "FontName" => $pchart_path.'fonts/Forgotte.ttf', "FontSize" => 11 )
);
$chart_image->drawText( 150, 35, "Average temperature", array( "FontSize" => 20, "Align" => TEXT_ALIGN_BOTTOMMIDDLE ) );
/* Set the default font */
$chart_image->setFontProperties( array( "FontName" => $pchart_path.'fonts/pf_arma_five.ttf', "FontSize" => 6 ) );
/* Define the chart area */
$chart_image->setGraphArea( 60, 40, 650, 200 );
/* Draw the scale */
$scalechart_settings = array(
"XMargin" => 10,
"YMargin" => 10,
"Floating" => true,
"GridR" => 255,
"GridG" => 255,
"GridB" => 255,
"DrawSubTicks" => true,
"CycleBackground" => true
);
$chart_image->drawScale( $scalechart_settings );
/* Write the chart legend */
$chart_image->drawLegend( 540, 20, array( "Style" => LEGEND_NOBORDER, "Mode" => LEGEND_HORIZONTAL ) );
/* Turn on Antialiasing */
$chart_image->Antialias = true;
/* Draw the area chart */
$chart_image->drawAreaChart();
/* Draw a line and a plot chart on top */
$chart_image->setShadow( true, array( "X" => 1, "Y" => 1, "R" => 0, "G" => 0, "B" => 0, "Alpha" => 10 ) );
$chart_image->drawLineChart();
$chart_image->drawPlotChart( array(
"PlotBorder" => true,
"PlotSize" => 3,
"BorderSize" => 1,
"Surrounding" => -60,
"BorderAlpha" => 80
) );
/* Render the picture (choose the best way) */
$chart_image->Render( JPATH_SITE.'/components/com_chronoforms/charts/example.png' );
$form->data['pchart'] = "<div><img src='".JURI::root()."components/com_chronoforms/charts/example.png' /></div>";
?>
Give the form a name and save it, then click the Test Form icon in the Forms Manager toolbar to view it; each time you refresh the page the form will be re-created with new random data.
Experiment with changing the chart settings to get different effects.
Build another form, or adapt this one, to work with your data.
Thanks to users Lesanjo and Rangor who posted this method and a code example in the forums here.
