}
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = Date.UTC(2008, 7, 1);
jQuery.each(masterChart.series[0].data, function(i, point) {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = <?php
echo $detailChart->render();
?>
;
}
var $container = $('#container').css('position', 'relative');
var $detailContainer = $('<div id="detail-container">')
.appendTo($container);
var $masterContainer = $('<div id="master-container">')
.css({ position: 'absolute', top: 300, height: 80, width: '100%' })
.appendTo($container);
// create master and in its callback, create the detail chart
createMaster();
<?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>
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = <?php
echo $chart->render();
?>
;
});
</script>
</body>
</html>
