SpreadJS supports line, stacked line, 100% stacked line, line with markers, stacked line with markers, and 100% stacked line with markers charts. Use the GC.Spread.Sheets.Charts.ChartType.line property to get the chart type.
You can add a line chart to Spread and change its style(like smooth) using the chart API:
The line chart can be stacked normally or to add up to 100 percent, with or without markers.
You can customize the color, shape, border of marker at the series with markers..
Line and Line with markers: Line charts can be shown with or without markers to indicate individual data values. Line charts are useful for showing trends over time or over evenly-spaced categories, especially when you have many data points and the order in which they are presented is important. If there are many categories or the values are approximate, it’s best to use a line chart without markers.
Stacked line and Stacked line with markers: Stacked line charts can show the trend of the contribution of each value over time or over evenly-spaced categories.
100% stacked line and 100% stacked line with markers: One-hundred percent stacked line charts can show the trend of the percentage each value contributes over time or evenly-spaced categories. If there are many categories or the values are approximate, use a 100% stacked line chart without markers.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 6});
initSpread(spread);
};
function initSpread(spread) {
var chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.line,
desc: "line",
}, {
type: GC.Spread.Sheets.Charts.ChartType.lineStacked,
desc: "lineStacked",
}, {
type: GC.Spread.Sheets.Charts.ChartType.lineStacked100,
desc: "lineStacked100",
}, {
type: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
desc: "lineMarkers",
withMarker: true,
}, {
type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked,
desc: "lineMarkersStacked",
withMarker: true,
}, {
type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100,
desc: "lineMarkersStacked100",
withMarker: true,
}];
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, chartType[i].withMarker);//add chart
}
spread.options.tabStripRatio = 0.8;
spread.resumePaint();
}
function initSheet(sheet, sheetName) {
sheet.name(sheetName);
//prepare data for chart
var dataArray = [
["", '2012', '2013', '2014', '2015', '2016', '2017'],
["Chrome", 0.3782, 0.5663, 0.4966, 0.6689, 0.4230, 0.6360],
["FireFox", 0.1284, 0.2030, 0.2801, 0.2560, 0.1531, 0.3304],
["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.2073, 0.0834],
];
sheet.setArray(0, 0, dataArray);
}
function initChart(sheet, chartType, marker) {
//add chart
let chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 10, 85, 450, 350, "A1:G4", GC.Spread.Sheets.Charts.RowCol.rows);
changeChartLegend(chart);
changeChartArea(chart);
changChartDataLabels(chart);
changeGridLines(chart);
changeLineStyle(chart, false);
changeChartAxes(chart);
changeChartTitle(chart);
if (marker) {
changeMarker(chart);
}
chart = sheet.charts.add((sheet.name() + 'Chart2'), chartType, 470, 85, 450, 350, "A1:G4", GC.Spread.Sheets.Charts.RowCol.rows);
changeChartLegend(chart);
changeChartArea(chart);
changChartDataLabels(chart);
changeGridLines(chart);
changeLineStyle(chart, true);
changeChartAxes(chart);
changeChartTitle(chart);
if (marker) {
changeMarker(chart);
}
}
function changeChartTitle(chart) {
var title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);
}
//change legend position
function changeChartLegend(chart) {
var legend = chart.legend();
legend.visible = true;
var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
legend.position = legendPosition.bottom;
chart.legend(legend);
}
//change backColor
function changeChartArea(chart) {
var chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
}
// show dataLabels
function changChartDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.format = "0%";
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.above;
chart.dataLabels(dataLabels);
}
// hide gridLines
function changeGridLines(chart) {
var gridLinesAxes = chart.axes();
gridLinesAxes.primaryValue.min = null;
chart.axes(gridLinesAxes);
}
//change legend position
function changeChartAxes(chart) {
chart.axes({primaryValue:{format:"0%"}});
}
// change line style
function changeLineStyle(chart, smooth) {
var series = chart.series().get();
var seriesItem;
for (var i = 0; i < series.length; i++) {
seriesItem = series[i];
seriesItem.border.width = 2;
seriesItem.smooth = smooth;
chart.series().set(i, seriesItem);
}
}
// change Marker
function changeMarker(chart) {
var preSet = [
{ fill: "", shape: 0 /** circle */, size: 7, border: { color: "blue", width: 1 } },
{ fill: "", shape: 8/** star */, size: 9, border: { color: "black", width: 1 } },
{ fill: "yellow", shape: 2 /** diamond */, size: 7, border: { color: "red", width: 2 } },
];
var series = chart.series().get();
var seriesItem;
for (var i = 0; i < series.length; i++) {
seriesItem = series[i];
seriesItem.symbol = preSet[i];
chart.series().set(i, seriesItem);
}
}
<!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;
}
