/** * Generate the graph to be printed out onto the page. * The generated code should be placed inside <script> tags. * @return string javascript */ public function generateGraph($renderTo) { // Only generate the graph if we have plotters if (count($this->series) == 0) { return; } // We need to create a chart using the type $chart = null; // The graphing classname to use $classname = $this->getHighstocksClassName(); switch ($this->type) { case GraphType::Line: $chart = new HighRollerSplineChart(); break; case GraphType::Area: case GraphType::Percentage_Area: $chart = new HighRollerAreaSplineChart(); break; case GraphType::Column: case GraphType::Stacked_Column: $chart = new HighRollerColumnChart(); break; case GraphType::Pie: case GraphType::Donut: $chart = new HighRollerPieChart(); break; case GraphType::Map: $chart = new HighRollerSplineChart(); $chart->chart->type = 'map'; break; } // Nothing we can do if it's still null if ($chart === null) { return null; } // Set chart options $chart->feedurl = $this->feedURL; $chart->chart->renderTo = $renderTo; $chart->chart->zoomType = 'x'; // The title $safeName = htmlentities($this->displayName); $chart->title->text = ' '; $chart->subtitle = array('text' => ''); // Disable credits $chart->credits = array('enabled' => false); // Disable scrollbar $chart->scrollbar = array('enabled' => false); // Exporting options $chart->exporting = array('enabled' => true, 'filename' => str_replace(' ', '_', $this->getPlugin()->getName() . ' - ' . $this->getDisplayName())); // Non-pie graph specifics if ($this->type != GraphType::Pie && $this->type != GraphType::Donut) { $chart->rangeSelector = array('selected' => $this->type == GraphType::Column || $this->type == GraphType::Stacked_Column ? 1 : 3, 'buttons' => array(array('type' => 'hour', 'count' => 2, 'text' => '2h'), array('type' => 'hour', 'count' => 12, 'text' => '12h'), array('type' => 'day', 'count' => 1, 'text' => '1d'), array('type' => 'week', 'count' => 1, 'text' => '1w'), array('type' => 'week', 'count' => 2, 'text' => '2w'), array('type' => 'month', 'count' => 1, 'text' => '1m'))); $chart->xAxis = array('type' => 'datetime', 'maxZoom' => 2 * 60, 'dateTimeLabelFormats' => array('month' => '%e. %b', 'year' => '%b'), 'gridLineWidth' => 0); $chart->yAxis = array('min' => 0, 'title' => array('text' => ''), 'labels' => array('align' => 'left', 'x' => 3, 'y' => 16), 'showFirstLabel' => false); // Should we make the graph log? if ($this->scale == GraphScale::Logarithmic) { $chart->yAxis['type'] = 'logarithmic'; $chart->yAxis['minorTickInterval'] = 'auto'; unset($chart->yAxis['min']); } } // Tooltip + plotOptions if ($this->type != GraphType::Pie && $this->type != GraphType::Donut) { $chart->tooltip = array('shared' => true, 'crosshairs' => true); if ($this->type == GraphType::Percentage_Area) { $chart->plotOptions = array('areaspline' => array('stacking' => 'percent')); } elseif ($this->type == GraphType::Stacked_Column) { $chart->plotOptions = array('column' => array('stacking' => 'normal')); } } else { $chart->plotOptions = array('pie' => array('allowPointSelect' => true, 'cursor' => 'pointer')); } // Add each series to the chart foreach ($this->series as $series) { $chart->addSeries($series); } // Some raw javascript $rawJavascript = ''; if ($this->type != GraphType::Pie && $this->type != GraphType::Donut) { // just sorts the series $rawJavascript = "\n {$renderTo}Options.tooltip =\n {\n \"shared\": true,\n \"crosshairs\": true,\n \"formatter\": function() {\n var points = this.points;\n var series = points[0].series;\n var s = series.tooltipHeaderFormatter(points[0].key);\n\n var sortedPoints = points.sort(function(a, b){\n return ((a.y < b.y) ? 1 : ((a.y > b.y) ? -1 : 0));\n });\n\n \$.each(sortedPoints , function(i, point) {\n s += point.point.tooltipFormatter('<div style=\"color:{series.color}\">{series.name}</div>: <b>{point.y}</b>" . ($this->type == GraphType::Percentage_Area ? "(' + Highcharts.numberFormat(this.percentage, 1) + '%)" : "") . "<br/>');\n });\n\n return s;\n }\n };\n "; } else { // Pie chart $rawJavascript = "\n {$renderTo}Options.plotOptions =\n {\n pie: {\n allowPointSelect: true,\n cursor: 'pointer',\n dataLabels: {\n enabled: true,\n color: '#000000',\n connectorColor: '#000000',\n formatter: function() {\n return '<b>' + this.point.name + '</b>: ' + ( Math.round(this.percentage * 10) / 10 ) + ' %';\n }\n }\n }\n };\n {$renderTo}Options.tooltip =\n {\n \"formatter\": function() {\n return '<b>' + this.point.name + '</b>: ' + ( Math.round(this.percentage * 100) / 100 ) + ' %';\n }\n };\n "; } return $chart->renderChart($renderTo, $classname, $rawJavascript, 'jquery', $this->type); }
<script type="text/javascript"> // highroller: simplest example of rendering each basic highcharts chart <?php echo $piechart->renderChart('mootools'); ?> <?php echo $barchart->renderChart('mootools'); ?> <?php echo $columnchart->renderChart('mootools'); ?> <?php echo $linechart->renderChart('mootools'); ?> <?php echo $splinechart->renderChart('mootools'); ?> <?php echo $areachart->renderChart('mootools'); ?> <?php echo $areasplinechart->renderChart('mootools'); ?> <?php echo $scatterchart->renderChart('mootools'); ?> $(document).ready(function(){ $("pre.htmlCode").snippet("html",{style: "the", showNum: false}); $("pre.phpCode").snippet("php",{style: "the", showNum: false}); }); </script>
// highroller: simplest example of rendering each basic highcharts chart <?php echo $piechart->renderChart(); ?> <?php echo $barchart->renderChart(); ?> <?php echo $columnchart->renderChart(); ?> <?php echo $linechart->renderChart(); ?> <?php echo $splinechart->renderChart(); ?> <?php echo $areachart->renderChart(); ?> <?php echo $areasplinechart->renderChart(); ?> <?php echo $scatterchart->renderChart(); ?> $(document).ready(function(){ $("pre.htmlCode").snippet("html",{style: "the", showNum: false}); $("pre.phpCode").snippet("php",{style: "the", showNum: false}); }); </script>