Spiderweb

author(s): Torstein Hønsi

by Umair Rafiq

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A spiderweb chart or radar chart is a variant of the polar chart.
        Spiderweb charts are commonly used to compare multivariate data sets,
        like this demo using six variables of comparison.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

/*


SELECT 
s.as_of_date, s.TICKER, s.sector

,CONCAT(
	CONCAT('var stock = [',s.ew_sent_z,',', s.vol,',', s.vol_z,',', s.ew_sent_delta_rt,',', s.dispersion ,',', s.buzz,'];')
	,CONCAT('var sector = [',v.ew_sent_z,',', v.vol,',', v.vol_z,',', v.ew_sent_delta_rt,',', v.dispersion ,',', v.buzz,'];')
)

, s.ew_sent_z, s.vol, s.vol_z, s.ew_sent_delta_rt, s.dispersion  , s.buzz
, v.ew_sent_z, v.vol, v.vol_z, v.ew_sent_delta_rt, v.dispersion  , v.buzz


FROM SUMMARY_BY_TOPIC_STOCK s
JOIN SUMMARY_BY_SECTOR_V3 v ON s.as_of_date = v.as_of_date AND s.sector COLLATE latin1_general_ci = v.sector
WHERE s.as_of_date = '2022-01-21 09:10:00'
AND TICKER = 'AAPL'
LIMIT 10;


*/

var stock = [-0.011193611453952297,0.289,0.4091714863090554,-0.05669705931594345,0.6021,1.3531495550801484];
var sector = [-0.46742728303014536,0.2974,0.11804011451553989,0.08957156208087391,0,0.5197420597498799];
Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line'
    },

    title: {
        text: 'Stock vs Sector',
        x: -80
    },

    pane: {
        size: '80%'
    },

    xAxis: {
        categories: ['S-Score', 'S-Volume', 'S-VScore', 'S-Delta',
            'S-Dispersion', 'S-Buzz'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
    },

    tooltip: {
        shared: true,
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
    },

    legend: {
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical'
    },

    series: [{
        name: 'Sector',
        data: sector,
        pointPlacement: 'on'
    }, {
        name: 'AAPL',
        data: stock,
        pointPlacement: 'on'
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align:...