Radar Chart

Radar Charts are for variables that show three or more dimensions. They can display the weight of each variable in the data set in a clear and visual way. This sample shows the different types of radar charts in different sheets in the workbook.

SpreadJS supports radar, radarFilled , and radarMarkers radar charts. You can use the GC.Spread.Sheets.Charts.ChartType.radar property to get the chart type. For example, you can insert a radar chart type and change the chart style using the chart API. You can customize the color, shape, border of marker at the radarMarkers like below example. Radar and RadarMarkers charts can be shown with or without markers to indicate individual data values. RadarFilled charts can be shown with filled.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {sheetCount: 3}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); var chartType = [ { type: GC.Spread.Sheets.Charts.ChartType.radar, desc: 'radar' }, { type: GC.Spread.Sheets.Charts.ChartType.radarFilled, desc: 'radarFilled' }, { type: GC.Spread.Sheets.Charts.ChartType.radarMarkers, desc: 'radarMarkers' } ]; spread.suspendPaint(); var sheets = spread.sheets; for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc); initChart(sheet, chartType[i].type); customDataAreaStyle(sheet); } spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initSheet(sheet, sheetName) { sheet.name(sheetName); // prepare data for chart var dataArray = [ ['', 'Bob', 'David'], ['Initiative', 4, 3], ['Innovation', 4, 3], ['Integrity', 3, 4], ['Learning Capability', 3, 5], ['Punctuality', 2, 5], ['Team Player', 3, 4] ]; sheet.setArray(1, 1, dataArray); } function customDataAreaStyle(sheet) { sheet.setColumnWidth(0, 20); for (var i = 1; i < 4; i++) { sheet.setColumnWidth(i, 100); } sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; sheet.getRange(1, 1, 7, 3) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {all: true}); sheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial'); sheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial'); } function initChart(sheet, chartType) { //add chart var chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$8'); // custom chart style changeChartLegend(chart); changeChartArea(chart); changeChartTitle(chart); changeChartAxes(chart); changeChartSeries(chart); if (chartType === GC.Spread.Sheets.Charts.ChartType.radarMarkers) { changeMarker(chart); } else { changeChartDataLabels(chart); } } function changeChartLegend(chart) { var legend = chart.legend(); legend.visible = true; legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom; chart.legend(legend); } function changeChartArea(chart) { var chartArea = chart.chartArea(); chartArea.fontSize = 14; chart.chartArea(chartArea); } function changeChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above; chart.dataLabels(dataLabels); } function changeChartTitle(chart) { var title = chart.title(); title.text = 'Reports'; title.fontSize = 22; title.fontFamily = 'Calibri normal'; chart.title(title); } function changeChartAxes(chart) { var axes = chart.axes(); axes.primaryCategory.style.color = '#666'; axes.primaryValue.majorGridLine.color = '#ccc'; chart.axes(axes); } function changeChartSeries(chart) { var series = chart.series(); var bobSeries = series.get(0); bobSeries.border.color = 'skyblue'; bobSeries.backColor = 'skyblue'; bobSeries.backColorTransparency = '0.5'; series.set(0, bobSeries); var davidSeries = series.get(1); davidSeries.border.color = 'orange'; davidSeries.backColor = 'orange'; davidSeries.backColorTransparency = '0.5'; series.set(1, davidSeries); } function changeMarker(chart) { var series = chart.series(); var bobSeries = series.get(0); bobSeries.symbol.shape = 1; bobSeries.symbol.size = 20; series.set(0, bobSeries); var davidSeries = series.get(1); davidSeries.symbol.shape = 9; davidSeries.symbol.size = 11; series.set(1, davidSeries); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="ss" class="sample-tutorial"></div></body> </html>
.sample-tutorial { height: 100%; width: 100%; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }