예제 #1
0
<?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>
예제 #2
0
<!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>
예제 #3
0
<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>
예제 #4
0
<?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',