Creating Line Chart

A line chart is extensively used to visualize continous data over time on an evenly scaled axis. These charts are ideal for analysing trends in data at equal time intervals, like months, quarters, or fiscal years.

The data arranged in columns or rows of a worksheet can be plotted in a line chart. In a line chart, category data is distributed evenly along the horizontal axis, and all the value data is distributed along the vertical axis.

SpreadJS supports the following types of line charts. In the examples shown below, the trend of annual sales record for Quarter 1, Quarter 2 and Quarter 3 for different categories of gadgets: Mobile Phones, Laptops and Tablets is depicted in different types of line charts.

Line Chart
This chart depicts the data values plotted over time to display the trends.

An image of the line chart is shown below:
Stacked Line Chart
This chart displays stacked line to depict the trend of the contribution of each data value or ordered category over different time intervals.
An image of the stacked line chart is shown below:
100% Stacked Line Chart
This chart displays the trend in terms of the percentage that each data value or ordered category has contributed (to the whole) over different time intervals.

An image of the 100% stacked line chart is shown below:
Line with Markers
This chart displays data values shown with markers. It is ideal to use this chart when there are many categories or the values are approximate.

An image of the line chart with markers is shown below:
Stacked Line with Markers
This chart displays data values with markers, typically showing the trend of the contribution of each value over time or evenly spaced categories.

An image of the stacked line chart with markers is shown below:
100% Stacked Line with Markers
This chart displays individual data values with markers, typically showing the trend of the percentage each value that has been contributed over time or evenly spaced categories. It is ideal to use this chart when there are many categories or the values are approximate.

An image of the 100% stacked line chart with markers is shown below:

Using Code

This code shows how to add different types of line charts in a spreadsheet.

JavaScript	Copy Code
var chart_line, chart_lineStacked, chart_lineStacked100, sheet; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); sheet = spread.getActiveSheet(); sheet.suspendPaint(); // Prepare data for chart sheet.setValue(0, 1, "Q1"); sheet.setValue(0, 2, "Q2"); sheet.setValue(0, 3, "Q3"); sheet.setValue(1, 0, "Mobile Phones"); sheet.setValue(2, 0, "Laptops"); sheet.setValue(3, 0, "Tablets"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheet.setValue(r, c, parseInt(Math.random() * 100)); } } // Add line chart chart_line = sheet.charts.add('chart_line', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, "A1:D4"); // Add lineStacked chart chart_lineStacked = sheet.charts.add('chart_lineStacked', GC.Spread.Sheets.Charts.ChartType.lineStacked, 250, 480, 600, 400, "A1:D4"); // Add lineStacked100 chart chart_lineStacked100 = sheet.charts.add('chart_lineStacked100', GC.Spread.Sheets.Charts.ChartType.lineStacked100, 250, 900, 600, 400, "A1:D4"); sheet.resumePaint(); };

JavaScript

Copy Code

var chart_line, chart_lineStacked, chart_lineStacked100, sheet;

window.onload = function ()

{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();

// Prepare data for chart
sheet.setValue(0, 1, "Q1");
sheet.setValue(0, 2, "Q2");
sheet.setValue(0, 3, "Q3");
sheet.setValue(1, 0, "Mobile Phones");
sheet.setValue(2, 0, "Laptops");
sheet.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++)

{
for (var c = 1; c <= 3; c++)

      {
       sheet.setValue(r, c, parseInt(Math.random() * 100));
      }
  }

// Add line chart
chart_line = sheet.charts.add('chart_line', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, "A1:D4");

// Add lineStacked chart
chart_lineStacked = sheet.charts.add('chart_lineStacked', GC.Spread.Sheets.Charts.ChartType.lineStacked, 250, 480, 600, 400, "A1:D4");

// Add lineStacked100 chart
chart_lineStacked100 = sheet.charts.add('chart_lineStacked100', GC.Spread.Sheets.Charts.ChartType.lineStacked100, 250, 900, 600, 400, "A1:D4");

sheet.resumePaint();
};