SpreadJS 14
Features / Charts / Chart Types / Line Chart
In This Topic
    Line Chart
    In This Topic

    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.

    1. Line Chart

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

      An image of the line chart is shown below:
              Line chart

    2. 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:
              Stacked line chart
    3. 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:
              100% stacked line chart

    4. 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:
              Line chart with markers

    5. 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:
              Stacked line chart with markers

    6. 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:
              100% stacked line chart with markers

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