$chart = new Highchart(); $chart->includeExtraScripts(); $backgroundOptions = new HighchartOption(); $backgroundOptions->radialGradient = array( 'cx' => 0.5, 'cy' => -0.4, 'r' => 1.9 ); $backgroundOptions->stops = array( array(0.5, 'rgba(255, 255, 255, 0.2)'), array(0.5, 'rgba(200, 200, 200, 0.2)') ); $chart->chart = array( 'type' => 'gauge', 'plotBackgroundColor' => null, 'plotBackgroundImage' => null, 'plotBorderWidth' => 0, 'plotShadow' => false, 'height' => 200 ); $chart->credits->enabled = false; $chart->title->text = 'The Highcharts clock'; $chart->pane->background = array( new stdClass(), array( 'backgroundColor' => new HighchartJsExpr( 'Highcharts.svg ? ' . HighchartOptionRenderer::render($backgroundOptions) . ' : null' ) ) ); $chart->yAxis = array( 'labels' => array( 'distance' => -20 ), 'min' => 0, 'max' => 12, 'lineWidth' => 0, 'showFirstLabel' => false, 'minorTickInterval' => 'auto', 'minorTickWidth' => 1, 'minorTickLength' => 5, 'minorTickPosition' => 'inside', 'minorGridLineWidth' => 0, 'minorTickColor' => '#666', 'tickInterval' => 1, 'tickWidth' => 2, 'tickPosition' => 'inside', 'tickLength' => 10, 'tickColor' => '#666', 'title' => array( 'text' => 'Powered by<br/>Highcharts', 'style' => array( 'color' => '#BBB', 'fontWeight' => 'normal', 'fontSize' => '8px', 'lineHeight' => '10px' ), 'y' => 10 ) ); $chart->tooltip->formatter = new HighchartJsExpr('function () { return this.series.chart.tooltipText; }'); $chart->series[] = array( 'data' =>array( array( 'id' => 'hour', 'y' => new HighchartJsExpr('now.hours'), 'dial' => array( 'radius' => '60%', 'baseWidth' => 4, 'baseLength' => '95%', 'rearLength' => 0 ) ), array( 'id' => 'minute', 'y' => new HighchartJsExpr('now.minutes'), 'dial' => array( 'baseLength' => '95%', 'rearLength' => 0 ) ), array( 'id' => 'second', 'y' => new HighchartJsExpr('now.seconds'), 'dial' => array( 'radius' => '100%', 'baseWidth' => 1, 'rearLength' => '20%' ) ) ), 'animation' => false, 'dataLabels' => array( 'enabled' => false ) );