<?php
use Ghunti\HighchartsPHP\Highchart;
use Ghunti\HighchartsPHP\HighchartJsExpr;
$chart = new Highchart();
$chart->includeExtraScripts();
$chart->chart = array('renderTo' => 'container', 'type' => 'waterfall');
$chart->title->text = 'Highcharts Waterfall';
$chart->xAxis->type = 'category';
$chart->xAxis->title->text = 'USD';
$chart->legend->enabled = false;
$chart->tooltip->pointFormat = '<b>${point.y:,.2f}</b> USD';
$chart->series = array(array('upColor' => new HighchartJsExpr('Highcharts.getOptions().colors[2]'), 'color' => new HighchartJsExpr('Highcharts.getOptions().colors[3]'), 'data' => array(array('name' => 'Start', 'y' => 120000), array('name' => 'Product Revenue', 'y' => 569000), array('name' => 'Service Revenue', 'y' => 231000), array('name' => 'Positive Balance', 'isIntermediateSum' => true, 'color' => new HighchartJsExpr('Highcharts.getOptions().colors[1]')), array('name' => 'Fixed Costs', 'y' => -342000), array('name' => 'Variable Costs', 'y' => -233000), array('name' => 'Balance', 'isSum' => true, 'color' => new HighchartJsExpr('Highcharts.getOptions().colors[1]'))), 'dataLabels' => array('enabled' => true, 'formatter' => new HighchartJsExpr("function () {\n return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';\n }"), 'style' => array('color' => '#FFFFFF', 'fontWeight' => 'bold', 'textShadow' => '0px 0px 3px black')), 'pointPadding' => 0));
?>
<html>
<head>
<title>Waterfall</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
$chart->printScripts();
?>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"><?php
echo $chart->render("chart1");
?>
</script>
</body>
</html>
$detailChart->tooltip->formatter = new HighchartJsExpr("function() {\n var point = this.points[0];\n return '<b>'+ point.series.name +'</b><br/>'+\n Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+\n '1 USD = '+ Highcharts.numberFormat(point.y, 2) +' EUR';\n }");
$detailChart->tooltip->shared = 1;
$detailChart->legend->enabled = false;
$detailChart->plotOptions->series->marker->enabled = false;
$detailChart->plotOptions->series->marker->states->hover->enabled = 1;
$detailChart->plotOptions->series->marker->states->hover->radius = 3;
$detailChart->series[] = array('name' => "USD to EUR", 'pointStart' => new HighchartJsExpr("detailStart"), 'pointInterval' => 24 * 3600 * 1000, 'data' => new HighchartJsExpr("detailData"));
$detailChart->exporting->enabled = false;
?>
<html>
<head>
<title>Master detail chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
$detailChart->printScripts();
?>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var data = [
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269,
0.8269, 0.8258, 0.8247, 0.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357,
0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384,
0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84,
0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215,
0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282,
