Line Chart

Data that's arranged in columns or rows on a worksheet can be plotted in a line chart. In a line chart, category data is distributed evenly along the horizontal axis, and all value data is distributed evenly along the vertical axis. Line charts can show continuous data over time on an evenly scaled axis, making them ideal for showing trends in data at equal intervals, like months, quarters, or fiscal years.

<p>SpreadJS supports line, stacked line, 100% stacked line, line with markers, stacked line with markers, and 100% stacked line with markers charts. Use the <strong>GC.Spread.Sheets.Charts.ChartType.line</strong> property to get the chart type.</p> <p>You can add a line chart to Spread and change its style using the chart API:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'line'</span>, GC.Spread.Sheets.Charts.ChartType.line, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:D4'</span>) <span class="hljs-keyword">var</span> legend = chart.legend(); legend.visible = <span class="hljs-literal">true</span>; chart.legend(legend); </code></pre> <p>The line chart can be stacked normally or to add up to 100 percent, with or without markers.</p> <p>You can customize the color, shape, border of marker at the series with markers.. </p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> seriesItem = chart.series().get(index ?); bobSeries.symbol.shape = <span class="hljs-number">1</span> <span class="hljs-comment">/** dash */</span>; bobSeries.symbol.size = <span class="hljs-number">20</span>; bobSeries.symbol.fill = <span class="hljs-string">"red"</span>; bobSeries.symbol.border.size = <span class="hljs-number">2</span>; bobSeries.symbol.border.color = <span class="hljs-string">"rgb(127, 0, 127)"</span>; bobSeries.symbol.border.lineType = <span class="hljs-number">7</span> <span class="hljs-comment">/** sysDot */</span>; series.set(index ?, seriesItem); </code></pre> <p><strong>Line and Line with markers:</strong> 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.</p> <p><strong>Stacked line and Stacked line with markers:</strong> Stacked line charts can show the trend of the contribution of each value over time or over evenly-spaced categories.</p> <p><strong>100% stacked line and 100% stacked line with markers:</strong> 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.</p>
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.4663, 0.4966, 0.5689, 0.6230, 0.6360], ["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304], ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834], ]; sheet.setArray(0, 0, dataArray); } function initChart(sheet, chartType, marker) { //add chart var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 85, 800, 350, "A1:H4", GC.Spread.Sheets.Charts.RowCol.rows); changeChartLegend(chart); changeChartArea(chart); changChartDataLabels(chart); changeGridLines(chart); changeLineStyle(chart); 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) { var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.border.width = 2; 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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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; }