HighCharts with ConsoleTVs\Charts (ActivitySolidGauge)

Activity_SolidGauge.sample

/*
* SolidGaugeChart Class
*/
<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Highcharts\Chart;

class ActivityChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();

        $this->options([
            'chart' => [
                'type' => 'solidgauge',
                'height' => '100%',
                'colorCount' => 3,
                'events' => [
                    'render' => 'renderIcons'
                ]
            ],
            'credits' => [
                'enabled' => false
            ],
            'title' => [
                'text' => null,
                'style' => [
                    'fontSize' => '20px',
                    'color' => 'silver'
                ]
            ],
            'tooltip' => [
                'borderWidth' => 0,
                'backgroundColor' => 'none',
                'shadow' => false,
                'style' => [
                    'fontSize' => '12px',
                    'color' => 'silver'
                ],
                'pointFormat' => "{series.name}<br><span style=\"font-size:1em;color:{point.color};font-weight:bold\">{point.y}%</span>",
                'positioner' => 'positionerTooltip'
            ],
            'pane' => [
                'startAngle' => 0,
                'endAngle' => 360,
                'background' => [
                    [
                        'outerRadius' => '112%',
                        'innerRadius' => '88%',
                        'backgroundColor' => 'rgba(124,181,236,0.3)',
                        'borderWidth' => 0
                    ],
                    [
                        'outerRadius' => '87%',
                        'innerRadius' => '63%',
                        'backgroundColor' => 'rgba(67,67,72,0.3)',
                        'borderWidth' => 0
                    ],
                    [
                        'outerRadius' => '62%',
                        'innerRadius' => '38%',
                        'backgroundColor' => 'rgba(144,237,125,0.3)',
                        'borderWidth' => 0
                    ]
                ]
            ],
            'yAxis' => [
                'min' => 0,
                'max' => 100,
                'lineWidth' => 0,
                'tickPositions' => []
            ],
            'plotOptions' => [
                'solidgauge' => [
                    'dataLabels' => [
                        'enabled' => false
                    ],
                    'linecap' => 'round',
                    'stickyTracking' => false,
                    'rounded' => true
                ]
            ],
        ], true);
    }
}

########################################################################################################################################

/*
* ChartController
*/
/*
* Tests of Activity Chart
*/
$activityChart = new ActivityChart();
$activityChart->options([
    'exporting' => [
        'enabled' => false
    ]
]);

$activityChart->dataset('Move','solidgauge', [80])->color('rgb(124,181,236)')->options([
    'color' => 'rgb(124,181,236)',
    'radius' => '112%',
    'innerRadius' => '88%'
]);
$activityChart->dataset('Exercise','solidgauge', [65])->color('rgb(67,67,72)')->options([
    'color' => 'rgb(67,67,72)',
    'radius' => '87%',
    'innerRadius' => '63%'
]);
$activityChart->dataset('Stand','solidgauge', [50])->color('rgb(144,237,125)')->options([
    'color' => 'rgb(144,237,125)',
    'radius' => '62%',
    'innerRadius' => '38%'
]);
$activityChart->width(250)->height(250);

return view('chartview', compact('activityChart'));

########################################################################################################################################

/*
* ChartView
*/
<div>
  {!! $chart->container() !!}
</div>
<script>
/**
 * In the chart render event, add icons on top of the circular shapes
 */
function renderIcons() {
    // Move icon
    if (!this.series[0].icon) {
        this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
            .attr({
                'stroke': '#303030',
                'stroke-linecap': 'round',
                'stroke-linejoin': 'round',
                'stroke-width': 2,
                'zIndex': 10
            })
            .add(this.series[2].group);
    }
    this.series[0].icon.translate(
        this.chartWidth / 2 - 10,
        this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
            (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
    );

    // Exercise icon
    if (!this.series[1].icon) {
        this.series[1].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
            .attr({
                'stroke': '#ffffff',
                'stroke-linecap': 'round',
                'stroke-linejoin': 'round',
                'stroke-width': 2,
                'zIndex': 10
            })
            .add(this.series[2].group);
    }
    this.series[1].icon.translate(
        this.chartWidth / 2 - 10,
        this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
            (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
    );

    // Stand icon
    if (!this.series[2].icon) {
        this.series[2].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
            .attr({
                'stroke': '#303030',
                'stroke-linecap': 'round',
                'stroke-linejoin': 'round',
                'stroke-width': 2,
                'zIndex': 10
            })
            .add(this.series[2].group);
    }

    this.series[2].icon.translate(
        this.chartWidth / 2 - 10,
        this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
            (this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
    );
}
</script>
<script>
/**
* In the chart Tooltip positioner option, return position of tooltip
*/
function positionerTooltip (labelWidth) {
    console.log(alow);
    return {
        x: (this.chart.chartWidth - labelWidth) / 2,
        y: (this.chart.plotHeight / 2) + 25
    };
}
</script>
{!! $activityChart->script() !!}