Line Chart

A line chart is extensively used to visualize continuous data over time on an evenly scaled axis. These charts are ideal for analyzing 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 where the trend of annual sales records for Quarter 1, Quarter 2, and Quarter 3 for different categories of gadgets: Mobile Phones, Laptops, and Tablets are depicting 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 lines 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 of 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:

The following code sample shows how to add different types of line charts to a spreadsheet.

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();
};

Smooth Line Chart

You can also highlight curvy trends and make the lines in the chart smoother and visually appealing without fitting the continuous data into a specific angle using the smooth property. However, the smooth property only supports the following line chart types:

• Stacked line

• 100% Stacked line

• Line with markers

• Stacked line with markers

• 100% Stacked line with markers

Refer to the following image that sets the smooth property to depict quarterly sales of products in curves.

The following code sample implements the smooth property.

// Smooth series
var series0 = chart_line.series().get(0);
series0.smooth = true;
chart_line.series().set(0, series0);