<?php require_once "../conf.php"; ?> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>phpChart - Highlighter 2</title> </head> <body> <div><span> </span><span id="info1b"></span></div> <?php $s1 = array(3, 7, 4, 9, 11, 12); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Chart 1 Example ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $pc = new C_PhpChartX(array($s1), 'chart1'); $pc->add_custom_js("\n \$('#chart1').append('<div id=\"myToolTip\" style=\"position:absolute;display:none;background:#E5DACA;padding:4px;\"></div>');\n function myMove (ev, gridpos, datapos, neighbor, plot) {\n if (neighbor == null) {\n \$('#myToolTip').fadeOut().empty();\n isShowing = false;\n }\n if (neighbor != null) {\n if (\$('#myToolTip').is(':hidden')) {\n var d = new Date();\n var myText = d.getSeconds(); // could be any function pulling data from anywhere. \n \$('#myToolTip').html(myText).css({left:gridpos.x, top:gridpos.y}).fadeIn();\n }\n }\n }\n // Here is how you attach the custom callback to the mouse move event on the plot.\n \$.jqplot.eventListenerHooks.push(['jqplotMouseMove', myMove]);\n ", 'after'); $pc->draw(500, 300); ?> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>phpChart - Axis Label Chart</title> </head> <body> <?php $l1 = array(array(2011, 1200), array(2039, 1200)); $l2 = array(array(2011, 0), array(2039, 800)); $l3 = array(array(2011, 0), array(2039, 400)); $pc = new C_PhpChartX(array($l1, $l2, $l3), 'area_1'); $pc->add_plugins(array('canvasTextRenderer')); //set jqplot default options $pc->set_defaults(array('seriesDefaults' => array('fill' => true, 'fillToZero' => true, 'fillToValue' => 100, 'yaxis' => 'y2axis'), 'axesDefaults' => array('showTickMarks' => false, 'tickOptions' => array('formatString' => '%d')), 'stackSeries' => true)); //set grid properties $pc->set_grid(array('background' => '#ffffff', 'borderWidth' => 0, 'borderColor' => '#ffffff', 'shadow' => true, 'shadowWidth' => 10, 'shadowOffset' => 3, 'shadowDepth' => 3, 'shadowColor' => 'rgba(230, 230, 230, 0.07)')); //set legend properties $pc->set_legend(array('renderer' => 'plugin::EnhancedLegendRenderer', 'show' => true, 'location' => 's', 'placement' => 'outside', 'yoffset' => 30, 'rendererOptions' => array('numberRows' => 2), 'labels' => array('oil', 'renewables', 'wind and water'))); //set axes $pc->set_xaxes(array('xaxis' => array('borderWidth' => 2, 'borderColor' => '#999999', 'ticks' => array(2010, 2040), 'tickOptions' => array('showGridline' => false)), 'x2axis' => array('borderWidth' => 0, 'borderColor' => '#ffffff'))); $pc->set_yaxes(array('y2axis' => array('borderWidth' => 0, 'borderColor' => '#ffffff', 'autoscale' => true, 'min' => '0', 'max' => 3000, 'numberTicks' => 4, 'labelRenderer' => 'plugin::CanvasAxisLabelRenderer', 'label' => 'energy use'), 'yaxis' => array('borderWidth' => 2, 'borderColor' => '#999999'))); //add custom JS $pc->add_custom_js("\n\t\tvar r = area_1._width - area_1._gridPadding.left - 5; \n\t\tr = r+'px'; \n\t\t\$('.jqplot-y2axis-label').css({top:'10px', right:r});", "after"); $pc->draw(); ?> </body> </html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>phpChart - Highlighter 3</title> </head> <body> <div><span> </span><span id="info1b"></span></div> <?php $s1 = array(array('23-May-08', 1), array('24-May-08', 4), array('25-May-08', 2), array('26-May-08', 6)); $s2 = array(3, 5, 7, 4, 8); $s3 = array(9, 11, 15, 8, 15); $s4 = array(8, 7, 12, 18, 4); $s5 = array(13, 17, 21, 19, 11); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Chart 1 Example ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $pc = new C_PhpChartX(array($s1), 'chart1'); $pc->add_plugins(array('highlighter', 'cursor'), true); $pc->set_title(array('text' => 'Highlighting')); $pc->set_axes(array('xaxis' => array('renderer' => 'plugin::DateAxisRenderer', 'tickOptions' => array('formatString' => '%b %#d, %Y'), 'numberTicks' => 4), 'yaxis' => array('tickOptions' => array('formatString' => '$%.2f')))); $pc->set_highlighter(array('sizeAdjust' => 10, 'tooltipLocation' => 'n', 'useAxesFormatters' => false, 'formatString' => 'Hello %s dayglow %d', 'tooltipContentEditor' => 'js::editit')); // must start with "js::" to indicate using user's own function $pc->set_cursor(array('show' => true, 'zoom' => true)); $pc->add_custom_js("\n function editit(str, si, pi, plot) {\n return \"<b><i>NHT: \"+plot.targetId+', Series: '+si+', Point: '+pi+', '+str+\"</b></i>\";\n }\n "); $pc->draw(500, 300); ?> </body> </html>
<?php $s1 = array(array('a', 2), array('b', 8), array('c', 14), array('d', 20)); $s2 = array(array('a', 4), array('b', 12), array('c', 6), array('d', 3)); $s3 = array(array('a', 2), array('b', 1), array('c', 3), array('d', 3)); $s4 = array(array('a', 4), array('b', 3), array('c', 2), array('d', 1)); $s5 = array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Chart 1 Example ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $pc = new C_PhpChartX(array($s1), 'chart1'); $pc->set_series_default(array('renderer' => 'plugin::DonutRenderer')); $pc->set_legend(array('show' => true)); $pc->add_custom_js("\n \$('#chart1').bind('jqplotDataClick',\n function (ev, seriesIndex, pointIndex, data) {\n \$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);\n }\n );\n "); echo '<div>You clicked: <span id="info1">Nothing</span></div>'; $pc->draw(300, 300); /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //Chart 2 Example ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $pc = new C_PhpChartX(array($s1,$s2),'chart2'); $pc->set_series_default(array( 'renderer'=>'plugin::DonutRenderer', 'rendererOptions'=>array('sliceMargin'=>2,'innerDiameter'=>110,'startAngle'=>-90))); echo '<div>Moused over: <span id="info2">Nothing</span></div>'; $pc->add_custom_js(" $('#chart2').bind('jqplotDataHighlight',