Funnel Chart

The funnel chart takes its name from its shape, which starts from a broad head and ends in a narrow neck. You could use a funnel chart to show the number of sales prospects at each stage in a sales pipeline or sales from a product email campaign.

Description
app.js
index.html
styles.css
Copy to CodeMine

SpreadJS supports funnel charts. Use the GC.Spread.Sheets.Charts.ChartType.funnel property to get the chart type. Funnel chart show values across multiple stages in a process.

You can add a funnel chart to Spread and change its style using the chart API.

     var chart = sheet.charts.add('funnel', GC.Spread.Sheets.Charts.ChartType.funnel, 0, 100, 400, 300, 'A1:D4');
     var legend = chart.legend();
     legend.visible = true;
     chart.legend(legend);
     var series = chart.series().get(index);
     series.backColor = 'red';
     series.gapWidth = 2;
     chart.series().set(index, series);
SpreadJS supports funnel charts. Use the GC.Spread.Sheets.Charts.ChartType.funnel property to get the chart type. Funnel chart show values across multiple stages in a process. You can add a funnel chart to Spread and change its style using the chart API.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { var sheets = spread.sheets; spread.suspendPaint(); // custom sheet style setSheet(sheets); setData(sheets[0], 'funnelChart'); initFunnel(sheets[0], GC.Spread.Sheets.Charts.ChartType.funnel); setData(sheets[1], 'customStyle'); var customFunnelChart = initFunnel(sheets[1], GC.Spread.Sheets.Charts.ChartType.funnel); setCustomStyle(customFunnelChart); spread.resumePaint(); } function setSheet(sheets) { var columnWidths = [20, 100, 100]; for (var i = 0; i < sheets.length; i++) { sheets[i].options.gridline.showHorizontalGridline = false; sheets[i].options.gridline.showVerticalGridline = false; sheets[i].getRange(1, 1, 6, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { all: true }); sheets[i].getRange(1, 1, 1, 2).font('bold normal 10pt Arial'); for (var j = 0; j < columnWidths.length; j++) { sheets[i].setColumnWidth(j, columnWidths[j]); } } } function initFunnel(sheet, chartType) { sheet.resumePaint(); return sheet.charts.add((sheet.name() + chartType), chartType, 400, 0, 500, 400, "B2:C7"); } function setCustomStyle(chart) { var chartArea = chart.chartArea(); chartArea.backColor = { type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20, foregroundColor: "rgb(0,176,80)", backgroundColor: "background 1 0", }; chart.chartArea(chartArea); var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.color = 'white'; chart.dataLabels(dataLabels); var seriesCollection = chart.series(); var series1 = seriesCollection.get(0); series1.backColor = "green"; seriesCollection.set(0, series1); var title = chart.title(); title.text = "Product Email Campaign"; title.fontSize = 16; chart.title(title); } function setData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var dataArray = [ ['Stage', 'Users'], ['Sent', 5676], ['Viewed', 3872], ['Clicked', 1668], ['Add to Cart', 640], ['Purchased', 565], ]; sheet.setArray(1, 1, dataArray); }
<!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 class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }