$masterChart = new Highchart();

$masterChart->chart->renderTo = "master-container";
$masterChart->chart->reflow = false;
$masterChart->chart->borderWidth = 0;
$masterChart->chart->backgroundColor = null;
$masterChart->chart->marginLeft = 50;
$masterChart->chart->marginRight = 20;
$masterChart->chart->zoomType = "x";

$masterChart->chart->events->selection = new HighchartJsExpr(
    "function(event) {
    var extremesObject = event.xAxis[0],
        min = extremesObject.min,
        max = extremesObject.max,
        detailData = [],
        xAxis = this.xAxis[0];

    jQuery.each(this.series[0].data, function(i, point) {
        if (point.x > min && point.x < max) {
            detailData.push({
              x: point.x,
              y: point.y
            });
        }
    });

    xAxis.removePlotBand('mask-before');
    xAxis.addPlotBand({
        id: 'mask-before',
        from: Date.UTC(2006, 0, 1),
        to: min,
        color: 'rgba(0, 0, 0, 0.2)'
    });

    xAxis.removePlotBand('mask-after');
    xAxis.addPlotBand({
        id: 'mask-after',
        from: max,
        to: Date.UTC(2008, 11, 31),
        color: 'rgba(0, 0, 0, 0.2)'
    });

    detailChart.series[0].setData(detailData);
    return false; }");

$masterChart->title->text = null;
$masterChart->xAxis->type = "datetime";
$masterChart->xAxis->showLastTickLabel = 1;
$masterChart->xAxis->maxZoom = 14 * 24 * 3600000;

$masterChart->xAxis->plotBands[] = array(
    'id' => "mask-before",
    'from' => new HighchartJsExpr("Date.UTC(2006, 0, 1)"),
    'to' => new HighchartJsExpr("Date.UTC(2008, 7, 1)"),
    'color' => "rgba(0, 0, 0, 0.2)"
);

$masterChart->xAxis->title->text = null;
$masterChart->yAxis->gridLineWidth = 0;
$masterChart->yAxis->labels->enabled = false;
$masterChart->yAxis->title->text = null;
$masterChart->yAxis->min = 0.6;
$masterChart->yAxis->showFirstLabel = false;

$masterChart->tooltip->formatter = new HighchartJsExpr("function() {
    return false; }");

$masterChart->legend->enabled = false;
$masterChart->credits->enabled = false;
$masterChart->plotOptions->series->fillColor->linearGradient = array(
    0,
    0,
    0,
    70
);
$masterChart->plotOptions->series->fillColor->stops[] = array(
    0,
    '#4572A7'
);
$masterChart->plotOptions->series->fillColor->stops[] = array(
    1,
    'rgba(0,0,0,0)'
);
$masterChart->plotOptions->series->lineWidth = 1;
$masterChart->plotOptions->series->marker->enabled = false;
$masterChart->plotOptions->series->shadow = false;
$masterChart->plotOptions->series->states->hover->lineWidth = 1;
$masterChart->plotOptions->series->enableMouseTracking = false;

$masterChart->series[] = array(
    'type' => "area",
    'name' => "USD to EUR",
    'pointInterval' => 24 * 3600 * 1000,
    'pointStart' => new HighchartJsExpr("Date.UTC(2006, 0, 01)"),
    'data' => new HighchartJsExpr("data")
);

$masterChart->exporting->enabled = false;

$detailChart = new Highchart();

$detailChart->chart->marginBottom = 120;
$detailChart->chart->renderTo = "detail-container";
$detailChart->chart->reflow = false;
$detailChart->chart->marginLeft = 50;
$detailChart->chart->marginRight = 20;
$detailChart->chart->style->position = "absolute";
$detailChart->credits->enabled = false;
$detailChart->title->text = "Historical USD to EUR Exchange Rate";
$detailChart->subtitle->text = "Select an area by dragging across the lower chart";
$detailChart->xAxis->type = "datetime";
$detailChart->yAxis->title->text = null;
$detailChart->yAxis->maxZoom = 0.1;

$detailChart->tooltip->formatter = new HighchartJsExpr(
    "function() {
        var point = this.points[0];
        return '<b>'+ point.series.name +'</b><br/>'+
            Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+
            '1 USD = '+ Highcharts.numberFormat(point.y, 2) +' EUR';
    }"
);

$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;