You can customize renderers in Spread Windows Forms. The renderers are used in headers, corners, cells, and other areas. You can also customize the renderers used to create the styles in Spread Windows Forms. This can be useful if you want to create a specific style for your application.

The default style uses the ColumnHeaderDefaultEnhanced, CornerDefaultEnhanced, CornerFooterDefaultEnhanced, FilterBarDefaultEnhanced, and RowHeaderDefaultEnhanced fields.

The Office2013 or Office2016 style uses the FlatCornerHeaderRenderer, FlatColumnHeaderRenderer, FlatRowHeaderRenderer, FlatScrollBarRenderer, and FlatFocusIndicatorRenderer classes.

The Office2007 style uses the EnhancedCornerRenderer, EnhancedFocusIndicatorRenderer, EnhancedColumnHeaderRenderer, EnhancedScrollBarRenderer, and EnhancedRowHeaderRenderer classes.

The classic style uses the ColumnHeaderRenderer, RowHeaderRenderer, and CornerRenderer classes.

The following example customizes the renderers for the column header and footer, row header, corner header, and corner footer.

Custom Renderers

C#

//header/footer column
fpSpread1.ActiveSheet.ColumnFooter.Visible = true;
fpSpread1.ActiveSheet.ColumnFooter.RowCount = 3;
fpSpread1.ActiveSheet.ColumnHeader.RowCount = 3;
//Create a new renderer and set the renderer properties.
FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer flatcolumnheader = new FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer();
flatcolumnheader.NormalBackgroundColor = Color.Orchid;
fpSpread1.ActiveSheet.ColumnHeader.DefaultStyle.Renderer = flatcolumnheader;
FarPoint.Win.Spread.CellType.FlatColumnFooterRenderer flatcolumnfooter = new FarPoint.Win.Spread.CellType.FlatColumnFooterRenderer();
flatcolumnfooter.GridLineNormalColor = Color.Gold;
//Set the renderer for the default style area such as column footer. 
fpSpread1.ActiveSheet.ColumnFooter.DefaultStyle.Renderer = flatcolumnfooter;
//header row
fpSpread1.ActiveSheet.RowHeader.ColumnCount = 3;
FarPoint.Win.Spread.CellType.FlatRowHeaderRenderer flatrowheader = new FarPoint.Win.Spread.CellType.FlatRowHeaderRenderer();
flatrowheader.NormalBackgroundColor = Color.Gray;
fpSpread1.ActiveSheet.RowHeader.DefaultStyle.Renderer = flatrowheader;
//sheet corner header render
FarPoint.Win.Spread.CellType.FlatCornerHeaderRenderer flatcornerheader = new FarPoint.Win.Spread.CellType.FlatCornerHeaderRenderer();
flatcornerheader.NormalTriangleColor = Color.Yellow;
fpSpread1.ActiveSheet.SheetCorner.DefaultStyle.Renderer = flatcornerheader;
//sheet corner footer render
FarPoint.Win.Spread.SpreadSkin a1 = new FarPoint.Win.Spread.SpreadSkin(FarPoint.Win.Spread.DefaultSpreadSkins.Default);
a1.Apply(fpSpread1);
fpSpread1.ActiveSheet.ColumnFooter.Visible = true;
FarPoint.Win.Spread.CellType.FlatCornerFooterRenderer flatcornerfooter = new FarPoint.Win.Spread.CellType.FlatCornerFooterRenderer();
flatcornerfooter.NormalTriangleColor = Color.Aquamarine;
FarPoint.Win.Spread.NamedStyle corner = new FarPoint.Win.Spread.NamedStyle("corner", "HeaderDefault");
corner.BackColor = Color.Olive;
corner.Renderer = flatcornerfooter;
//Apply the new corner styles to the control. 
fpSpread1.NamedStyles.Add(corner);
a1.CornerFooterDefaultStyle = corner;

VB

'header/footer column
FpSpread1.ActiveSheet.ColumnFooter.Visible = True
FpSpread1.ActiveSheet.ColumnFooter.RowCount = 3
FpSpread1.ActiveSheet.ColumnHeader.RowCount = 3
'Create a new renderer and set the renderer properties.
Dim flatcolumnheader As New FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer()
flatcolumnheader.NormalBackgroundColor = Color.Orchid
FpSpread1.ActiveSheet.ColumnHeader.DefaultStyle.Renderer = flatcolumnheader
Dim flatcolumnfooter As New FarPoint.Win.Spread.CellType.FlatColumnFooterRenderer()
flatcolumnfooter.GridLineNormalColor = Color.Gold
'Set the renderer for the default style area such as column footer.
FpSpread1.ActiveSheet.ColumnFooter.DefaultStyle.Renderer = flatcolumnfooter
'header row
FpSpread1.ActiveSheet.RowHeader.ColumnCount = 3
Dim flatrowheader As New FarPoint.Win.Spread.CellType.FlatRowHeaderRenderer()
flatrowheader.NormalBackgroundColor = Color.Gray
FpSpread1.ActiveSheet.RowHeader.DefaultStyle.Renderer = flatrowheader
'sheet corner header render
Dim flatcornerheader As New FarPoint.Win.Spread.CellType.FlatCornerHeaderRenderer()
flatcornerheader.NormalTriangleColor = Color.Yellow
FpSpread1.ActiveSheet.SheetCorner.DefaultStyle.Renderer = flatcornerheader
'sheet corner footer render
Dim a1 As New FarPoint.Win.Spread.SpreadSkin(FarPoint.Win.Spread.DefaultSpreadSkins.Default)
a1.Apply(FpSpread1)
FpSpread1.ActiveSheet.ColumnFooter.Visible = True
Dim flatcornerfooter As New FarPoint.Win.Spread.CellType.FlatCornerFooterRenderer()
flatcornerfooter.NormalTriangleColor = Color.Aquamarine
Dim corner As New FarPoint.Win.Spread.NamedStyle("corner", "HeaderDefault")
corner.BackColor = Color.Olive
corner.Renderer = flatcornerfooter
'Apply the new corner styles to the control. 
FpSpread1.NamedStyles.Add(corner)
a1.CornerFooterDefaultStyle = corner

You can customize the corner renderer, which draws the sheet corner.

There are two pre-defined corner renderers in Spread.

The default renderer draws the sheet corner with or without the Windows XP style depending on the setting of the system. The enhanced corner renderer always draws the sheet corner with an appearance similar to Microsoft Excel 2007.

This example lists the methods that are used to create a custom corner renderer.

C#

public class MyCornerRenderer : IRenderer {
public Size GetPreferredSize(Graphics g, Size size, Appearance appearance, object value, float zoomFactor)
{
///Your code here
}
public virtual void PaintCell(Graphics g, Rectangle r, Appearance appearance, object value, bool isSelected, bool isLocked, float zoomFactor)
{
///Your code here
}
public virtual void PaintCorner(Graphics g, Rectangle r, Color backColor, Color foreColor, Font f, HorizontalAlignment horizontalAlignment, VerticalAlignment verticalAlignment, string s, TextOrientation textOrientation, bool wordWrap, HotkeyPrefix hotkeyPrefix, StringTrimming stringTrim, VisualStyles visualStyles, bool mouseOver, bool rightToLeft, float zoomFactor)
{
///Your code here
}
public bool CanOverflow()
{
///Your code here
}
public bool CanBeOverflown()
{
///Your code here
}
}
// Assign new corner render to draw sheet corner:
fpSpread1.ActiveSheet.SheetCornerStyle.Renderer = new MyCornerRenderer();

This example creates a custom corner renderer.

C#

public class MyCornerRenderer : FarPoint.Win.Spread.CellType.IRenderer
        {
public bool CanOverflow() { return true; }
            public bool CanBeOverflown() { return true; }
            public virtual void PaintCell(Graphics g, Rectangle r, FarPoint.Win.Spread.Appearance appear, object value, bool issel, bool isl, float zoom) {
                g.FillRectangle(Brushes.Green, 0, 0, 30, 30);                
            }
            public Size GetPreferredSize(Graphics g, Size size, FarPoint.Win.Spread.Appearance appear, object value, float zoomFactor)
            {
                size = new Size(10, 10);
                return size;
            }            
        }

        private void Form1_Load(object sender, EventArgs e)
        {      
            fpSpread1.ActiveSheet.SheetCornerStyle.Renderer = new MyCornerRenderer();       
        }

VB

Public Class MyCornerRenderer
        Implements FarPoint.Win.Spread.CellType.IRenderer

        Public Sub PaintCell(g As Graphics, r As Rectangle, appearance As FarPoint.Win.Spread.Appearance, value As Object, isSelected As Boolean, isLocked As Boolean, zoomFactor As Single) Implements FarPoint.Win.Spread.CellType.IRenderer.PaintCell
            g.FillRectangle(Brushes.Green, 0, 0, 30, 30)
        End Sub

        Public Function CanBeOverflown() As Boolean Implements FarPoint.Win.Spread.CellType.IRenderer.CanBeOverflown
            Return True
        End Function

        Public Function CanOverflow() As Boolean Implements FarPoint.Win.Spread.CellType.IRenderer.CanOverflow
            Return True
        End Function

        Public Function GetPreferredSize(g As Graphics, size As Size, appear As FarPoint.Win.Spread.Appearance, value As Object, zoomFactor As Single) As Size Implements FarPoint.Win.Spread.CellType.IRenderer.GetPreferredSize
            size = New Size(10, 10)
            Return size
        End Function
    End Class

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        FpSpread1.ActiveSheet.SheetCornerStyle.Renderer = New MyCornerRenderer()
    End Sub

This example sets colors for the enhanced corner renderer.

Corner Renderer

C#

FarPoint.Win.Spread.CellType.EnhancedCornerRenderer rend = new FarPoint.Win.Spread.CellType.EnhancedCornerRenderer(Color.Bisque, Color.Tomato, Color.Maroon);
fpSpread1.ActiveSheet.SheetCorner.DefaultStyle.Renderer = rend;
fpSpread1.ActiveSheet.AllowTableCorner = true;

VB

Dim rend As New FarPoint.Win.Spread.CellType.EnhancedCornerRenderer(Color.Bisque, Color.Tomato, Color.Maroon)
FpSpread1.ActiveSheet.SheetCorner.DefaultStyle.Renderer = rend
FpSpread1.ActiveSheet.AllowTableCorner = True

This example sets the background color for the flat column header renderer.

C#

FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer flatcolumnheader = new FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer();
flatcolumnheader.NormalBackgroundColor = Color.Bisque;            
fpSpread1.ActiveSheet.ColumnHeader.DefaultStyle.Renderer = flatcolumnheader;

VB

Dim flatcolumnheader As New FarPoint.Win.Spread.CellType.FlatColumnHeaderRenderer()
flatcolumnheader.NormalBackgroundColor = Color.Bisque
FpSpread1.ActiveSheet.ColumnHeader.DefaultStyle.Renderer = flatcolumnheader

This example creates a custom corner renderer.

Custom Corner Renderer

C#

public class MyCornerRenderer : FarPoint.Win.Spread.CellType.CornerRenderer
        {                              
            public override void PaintCorner(Graphics g, Rectangle r, Color c, Color back, Font f, FarPoint.Win.HorizontalAlignment halign, FarPoint.Win.VerticalAlignment valign, string s, FarPoint.Win.TextOrientation to, bool wordwrap, System.Drawing.Text.HotkeyPrefix hk, StringTrimming st, FarPoint.Win.VisualStyles vs, bool mouseover, bool rtl, float zf)
            {              
                c = Color.Red;
                back = Color.Aqua;
                f = new Font("Arial", 10);
                halign = FarPoint.Win.HorizontalAlignment.Center;
                hk = System.Drawing.Text.HotkeyPrefix.None;
                valign = FarPoint.Win.VerticalAlignment.Center;
                to = FarPoint.Win.TextOrientation.TextHorizontal;
                wordwrap = true;
                s = "C";
                st = StringTrimming.None;
                vs = FarPoint.Win.VisualStyles.Off;
                mouseover = false;
                rtl = false;
                zf = 0.5F;
                base.PaintCorner(g, r, c, back, f, halign, valign, s, to, wordwrap, hk, st, vs, mouseover, rtl, zf);
            }
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            fpSpread1.ActiveSheet.SheetCornerStyle.Renderer = new MyCornerRenderer();
}

VB

Public Class MyCornerRenderer
        Inherits FarPoint.Win.Spread.CellType.CornerRenderer

        Public Overrides Sub PaintCorner(g As Graphics, r As Rectangle, c As Color, back As Color, f As Font, halign As FarPoint.Win.HorizontalAlignment,
                               valign As FarPoint.Win.VerticalAlignment, s As String, tor As FarPoint.Win.TextOrientation, wordwrap As Boolean, hk As System.Drawing.Text.HotkeyPrefix, sf As StringTrimming, vs As FarPoint.Win.VisualStyles, mouseover As Boolean, rtl As Boolean, zf As Single)

            c = Color.Red
            back = Color.Aqua
            f = New Font("Arial", 10)
            halign = FarPoint.Win.HorizontalAlignment.Center
            hk = System.Drawing.Text.HotkeyPrefix.None
            valign = FarPoint.Win.VerticalAlignment.Center
            tor = FarPoint.Win.TextOrientation.TextHorizontal
            wordwrap = True
            s = "C"
            sf = StringTrimming.None
            vs = FarPoint.Win.VisualStyles.Off
            mouseover = False
            rtl = False
            zf = 0.5F
            MyBase.PaintCorner(g, r, c, back, f, halign, valign, s, tor, wordwrap, hk, sf, vs, mouseover, rtl, zf)
        End Sub
    End Class

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        FpSpread1.ActiveSheet.SheetCornerStyle.Renderer = New MyCornerRenderer()
    End Sub

This example implements the IRenderer interface and creates a custom renderer for the first cell in the spreadsheet.

Cell Renderer

C#

public static CheckBox ck = new CheckBox();
        class MyRenderer : FarPoint.Win.Spread.CellType.IRenderer
        {
            public bool CanOverflow()
            {
                return true;
            }
            public bool CanBeOverflown()
            {
                return true;
            }
            public Size GetPreferredSize(Graphics g, Size s, FarPoint.Win.Spread.Appearance appr, object value, float zoom)
            {
                s = new Size(50, 50);
                return s;
            }
            public void PaintCell(Graphics g, Rectangle r, FarPoint.Win.Spread.Appearance appr, object value, bool issel, bool islocked,
          float zoom)
            {
                string s;
                ck.CheckState = CheckState.Checked;
                s = ck.CheckState.ToString();
                Font f = new Font("MS Sans Serif", 10);
                appr.BackColor = Color.Red;
                appr.ForeColor = Color.Yellow;
                appr.Font = f;
                Brush b, b1;
                b = new SolidBrush(appr.BackColor);
                b1 = new SolidBrush(appr.ForeColor);
                g.FillRectangle(b, r);
                g.DrawString(s, appr.Font, b1, r);
                b.Dispose();
                b1.Dispose();
            }
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            fpSpread1.ActiveSheet.Cells[0, 0].Renderer = new MyRenderer();
        }

VB

Shared ck As New CheckBox()

    Public Class MyRenderer
        Implements FarPoint.Win.Spread.CellType.IRenderer

        Public Function CanBeOverflown() As Boolean Implements FarPoint.Win.Spread.CellType.IRenderer.CanBeOverflown
            Return True
        End Function

        Public Function CanOverflow() As Boolean Implements FarPoint.Win.Spread.CellType.IRenderer.CanOverflow
            Return True
        End Function

        Public Function GetPreferredSize(ByVal g As Graphics, ByVal s As Size, ByVal appr As FarPoint.Win.Spread.Appearance, ByVal value As Object, ByVal zoom As Single) As Size Implements FarPoint.Win.Spread.CellType.IRenderer.GetPreferredSize
            s = New Size(50, 50)
            Return s
        End Function

        Public Sub PaintCell(ByVal g As Graphics, ByVal r As Rectangle, ByVal appr As FarPoint.Win.Spread.Appearance, ByVal Value As Object, ByVal issel As Boolean, ByVal islocked As Boolean, ByVal zoom As Single) Implements FarPoint.Win.Spread.CellType.IRenderer.PaintCell
            Dim s As String
            ck.CheckState = CheckState.Checked
            s = ck.CheckState.ToString()
            Dim f As New Font("MS Sans Serif", 10)
            appr.BackColor = Color.Red
            appr.ForeColor = Color.Yellow
            appr.Font = f
            Dim b, b1 As Brush
            b = New SolidBrush(appr.BackColor)
            b1 = New SolidBrush(appr.ForeColor)
            g.FillRectangle(b, r)
            g.DrawString(s, appr.Font, b1, r.X, r.Y)
            b.Dispose()
            b1.Dispose()
        End Sub

    End Class
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        FpSpread1.ActiveSheet.Cells(0, 0).Renderer = New MyRenderer()
    End Sub

You can set colors for tables in SpreadJS. This simple example allows you to set background colors for the cells, colors for the cell text, and colors for the grid lines. Select the color names and then select the Change Color button to set the colors.

SpreadJS Table

JavaScript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TestPage</title>

 <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.9.40.20153.0.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>

    <script type="text/javascript">
        $(function () {
           var spread = new GcSpread.Sheets.Spread($("#ss")[0]);
            var activeSheet = spread.getActiveSheet();

var datasource = [
   {
      "Name":"chevrolet chevelle malibu",
      "Miles_per_Gallon":18,
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":130,
      "Weight_in_lbs":3504,
      "Acceleration":12,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"buick skylark 320",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":165,
      "Weight_in_lbs":3693,
      "Acceleration":11.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"plymouth satellite",
      "Miles_per_Gallon":18,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3436,
      "Acceleration":11,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"amc rebel sst",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Weight_in_lbs":3433,
      "Acceleration":12,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford torino",
      "Miles_per_Gallon":17,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":140,
      "Weight_in_lbs":3449,
      "Acceleration":10.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford galaxie 500",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":429,
      "Horsepower":198,
      "Weight_in_lbs":4341,
      "Acceleration":10,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"chevrolet impala",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":454,
      "Horsepower":220,
      "Weight_in_lbs":4354,
      "Acceleration":9,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"plymouth fury iii",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":440,
      "Horsepower":215,
      "Weight_in_lbs":4312,
      "Acceleration":8.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"pontiac catalina",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":455,
      "Horsepower":225,
      "Weight_in_lbs":4425,
      "Acceleration":10,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"amc ambassador dpl",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":390,
      "Horsepower":190,
      "Weight_in_lbs":3850,
      "Acceleration":8.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"citroen ds-21 pallas",
      "Miles_per_Gallon":null,
      "Cylinders":4,
      "Displacement":133,
      "Horsepower":115,
      "Weight_in_lbs":3090,
      "Acceleration":17.5,
      "Year":1970,
      "Origin":"B"
   },
   {
      "Name":"chevrolet chevelle concours (sw)",
      "Miles_per_Gallon":null,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":165,
      "Weight_in_lbs":4142,
      "Acceleration":11.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford torino (sw)",
      "Miles_per_Gallon":null,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":153,
      "Weight_in_lbs":4034,
      "Acceleration":11,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"plymouth satellite (sw)",
      "Miles_per_Gallon":null,
      "Cylinders":8,
      "Displacement":383,
      "Horsepower":175,
      "Weight_in_lbs":4166,
      "Acceleration":10.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"amc rebel sst (sw)",
      "Miles_per_Gallon":null,
      "Cylinders":8,
      "Displacement":360,
      "Horsepower":175,
      "Weight_in_lbs":3850,
      "Acceleration":11,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"dodge challenger se",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":383,
      "Horsepower":170,
      "Weight_in_lbs":3563,
      "Acceleration":10,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"plymouth 'cuda 340",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":340,
      "Horsepower":160,
      "Weight_in_lbs":3609,
      "Acceleration":8,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford mustang boss 302",
      "Miles_per_Gallon":null,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":140,
      "Weight_in_lbs":3353,
      "Acceleration":8,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"chevrolet monte carlo",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":150,
      "Weight_in_lbs":3761,
      "Acceleration":9.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"buick estate wagon (sw)",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":455,
      "Horsepower":225,
      "Weight_in_lbs":3086,
      "Acceleration":10,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"toyota corona mark ii",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":113,
      "Horsepower":95,
      "Weight_in_lbs":2372,
      "Acceleration":15,
      "Year":1970,
      "Origin":"C"
   },
   {
      "Name":"plymouth duster",
      "Miles_per_Gallon":22,
      "Cylinders":6,
      "Displacement":198,
      "Horsepower":95,
      "Weight_in_lbs":2833,
      "Acceleration":15.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"amc hornet",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":199,
      "Horsepower":97,
      "Weight_in_lbs":2774,
      "Acceleration":15.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford maverick",
      "Miles_per_Gallon":21,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":85,
      "Weight_in_lbs":2587,
      "Acceleration":16,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"datsun pl510",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":88,
      "Weight_in_lbs":2130,
      "Acceleration":14.5,
      "Year":1970,
      "Origin":"C"
   },
   {
      "Name":"volkswagen 1131 deluxe sedan",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":46,
      "Weight_in_lbs":1835,
      "Acceleration":20.5,
      "Year":1970,
      "Origin":"B"
   },
   {
      "Name":"peugeot 504",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":110,
      "Horsepower":87,
      "Weight_in_lbs":2672,
      "Acceleration":17.5,
      "Year":1970,
      "Origin":"B"
   },
   {
"Name":"audi 100 ls",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":107,
      "Horsepower":90,
      "Weight_in_lbs":2430,
      "Acceleration":14.5,
      "Year":1970,
      "Origin":"B"
   },
   {
      "Name":"saab 99e",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":104,
      "Horsepower":95,
      "Weight_in_lbs":2375,
      "Acceleration":17.5,
      "Year":1970,
      "Origin":"B"
   },
   {
      "Name":"bmw 2002",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":113,
      "Weight_in_lbs":2234,
      "Acceleration":12.5,
      "Year":1970,
      "Origin":"B"
   },
   {
      "Name":"amc gremlin",
      "Miles_per_Gallon":21,
      "Cylinders":6,
      "Displacement":199,
      "Horsepower":90,
      "Weight_in_lbs":2648,
      "Acceleration":15,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"ford f250",
      "Miles_per_Gallon":10,
      "Cylinders":8,
      "Displacement":360,
      "Horsepower":215,
      "Weight_in_lbs":4615,
      "Acceleration":14,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"chevy c20",
      "Miles_per_Gallon":10,
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":200,
      "Weight_in_lbs":4376,
      "Acceleration":15,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"dodge d200",
      "Miles_per_Gallon":11,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":210,
      "Weight_in_lbs":4382,
      "Acceleration":13.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"hi 1200d",
      "Miles_per_Gallon":9,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":193,
      "Weight_in_lbs":4732,
      "Acceleration":18.5,
      "Year":1970,
      "Origin":"A"
   },
   {
      "Name":"datsun pl510",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":88,
      "Weight_in_lbs":2130,
      "Acceleration":14.5,
      "Year":1971,
      "Origin":"C"
   },
   {
      "Name":"chevrolet vega 2300",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":90,
      "Weight_in_lbs":2264,
      "Acceleration":15.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"toyota corona",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":113,
      "Horsepower":95,
      "Weight_in_lbs":2228,
      "Acceleration":14,
      "Year":1971,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":null,
      "Weight_in_lbs":2046,
      "Acceleration":19,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"volkswagen super beetle 117",
      "Miles_per_Gallon":null,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":48,
      "Weight_in_lbs":1978,
      "Acceleration":20,
      "Year":1971,
      "Origin":"B"
   },
   {
      "Name":"amc gremlin",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":2634,
      "Acceleration":13,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"plymouth satellite custom",
      "Miles_per_Gallon":16,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":105,
      "Weight_in_lbs":3439,
      "Acceleration":15.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"chevrolet chevelle malibu",
      "Miles_per_Gallon":17,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":100,
      "Weight_in_lbs":3329,
      "Acceleration":15.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"ford torino 500",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":88,
      "Weight_in_lbs":3302,
      "Acceleration":15.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"amc matador",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":3288,
      "Acceleration":15.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"chevrolet impala",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":165,
      "Weight_in_lbs":4209,
      "Acceleration":12,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"pontiac catalina brougham",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":175,
      "Weight_in_lbs":4464,
      "Acceleration":11.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"ford galaxie 500",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":153,
      "Weight_in_lbs":4154,
      "Acceleration":13.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"plymouth fury iii",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4096,
      "Acceleration":13,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"dodge monaco (sw)",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":383,
      "Horsepower":180,
      "Weight_in_lbs":4955,
      "Acceleration":11.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"ford country squire (sw)",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":170,
      "Weight_in_lbs":4746,
      "Acceleration":12,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"pontiac safari (sw)",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":175,
      "Weight_in_lbs":5140,
      "Acceleration":12,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"amc hornet sportabout (sw)",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":258,
      "Horsepower":110,
      "Weight_in_lbs":2962,
      "Acceleration":13.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"chevrolet vega (sw)",
      "Miles_per_Gallon":22,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":72,
      "Weight_in_lbs":2408,
      "Acceleration":19,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"pontiac firebird",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":100,
      "Weight_in_lbs":3282,
      "Acceleration":15,
      "Year":1971,
      "Origin":"A"
   },
   {
"Name":"ford mustang",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":88,
      "Weight_in_lbs":3139,
      "Acceleration":14.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"mercury capri 2000",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":86,
      "Weight_in_lbs":2220,
      "Acceleration":14,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"opel 1900",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":116,
      "Horsepower":90,
      "Weight_in_lbs":2123,
      "Acceleration":14,
      "Year":1971,
      "Origin":"B"
   },
   {
      "Name":"peugeot 304",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":70,
      "Weight_in_lbs":2074,
      "Acceleration":19.5,
      "Year":1971,
      "Origin":"B"
   },
   {
      "Name":"fiat 124b",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":88,
      "Horsepower":76,
      "Weight_in_lbs":2065,
      "Acceleration":14.5,
      "Year":1971,
      "Origin":"B"
   },
   {
      "Name":"toyota corolla 1200",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":71,
      "Horsepower":65,
      "Weight_in_lbs":1773,
      "Acceleration":19,
      "Year":1971,
      "Origin":"C"
   },
   {
      "Name":"datsun 1200",
      "Miles_per_Gallon":35,
      "Cylinders":4,
      "Displacement":72,
      "Horsepower":69,
      "Weight_in_lbs":1613,
      "Acceleration":18,
      "Year":1971,
      "Origin":"C"
   },
   {
      "Name":"volkswagen model 111",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":60,
      "Weight_in_lbs":1834,
      "Acceleration":19,
      "Year":1971,
      "Origin":"B"
   },
   {
      "Name":"plymouth cricket",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":70,
      "Weight_in_lbs":1955,
      "Acceleration":20.5,
      "Year":1971,
      "Origin":"A"
   },
   {
      "Name":"toyota corona hardtop",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":113,
      "Horsepower":95,
      "Weight_in_lbs":2278,
      "Acceleration":15.5,
      "Year":1972,
      "Origin":"C"
   },
   {
      "Name":"dodge colt hardtop",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":97.5,
      "Horsepower":80,
      "Weight_in_lbs":2126,
      "Acceleration":17,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"volkswagen type 3",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":54,
      "Weight_in_lbs":2254,
      "Acceleration":23.5,
      "Year":1972,
      "Origin":"B"
   },
   {
      "Name":"chevrolet vega",
      "Miles_per_Gallon":20,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":90,
      "Weight_in_lbs":2408,
      "Acceleration":19.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"ford pinto runabout",
      "Miles_per_Gallon":21,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":86,
      "Weight_in_lbs":2226,
      "Acceleration":16.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"chevrolet impala",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":165,
      "Weight_in_lbs":4274,
      "Acceleration":12,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"pontiac catalina",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":175,
      "Weight_in_lbs":4385,
      "Acceleration":12,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"plymouth fury iii",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4135,
      "Acceleration":13.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"ford galaxie 500",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":153,
      "Weight_in_lbs":4129,
      "Acceleration":13,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"amc ambassador sst",
      "Miles_per_Gallon":17,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Weight_in_lbs":3672,
      "Acceleration":11.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"mercury marquis",
      "Miles_per_Gallon":11,
      "Cylinders":8,
      "Displacement":429,
      "Horsepower":208,
      "Weight_in_lbs":4633,
      "Acceleration":11,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"buick lesabre custom",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":155,
      "Weight_in_lbs":4502,
      "Acceleration":13.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile delta 88 royale",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":160,
      "Weight_in_lbs":4456,
      "Acceleration":13.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"chrysler newport royal",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":190,
      "Weight_in_lbs":4422,
      "Acceleration":12.5,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"mazda rx2 coupe",
      "Miles_per_Gallon":19,
      "Cylinders":3,
      "Displacement":70,
      "Horsepower":97,
      "Weight_in_lbs":2330,
      "Acceleration":13.5,
      "Year":1972,
      "Origin":"C"
   },
   {
      "Name":"amc matador (sw)",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Weight_in_lbs":3892,
      "Acceleration":12.5,
      "Year":1972,
      "Origin":"A"
   },
   {
"Name":"chevrolet chevelle concours (sw)",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":130,
      "Weight_in_lbs":4098,
      "Acceleration":14,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"ford gran torino (sw)",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":140,
      "Weight_in_lbs":4294,
      "Acceleration":16,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"plymouth satellite custom (sw)",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4077,
      "Acceleration":14,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"volvo 145e (sw)",
      "Miles_per_Gallon":18,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":112,
      "Weight_in_lbs":2933,
      "Acceleration":14.5,
      "Year":1972,
      "Origin":"B"
   },
   {
      "Name":"volkswagen 411 (sw)",
      "Miles_per_Gallon":22,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":76,
      "Weight_in_lbs":2511,
      "Acceleration":18,
      "Year":1972,
      "Origin":"B"
   },
   {
      "Name":"peugeot 504 (sw)",
      "Miles_per_Gallon":21,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":87,
      "Weight_in_lbs":2979,
      "Acceleration":19.5,
      "Year":1972,
      "Origin":"B"
   },
   {
      "Name":"renault 12 (sw)",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":96,
      "Horsepower":69,
      "Weight_in_lbs":2189,
      "Acceleration":18,
      "Year":1972,
      "Origin":"B"
   },
   {
      "Name":"ford pinto (sw)",
      "Miles_per_Gallon":22,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":86,
      "Weight_in_lbs":2395,
      "Acceleration":16,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"datsun 510 (sw)",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":92,
      "Weight_in_lbs":2288,
      "Acceleration":17,
      "Year":1972,
      "Origin":"C"
   },
   {
      "Name":"toyouta corona mark ii (sw)",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":97,
      "Weight_in_lbs":2506,
      "Acceleration":14.5,
      "Year":1972,
      "Origin":"C"
   },
   {
      "Name":"dodge colt (sw)",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":80,
      "Weight_in_lbs":2164,
      "Acceleration":15,
      "Year":1972,
      "Origin":"A"
   },
   {
      "Name":"toyota corolla 1600 (sw)",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":88,
      "Weight_in_lbs":2100,
      "Acceleration":16.5,
      "Year":1972,
      "Origin":"C"
   },
   {
      "Name":"buick century 350",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":175,
      "Weight_in_lbs":4100,
      "Acceleration":13,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"amc matador",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Weight_in_lbs":3672,
      "Acceleration":11.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"chevrolet malibu",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":145,
      "Weight_in_lbs":3988,
      "Acceleration":13,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"ford gran torino",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":137,
      "Weight_in_lbs":4042,
      "Acceleration":14.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"dodge coronet custom",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3777,
      "Acceleration":12.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"mercury marquis brougham",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":429,
      "Horsepower":198,
      "Weight_in_lbs":4952,
      "Acceleration":11.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"chevrolet caprice classic",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":150,
      "Weight_in_lbs":4464,
      "Acceleration":12,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"ford ltd",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":158,
      "Weight_in_lbs":4363,
      "Acceleration":13,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"plymouth fury gran sedan",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4237,
      "Acceleration":14.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"chrysler new yorker brougham",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":440,
      "Horsepower":215,
      "Weight_in_lbs":4735,
      "Acceleration":11,
      "Year":1973,
      "Origin":"A"
   },
   {
"Name":"buick electra 225 custom",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":455,
      "Horsepower":225,
      "Weight_in_lbs":4951,
      "Acceleration":11,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"amc ambassador brougham",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":360,
      "Horsepower":175,
      "Weight_in_lbs":3821,
      "Acceleration":11,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"plymouth valiant",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":105,
      "Weight_in_lbs":3121,
      "Acceleration":16.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"chevrolet nova custom",
      "Miles_per_Gallon":16,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":100,
      "Weight_in_lbs":3278,
      "Acceleration":18,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"amc hornet",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":2945,
      "Acceleration":16,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"ford maverick",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":88,
      "Weight_in_lbs":3021,
      "Acceleration":16.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"plymouth duster",
      "Miles_per_Gallon":23,
      "Cylinders":6,
      "Displacement":198,
      "Horsepower":95,
      "Weight_in_lbs":2904,
      "Acceleration":16,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"volkswagen super beetle",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":46,
      "Weight_in_lbs":1950,
      "Acceleration":21,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"chevrolet impala",
      "Miles_per_Gallon":11,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":150,
      "Weight_in_lbs":4997,
      "Acceleration":14,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"ford country",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":167,
      "Weight_in_lbs":4906,
      "Acceleration":12.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"plymouth custom suburb",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":360,
      "Horsepower":170,
      "Weight_in_lbs":4654,
      "Acceleration":13,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile vista cruiser",
      "Miles_per_Gallon":12,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":180,
      "Weight_in_lbs":4499,
      "Acceleration":12.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"amc gremlin",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":2789,
      "Acceleration":15,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"toyota carina",
      "Miles_per_Gallon":20,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":88,
      "Weight_in_lbs":2279,
      "Acceleration":19,
      "Year":1973,
      "Origin":"C"
   },
   {
      "Name":"chevrolet vega",
      "Miles_per_Gallon":21,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":72,
      "Weight_in_lbs":2401,
      "Acceleration":19.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"datsun 610",
      "Miles_per_Gallon":22,
      "Cylinders":4,
      "Displacement":108,
      "Horsepower":94,
      "Weight_in_lbs":2379,
      "Acceleration":16.5,
      "Year":1973,
      "Origin":"C"
   },
   {
      "Name":"maxda rx3",
      "Miles_per_Gallon":18,
      "Cylinders":3,
      "Displacement":70,
      "Horsepower":90,
      "Weight_in_lbs":2124,
      "Acceleration":13.5,
      "Year":1973,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":19,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":85,
      "Weight_in_lbs":2310,
      "Acceleration":18.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"mercury capri v6",
      "Miles_per_Gallon":21,
      "Cylinders":6,
      "Displacement":155,
      "Horsepower":107,
      "Weight_in_lbs":2472,
      "Acceleration":14,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"fiat 124 sport coupe",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":90,
      "Weight_in_lbs":2265,
      "Acceleration":15.5,
      "Year":1973,
      "Origin":"B"
   },
   {
"Name":"chevrolet monte carlo s",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":145,
      "Weight_in_lbs":4082,
      "Acceleration":13,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"pontiac grand prix",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":230,
      "Weight_in_lbs":4278,
      "Acceleration":9.5,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"fiat 128",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":68,
      "Horsepower":49,
      "Weight_in_lbs":1867,
      "Acceleration":19.5,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"opel manta",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":116,
      "Horsepower":75,
      "Weight_in_lbs":2158,
      "Acceleration":15.5,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"audi 100ls",
      "Miles_per_Gallon":20,
      "Cylinders":4,
      "Displacement":114,
      "Horsepower":91,
      "Weight_in_lbs":2582,
      "Acceleration":14,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"volvo 144ea",
      "Miles_per_Gallon":19,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":112,
      "Weight_in_lbs":2868,
      "Acceleration":15.5,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"dodge dart custom",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3399,
      "Acceleration":11,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"saab 99le",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":110,
      "Weight_in_lbs":2660,
      "Acceleration":14,
      "Year":1973,
      "Origin":"B"
   },
   {
      "Name":"toyota mark ii",
      "Miles_per_Gallon":20,
      "Cylinders":6,
      "Displacement":156,
      "Horsepower":122,
      "Weight_in_lbs":2807,
      "Acceleration":13.5,
      "Year":1973,
      "Origin":"C"
   },
   {
      "Name":"oldsmobile omega",
      "Miles_per_Gallon":11,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":180,
      "Weight_in_lbs":3664,
      "Acceleration":11,
      "Year":1973,
      "Origin":"A"
   },
   {
      "Name":"plymouth duster",
      "Miles_per_Gallon":20,
      "Cylinders":6,
      "Displacement":198,
      "Horsepower":95,
      "Weight_in_lbs":3102,
      "Acceleration":16.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"ford maverick",
      "Miles_per_Gallon":21,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":null,
      "Weight_in_lbs":2875,
      "Acceleration":17,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"amc hornet",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":2901,
      "Acceleration":16,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"chevrolet nova",
      "Miles_per_Gallon":15,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":100,
      "Weight_in_lbs":3336,
      "Acceleration":17,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"datsun b210",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":67,
      "Weight_in_lbs":1950,
      "Acceleration":19,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":80,
      "Weight_in_lbs":2451,
      "Acceleration":16.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"toyota corolla 1200",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":71,
      "Horsepower":65,
      "Weight_in_lbs":1836,
      "Acceleration":21,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"chevrolet vega",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":75,
      "Weight_in_lbs":2542,
      "Acceleration":17,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"chevrolet chevelle malibu classic",
      "Miles_per_Gallon":16,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":100,
      "Weight_in_lbs":3781,
      "Acceleration":17,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"amc matador",
      "Miles_per_Gallon":16,
      "Cylinders":6,
      "Displacement":258,
      "Horsepower":110,
      "Weight_in_lbs":3632,
      "Acceleration":18,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"plymouth satellite sebring",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":105,
      "Weight_in_lbs":3613,
      "Acceleration":16.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"ford gran torino",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":140,
      "Weight_in_lbs":4141,
      "Acceleration":14,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"buick century luxus (sw)",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":150,
      "Weight_in_lbs":4699,
      "Acceleration":14.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"dodge coronet custom (sw)",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4457,
      "Acceleration":13.5,
      "Year":1974,
      "Origin":"A"
   },
   {
"Name":"ford gran torino (sw)",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":140,
      "Weight_in_lbs":4638,
      "Acceleration":16,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"amc matador (sw)",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":150,
      "Weight_in_lbs":4257,
      "Acceleration":15.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"audi fox",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":83,
      "Weight_in_lbs":2219,
      "Acceleration":16.5,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"volkswagen dasher",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":67,
      "Weight_in_lbs":1963,
      "Acceleration":15.5,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"opel manta",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":78,
      "Weight_in_lbs":2300,
      "Acceleration":14.5,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"toyota corona",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":76,
      "Horsepower":52,
      "Weight_in_lbs":1649,
      "Acceleration":16.5,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"datsun 710",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":83,
      "Horsepower":61,
      "Weight_in_lbs":2003,
      "Acceleration":19,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"dodge colt",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":75,
      "Weight_in_lbs":2125,
      "Acceleration":14.5,
      "Year":1974,
      "Origin":"A"
   },
   {
      "Name":"fiat 128",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":75,
      "Weight_in_lbs":2108,
      "Acceleration":15.5,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"fiat 124 tc",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":116,
      "Horsepower":75,
      "Weight_in_lbs":2246,
      "Acceleration":14,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"honda civic",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":97,
      "Weight_in_lbs":2489,
      "Acceleration":15,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"subaru",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":108,
      "Horsepower":93,
      "Weight_in_lbs":2391,
      "Acceleration":15.5,
      "Year":1974,
      "Origin":"C"
   },
   {
      "Name":"fiat x1.9",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":67,
      "Weight_in_lbs":2000,
      "Acceleration":16,
      "Year":1974,
      "Origin":"B"
   },
   {
      "Name":"plymouth valiant custom",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":95,
      "Weight_in_lbs":3264,
      "Acceleration":16,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"chevrolet nova",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":105,
      "Weight_in_lbs":3459,
      "Acceleration":16,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"mercury monarch",
      "Miles_per_Gallon":15,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":72,
      "Weight_in_lbs":3432,
      "Acceleration":21,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"ford maverick",
      "Miles_per_Gallon":15,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":72,
      "Weight_in_lbs":3158,
      "Acceleration":19.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"pontiac catalina",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":170,
      "Weight_in_lbs":4668,
      "Acceleration":11.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"chevrolet bel air",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":145,
      "Weight_in_lbs":4440,
      "Acceleration":14,
      "Year":1975,
      "Origin":"A"
   },
   {
"Name":"plymouth grand fury",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4498,
      "Acceleration":14.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"ford ltd",
      "Miles_per_Gallon":14,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":148,
      "Weight_in_lbs":4657,
      "Acceleration":13.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"buick century",
      "Miles_per_Gallon":17,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":110,
      "Weight_in_lbs":3907,
      "Acceleration":21,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"chevroelt chevelle malibu",
      "Miles_per_Gallon":16,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":105,
      "Weight_in_lbs":3897,
      "Acceleration":18.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"amc matador",
      "Miles_per_Gallon":15,
      "Cylinders":6,
      "Displacement":258,
      "Horsepower":110,
      "Weight_in_lbs":3730,
      "Acceleration":19,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"plymouth fury",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":95,
      "Weight_in_lbs":3785,
      "Acceleration":19,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"buick skyhawk",
      "Miles_per_Gallon":21,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":110,
      "Weight_in_lbs":3039,
      "Acceleration":15,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"chevrolet monza 2+2",
      "Miles_per_Gallon":20,
      "Cylinders":8,
      "Displacement":262,
      "Horsepower":110,
      "Weight_in_lbs":3221,
      "Acceleration":13.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"ford mustang ii",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":129,
      "Weight_in_lbs":3169,
      "Acceleration":12,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"toyota corolla",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":75,
      "Weight_in_lbs":2171,
      "Acceleration":16,
      "Year":1975,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":83,
      "Weight_in_lbs":2639,
      "Acceleration":17,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"amc gremlin",
      "Miles_per_Gallon":20,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":100,
      "Weight_in_lbs":2914,
      "Acceleration":16,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"pontiac astro",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":78,
      "Weight_in_lbs":2592,
      "Acceleration":18.5,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"toyota corona",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":134,
      "Horsepower":96,
      "Weight_in_lbs":2702,
      "Acceleration":13.5,
      "Year":1975,
      "Origin":"C"
   },
   {
      "Name":"volkswagen dasher",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":71,
      "Weight_in_lbs":2223,
      "Acceleration":16.5,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"datsun 710",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":97,
      "Weight_in_lbs":2545,
      "Acceleration":17,
      "Year":1975,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":171,
      "Horsepower":97,
      "Weight_in_lbs":2984,
      "Acceleration":14.5,
      "Year":1975,
      "Origin":"A"
   },
   {
"Name":"volkswagen rabbit",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":70,
      "Weight_in_lbs":1937,
      "Acceleration":14,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"amc pacer",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":90,
      "Weight_in_lbs":3211,
      "Acceleration":17,
      "Year":1975,
      "Origin":"A"
   },
   {
      "Name":"audi 100ls",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":115,
      "Horsepower":95,
      "Weight_in_lbs":2694,
      "Acceleration":15,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"peugeot 504",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":88,
      "Weight_in_lbs":2957,
      "Acceleration":17,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"volvo 244dl",
      "Miles_per_Gallon":22,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":98,
      "Weight_in_lbs":2945,
      "Acceleration":14.5,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"saab 99le",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":115,
      "Weight_in_lbs":2671,
      "Acceleration":13.5,
      "Year":1975,
      "Origin":"B"
   },
   {
      "Name":"honda civic cvcc",
      "Miles_per_Gallon":33,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":53,
      "Weight_in_lbs":1795,
      "Acceleration":17.5,
      "Year":1975,
      "Origin":"C"
   },
   {
      "Name":"fiat 131",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":107,
      "Horsepower":86,
      "Weight_in_lbs":2464,
      "Acceleration":15.5,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"opel 1900",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":116,
      "Horsepower":81,
      "Weight_in_lbs":2220,
      "Acceleration":16.9,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"capri ii",
      "Miles_per_Gallon":25,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":92,
      "Weight_in_lbs":2572,
      "Acceleration":14.9,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"dodge colt",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":79,
      "Weight_in_lbs":2255,
      "Acceleration":17.7,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"renault 12tl",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":101,
      "Horsepower":83,
      "Weight_in_lbs":2202,
      "Acceleration":15.3,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"chevrolet chevelle malibu classic",
      "Miles_per_Gallon":17.5,
      "Cylinders":8,
      "Displacement":305,
      "Horsepower":140,
      "Weight_in_lbs":4215,
      "Acceleration":13,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"dodge coronet brougham",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":4190,
      "Acceleration":13,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"amc matador",
      "Miles_per_Gallon":15.5,
      "Cylinders":8,
      "Displacement":304,
      "Horsepower":120,
      "Weight_in_lbs":3962,
      "Acceleration":13.9,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"ford gran torino",
      "Miles_per_Gallon":14.5,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":152,
      "Weight_in_lbs":4215,
      "Acceleration":12.8,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"plymouth valiant",
      "Miles_per_Gallon":22,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":100,
      "Weight_in_lbs":3233,
      "Acceleration":15.4,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"chevrolet nova",
      "Miles_per_Gallon":22,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":105,
      "Weight_in_lbs":3353,
      "Acceleration":14.5,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"ford maverick",
      "Miles_per_Gallon":24,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":81,
      "Weight_in_lbs":3012,
      "Acceleration":17.6,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"amc hornet",
      "Miles_per_Gallon":22.5,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":90,
      "Weight_in_lbs":3085,
      "Acceleration":17.6,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"chevrolet chevette",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":52,
      "Weight_in_lbs":2035,
      "Acceleration":22.2,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"chevrolet woody",
      "Miles_per_Gallon":24.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":60,
      "Weight_in_lbs":2164,
      "Acceleration":22.1,
      "Year":1976,
      "Origin":"A"
   },
   {
"Name":"vw rabbit",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":70,
      "Weight_in_lbs":1937,
      "Acceleration":14.2,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"honda civic",
      "Miles_per_Gallon":33,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":53,
      "Weight_in_lbs":1795,
      "Acceleration":17.4,
      "Year":1976,
      "Origin":"C"
   },
   {
      "Name":"dodge aspen se",
      "Miles_per_Gallon":20,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":100,
      "Weight_in_lbs":3651,
      "Acceleration":17.7,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"ford granada ghia",
      "Miles_per_Gallon":18,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":78,
      "Weight_in_lbs":3574,
      "Acceleration":21,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"pontiac ventura sj",
      "Miles_per_Gallon":18.5,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":110,
      "Weight_in_lbs":3645,
      "Acceleration":16.2,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"amc pacer d/l",
      "Miles_per_Gallon":17.5,
      "Cylinders":6,
      "Displacement":258,
      "Horsepower":95,
      "Weight_in_lbs":3193,
      "Acceleration":17.8,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"volkswagen rabbit",
      "Miles_per_Gallon":29.5,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":71,
      "Weight_in_lbs":1825,
      "Acceleration":12.2,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"datsun b-210",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":70,
      "Weight_in_lbs":1990,
      "Acceleration":17,
      "Year":1976,
      "Origin":"C"
   },
   {
      "Name":"toyota corolla",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":75,
      "Weight_in_lbs":2155,
      "Acceleration":16.4,
      "Year":1976,
      "Origin":"C"
   },
   {
      "Name":"ford pinto",
      "Miles_per_Gallon":26.5,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":72,
      "Weight_in_lbs":2565,
      "Acceleration":13.6,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"volvo 245",
      "Miles_per_Gallon":20,
      "Cylinders":4,
      "Displacement":130,
      "Horsepower":102,
      "Weight_in_lbs":3150,
      "Acceleration":15.7,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"plymouth volare premier v8",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3940,
      "Acceleration":13.2,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"peugeot 504",
      "Miles_per_Gallon":19,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":88,
      "Weight_in_lbs":3270,
      "Acceleration":21.9,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"toyota mark ii",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":156,
      "Horsepower":108,
      "Weight_in_lbs":2930,
      "Acceleration":15.5,
      "Year":1976,
      "Origin":"C"
   },
   {
"Name":"mercedes-benz 280s",
      "Miles_per_Gallon":16.5,
      "Cylinders":6,
      "Displacement":168,
      "Horsepower":120,
      "Weight_in_lbs":3820,
      "Acceleration":16.7,
      "Year":1976,
      "Origin":"B"
   },
   {
      "Name":"cadillac seville",
      "Miles_per_Gallon":16.5,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":180,
      "Weight_in_lbs":4380,
      "Acceleration":12.1,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"chevy c10",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":145,
      "Weight_in_lbs":4055,
      "Acceleration":12,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"ford f108",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":130,
      "Weight_in_lbs":3870,
      "Acceleration":15,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"dodge d100",
      "Miles_per_Gallon":13,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":150,
      "Weight_in_lbs":3755,
      "Acceleration":14,
      "Year":1976,
      "Origin":"A"
   },
   {
      "Name":"honda Accelerationord cvcc",
      "Miles_per_Gallon":31.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":68,
      "Weight_in_lbs":2045,
      "Acceleration":18.5,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"buick opel isuzu deluxe",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":111,
      "Horsepower":80,
      "Weight_in_lbs":2155,
      "Acceleration":14.8,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"renault 5 gtl",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":58,
      "Weight_in_lbs":1825,
      "Acceleration":18.6,
      "Year":1977,
      "Origin":"B"
   },
   {
      "Name":"plymouth arrow gs",
      "Miles_per_Gallon":25.5,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":96,
      "Weight_in_lbs":2300,
      "Acceleration":15.5,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"datsun f-10 hatchback",
      "Miles_per_Gallon":33.5,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":70,
      "Weight_in_lbs":1945,
      "Acceleration":16.8,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"chevrolet caprice classic",
      "Miles_per_Gallon":17.5,
      "Cylinders":8,
      "Displacement":305,
      "Horsepower":145,
      "Weight_in_lbs":3880,
      "Acceleration":12.5,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile cutlass supreme",
      "Miles_per_Gallon":17,
      "Cylinders":8,
      "Displacement":260,
      "Horsepower":110,
      "Weight_in_lbs":4060,
      "Acceleration":19,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"dodge monaco brougham",
      "Miles_per_Gallon":15.5,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":145,
      "Weight_in_lbs":4140,
      "Acceleration":13.7,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"mercury cougar brougham",
      "Miles_per_Gallon":15,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":130,
      "Weight_in_lbs":4295,
      "Acceleration":14.9,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"chevrolet concours",
      "Miles_per_Gallon":17.5,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":110,
      "Weight_in_lbs":3520,
      "Acceleration":16.4,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"buick skylark",
      "Miles_per_Gallon":20.5,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":105,
      "Weight_in_lbs":3425,
      "Acceleration":16.9,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"plymouth volare custom",
      "Miles_per_Gallon":19,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":100,
      "Weight_in_lbs":3630,
      "Acceleration":17.7,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"ford granada",
      "Miles_per_Gallon":18.5,
      "Cylinders":6,
      "Displacement":250,
      "Horsepower":98,
      "Weight_in_lbs":3525,
      "Acceleration":19,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"pontiac grand prix lj",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":180,
      "Weight_in_lbs":4220,
      "Acceleration":11.1,
      "Year":1977,
      "Origin":"A"
   },
   {
"Name":"chevrolet monte carlo landau",
      "Miles_per_Gallon":15.5,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":170,
      "Weight_in_lbs":4165,
      "Acceleration":11.4,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"chrysler cordoba",
      "Miles_per_Gallon":15.5,
      "Cylinders":8,
      "Displacement":400,
      "Horsepower":190,
      "Weight_in_lbs":4325,
      "Acceleration":12.2,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"ford thunderbird",
      "Miles_per_Gallon":16,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":149,
      "Weight_in_lbs":4335,
      "Acceleration":14.5,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"volkswagen rabbit custom",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":78,
      "Weight_in_lbs":1940,
      "Acceleration":14.5,
      "Year":1977,
      "Origin":"B"
   },
   {
      "Name":"pontiac sunbird coupe",
      "Miles_per_Gallon":24.5,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":88,
      "Weight_in_lbs":2740,
      "Acceleration":16,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"toyota corolla liftback",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":75,
      "Weight_in_lbs":2265,
      "Acceleration":18.2,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"ford mustang ii 2+2",
      "Miles_per_Gallon":25.5,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":89,
      "Weight_in_lbs":2755,
      "Acceleration":15.8,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"chevrolet chevette",
      "Miles_per_Gallon":30.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":63,
      "Weight_in_lbs":2051,
      "Acceleration":17,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"dodge colt m/m",
      "Miles_per_Gallon":33.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":83,
      "Weight_in_lbs":2075,
      "Acceleration":15.9,
      "Year":1977,
      "Origin":"A"
   },
   {
      "Name":"subaru dl",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":67,
      "Weight_in_lbs":1985,
      "Acceleration":16.4,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"volkswagen dasher",
      "Miles_per_Gallon":30.5,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":78,
      "Weight_in_lbs":2190,
      "Acceleration":14.1,
      "Year":1977,
      "Origin":"B"
   },
   {
      "Name":"datsun 810",
      "Miles_per_Gallon":22,
      "Cylinders":6,
      "Displacement":146,
      "Horsepower":97,
      "Weight_in_lbs":2815,
      "Acceleration":14.5,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"bmw 320i",
      "Miles_per_Gallon":21.5,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":110,
      "Weight_in_lbs":2600,
      "Acceleration":12.8,
      "Year":1977,
      "Origin":"B"
   },
   {
      "Name":"mazda rx-4",
      "Miles_per_Gallon":21.5,
      "Cylinders":3,
      "Displacement":80,
      "Horsepower":110,
      "Weight_in_lbs":2720,
      "Acceleration":13.5,
      "Year":1977,
      "Origin":"C"
   },
   {
      "Name":"volkswagen rabbit custom diesel",
      "Miles_per_Gallon":43.1,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":48,
      "Weight_in_lbs":1985,
      "Acceleration":21.5,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"ford fiesta",
      "Miles_per_Gallon":36.1,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":66,
      "Weight_in_lbs":1800,
      "Acceleration":14.4,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"mazda glc deluxe",
      "Miles_per_Gallon":32.8,
      "Cylinders":4,
      "Displacement":78,
      "Horsepower":52,
      "Weight_in_lbs":1985,
      "Acceleration":19.4,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"datsun b210 gx",
      "Miles_per_Gallon":39.4,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":70,
      "Weight_in_lbs":2070,
      "Acceleration":18.6,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"honda civic cvcc",
      "Miles_per_Gallon":36.1,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":60,
      "Weight_in_lbs":1800,
      "Acceleration":16.4,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"oldsmobile cutlass salon brougham",
      "Miles_per_Gallon":19.9,
      "Cylinders":8,
      "Displacement":260,
      "Horsepower":110,
      "Weight_in_lbs":3365,
      "Acceleration":15.5,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"dodge diplomat",
      "Miles_per_Gallon":19.4,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":140,
      "Weight_in_lbs":3735,
      "Acceleration":13.2,
      "Year":1978,
      "Origin":"A"
   },
   {
"Name":"mercury monarch ghia",
      "Miles_per_Gallon":20.2,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":139,
      "Weight_in_lbs":3570,
      "Acceleration":12.8,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"pontiac phoenix lj",
      "Miles_per_Gallon":19.2,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":105,
      "Weight_in_lbs":3535,
      "Acceleration":19.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"chevrolet malibu",
      "Miles_per_Gallon":20.5,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":95,
      "Weight_in_lbs":3155,
      "Acceleration":18.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"ford fairmont (auto)",
      "Miles_per_Gallon":20.2,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":85,
      "Weight_in_lbs":2965,
      "Acceleration":15.8,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"ford fairmont (man)",
      "Miles_per_Gallon":25.1,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":88,
      "Weight_in_lbs":2720,
      "Acceleration":15.4,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"plymouth volare",
      "Miles_per_Gallon":20.5,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":100,
      "Weight_in_lbs":3430,
      "Acceleration":17.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"amc concord",
      "Miles_per_Gallon":19.4,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":90,
      "Weight_in_lbs":3210,
      "Acceleration":17.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"buick century special",
      "Miles_per_Gallon":20.6,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":105,
      "Weight_in_lbs":3380,
      "Acceleration":15.8,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"mercury zephyr",
      "Miles_per_Gallon":20.8,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":85,
      "Weight_in_lbs":3070,
      "Acceleration":16.7,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"dodge aspen",
      "Miles_per_Gallon":18.6,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":110,
      "Weight_in_lbs":3620,
      "Acceleration":18.7,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"amc concord d/l",
      "Miles_per_Gallon":18.1,
      "Cylinders":6,
      "Displacement":258,
      "Horsepower":120,
      "Weight_in_lbs":3410,
      "Acceleration":15.1,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"chevrolet monte carlo landau",
      "Miles_per_Gallon":19.2,
      "Cylinders":8,
      "Displacement":305,
      "Horsepower":145,
      "Weight_in_lbs":3425,
      "Acceleration":13.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"buick regal sport coupe (turbo)",
      "Miles_per_Gallon":17.7,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":165,
      "Weight_in_lbs":3445,
      "Acceleration":13.4,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"ford futura",
      "Miles_per_Gallon":18.1,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":139,
      "Weight_in_lbs":3205,
      "Acceleration":11.2,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"dodge magnum xe",
      "Miles_per_Gallon":17.5,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":140,
      "Weight_in_lbs":4080,
      "Acceleration":13.7,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"chevrolet chevette",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":68,
      "Weight_in_lbs":2155,
      "Acceleration":16.5,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"toyota corona",
      "Miles_per_Gallon":27.5,
      "Cylinders":4,
      "Displacement":134,
      "Horsepower":95,
      "Weight_in_lbs":2560,
      "Acceleration":14.2,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"datsun 510",
      "Miles_per_Gallon":27.2,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":97,
      "Weight_in_lbs":2300,
      "Acceleration":14.7,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"dodge omni",
      "Miles_per_Gallon":30.9,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":75,
      "Weight_in_lbs":2230,
      "Acceleration":14.5,
      "Year":1978,
      "Origin":"A"
   },
   {
"Name":"toyota celica gt liftback",
      "Miles_per_Gallon":21.1,
      "Cylinders":4,
      "Displacement":134,
      "Horsepower":95,
      "Weight_in_lbs":2515,
      "Acceleration":14.8,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"plymouth sapporo",
      "Miles_per_Gallon":23.2,
      "Cylinders":4,
      "Displacement":156,
      "Horsepower":105,
      "Weight_in_lbs":2745,
      "Acceleration":16.7,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile starfire sx",
      "Miles_per_Gallon":23.8,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":85,
      "Weight_in_lbs":2855,
      "Acceleration":17.6,
      "Year":1978,
      "Origin":"A"
   },
   {
      "Name":"datsun 200-sx",
      "Miles_per_Gallon":23.9,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":97,
      "Weight_in_lbs":2405,
      "Acceleration":14.9,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"audi 5000",
      "Miles_per_Gallon":20.3,
      "Cylinders":5,
      "Displacement":131,
      "Horsepower":103,
      "Weight_in_lbs":2830,
      "Acceleration":15.9,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"volvo 264gl",
      "Miles_per_Gallon":17,
      "Cylinders":6,
      "Displacement":163,
      "Horsepower":125,
      "Weight_in_lbs":3140,
      "Acceleration":13.6,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"saab 99gle",
      "Miles_per_Gallon":21.6,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":115,
      "Weight_in_lbs":2795,
      "Acceleration":15.7,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"peugeot 604sl",
      "Miles_per_Gallon":16.2,
      "Cylinders":6,
      "Displacement":163,
      "Horsepower":133,
      "Weight_in_lbs":3410,
      "Acceleration":15.8,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"volkswagen scirocco",
      "Miles_per_Gallon":31.5,
      "Cylinders":4,
      "Displacement":89,
      "Horsepower":71,
      "Weight_in_lbs":1990,
      "Acceleration":14.9,
      "Year":1978,
      "Origin":"B"
   },
   {
      "Name":"honda Accelerationord lx",
      "Miles_per_Gallon":29.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":68,
      "Weight_in_lbs":2135,
      "Acceleration":16.6,
      "Year":1978,
      "Origin":"C"
   },
   {
      "Name":"pontiac lemans v6",
      "Miles_per_Gallon":21.5,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":115,
      "Weight_in_lbs":3245,
      "Acceleration":15.4,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"mercury zephyr 6",
      "Miles_per_Gallon":19.8,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":85,
      "Weight_in_lbs":2990,
      "Acceleration":18.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"ford fairmont 4",
      "Miles_per_Gallon":22.3,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":88,
      "Weight_in_lbs":2890,
      "Acceleration":17.3,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"amc concord dl 6",
      "Miles_per_Gallon":20.2,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":90,
      "Weight_in_lbs":3265,
      "Acceleration":18.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"dodge aspen 6",
      "Miles_per_Gallon":20.6,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":110,
      "Weight_in_lbs":3360,
      "Acceleration":16.6,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"chevrolet caprice classic",
      "Miles_per_Gallon":17,
      "Cylinders":8,
      "Displacement":305,
      "Horsepower":130,
      "Weight_in_lbs":3840,
      "Acceleration":15.4,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"ford ltd landau",
      "Miles_per_Gallon":17.6,
      "Cylinders":8,
      "Displacement":302,
      "Horsepower":129,
      "Weight_in_lbs":3725,
      "Acceleration":13.4,
      "Year":1979,
      "Origin":"A"
   },
   {
"Name":"mercury grand marquis",
      "Miles_per_Gallon":16.5,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":138,
      "Weight_in_lbs":3955,
      "Acceleration":13.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"dodge st. regis",
      "Miles_per_Gallon":18.2,
      "Cylinders":8,
      "Displacement":318,
      "Horsepower":135,
      "Weight_in_lbs":3830,
      "Acceleration":15.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"buick estate wagon (sw)",
      "Miles_per_Gallon":16.9,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":155,
      "Weight_in_lbs":4360,
      "Acceleration":14.9,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"ford country squire (sw)",
      "Miles_per_Gallon":15.5,
      "Cylinders":8,
      "Displacement":351,
      "Horsepower":142,
      "Weight_in_lbs":4054,
      "Acceleration":14.3,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"chevrolet malibu classic (sw)",
      "Miles_per_Gallon":19.2,
      "Cylinders":8,
      "Displacement":267,
      "Horsepower":125,
      "Weight_in_lbs":3605,
      "Acceleration":15,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"chrysler lebaron town @ country (sw)",
      "Miles_per_Gallon":18.5,
      "Cylinders":8,
      "Displacement":360,
      "Horsepower":150,
      "Weight_in_lbs":3940,
      "Acceleration":13,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"vw rabbit custom",
      "Miles_per_Gallon":31.9,
      "Cylinders":4,
      "Displacement":89,
      "Horsepower":71,
      "Weight_in_lbs":1925,
      "Acceleration":14,
      "Year":1979,
      "Origin":"B"
   },
   {
      "Name":"maxda glc deluxe",
      "Miles_per_Gallon":34.1,
      "Cylinders":4,
      "Displacement":86,
      "Horsepower":65,
      "Weight_in_lbs":1975,
      "Acceleration":15.2,
      "Year":1979,
      "Origin":"C"
   },
   {
      "Name":"dodge colt hatchback custom",
      "Miles_per_Gallon":35.7,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":80,
      "Weight_in_lbs":1915,
      "Acceleration":14.4,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"amc spirit dl",
      "Miles_per_Gallon":27.4,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":80,
      "Weight_in_lbs":2670,
      "Acceleration":15,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"mercedes benz 300d",
      "Miles_per_Gallon":25.4,
      "Cylinders":5,
      "Displacement":183,
      "Horsepower":77,
      "Weight_in_lbs":3530,
      "Acceleration":20.1,
      "Year":1979,
      "Origin":"B"
   },
   {
      "Name":"cadillac eldorado",
      "Miles_per_Gallon":23,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":125,
      "Weight_in_lbs":3900,
      "Acceleration":17.4,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"peugeot 504",
      "Miles_per_Gallon":27.2,
      "Cylinders":4,
      "Displacement":141,
      "Horsepower":71,
      "Weight_in_lbs":3190,
      "Acceleration":24.8,
      "Year":1979,
      "Origin":"B"
   },
   {
      "Name":"oldsmobile cutlass salon brougham",
      "Miles_per_Gallon":23.9,
      "Cylinders":8,
      "Displacement":260,
      "Horsepower":90,
      "Weight_in_lbs":3420,
      "Acceleration":22.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"plymouth horizon",
      "Miles_per_Gallon":34.2,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":70,
      "Weight_in_lbs":2200,
      "Acceleration":13.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"plymouth horizon tc3",
      "Miles_per_Gallon":34.5,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":70,
      "Weight_in_lbs":2150,
      "Acceleration":14.9,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"datsun 210",
      "Miles_per_Gallon":31.8,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":65,
      "Weight_in_lbs":2020,
      "Acceleration":19.2,
      "Year":1979,
      "Origin":"C"
   },
   {
      "Name":"fiat strada custom",
      "Miles_per_Gallon":37.3,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":69,
      "Weight_in_lbs":2130,
      "Acceleration":14.7,
      "Year":1979,
      "Origin":"B"
   },
   {
      "Name":"buick skylark limited",
      "Miles_per_Gallon":28.4,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":2670,
      "Acceleration":16,
      "Year":1979,
      "Origin":"A"
   },
   {
"Name":"chevrolet citation",
      "Miles_per_Gallon":28.8,
      "Cylinders":6,
      "Displacement":173,
      "Horsepower":115,
      "Weight_in_lbs":2595,
      "Acceleration":11.3,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile omega brougham",
      "Miles_per_Gallon":26.8,
      "Cylinders":6,
      "Displacement":173,
      "Horsepower":115,
      "Weight_in_lbs":2700,
      "Acceleration":12.9,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"pontiac phoenix",
      "Miles_per_Gallon":33.5,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":2556,
      "Acceleration":13.2,
      "Year":1979,
      "Origin":"A"
   },
   {
      "Name":"vw rabbit",
      "Miles_per_Gallon":41.5,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":76,
      "Weight_in_lbs":2144,
      "Acceleration":14.7,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"toyota corolla tercel",
      "Miles_per_Gallon":38.1,
      "Cylinders":4,
      "Displacement":89,
      "Horsepower":60,
      "Weight_in_lbs":1968,
      "Acceleration":18.8,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"chevrolet chevette",
      "Miles_per_Gallon":32.1,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":70,
      "Weight_in_lbs":2120,
      "Acceleration":15.5,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"datsun 310",
      "Miles_per_Gallon":37.2,
      "Cylinders":4,
      "Displacement":86,
      "Horsepower":65,
      "Weight_in_lbs":2019,
      "Acceleration":16.4,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"chevrolet citation",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":2678,
      "Acceleration":16.5,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"ford fairmont",
      "Miles_per_Gallon":26.4,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":88,
      "Weight_in_lbs":2870,
      "Acceleration":18.1,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"amc concord",
      "Miles_per_Gallon":24.3,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":3003,
      "Acceleration":20.1,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"dodge aspen",
      "Miles_per_Gallon":19.1,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":90,
      "Weight_in_lbs":3381,
      "Acceleration":18.7,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"audi 4000",
      "Miles_per_Gallon":34.3,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":78,
      "Weight_in_lbs":2188,
      "Acceleration":15.8,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"toyota corona liftback",
      "Miles_per_Gallon":29.8,
      "Cylinders":4,
      "Displacement":134,
      "Horsepower":90,
      "Weight_in_lbs":2711,
      "Acceleration":15.5,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"mazda 626",
      "Miles_per_Gallon":31.3,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":75,
      "Weight_in_lbs":2542,
      "Acceleration":17.5,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"datsun 510 hatchback",
      "Miles_per_Gallon":37,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":92,
      "Weight_in_lbs":2434,
      "Acceleration":15,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"toyota corolla",
      "Miles_per_Gallon":32.2,
      "Cylinders":4,
      "Displacement":108,
      "Horsepower":75,
      "Weight_in_lbs":2265,
      "Acceleration":15.2,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"mazda glc",
      "Miles_per_Gallon":46.6,
      "Cylinders":4,
      "Displacement":86,
      "Horsepower":65,
      "Weight_in_lbs":2110,
      "Acceleration":17.9,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"dodge colt",
      "Miles_per_Gallon":27.9,
      "Cylinders":4,
      "Displacement":156,
      "Horsepower":105,
      "Weight_in_lbs":2800,
      "Acceleration":14.4,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"datsun 210",
      "Miles_per_Gallon":40.8,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":65,
      "Weight_in_lbs":2110,
      "Acceleration":19.2,
      "Year":1980,
      "Origin":"C"
   },
   {
"Name":"vw rabbit c (diesel)",
      "Miles_per_Gallon":44.3,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":48,
      "Weight_in_lbs":2085,
      "Acceleration":21.7,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"vw dasher (diesel)",
      "Miles_per_Gallon":43.4,
      "Cylinders":4,
      "Displacement":90,
      "Horsepower":48,
      "Weight_in_lbs":2335,
      "Acceleration":23.7,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"audi 5000s (diesel)",
      "Miles_per_Gallon":36.4,
      "Cylinders":5,
      "Displacement":121,
      "Horsepower":67,
      "Weight_in_lbs":2950,
      "Acceleration":19.9,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"mercedes-benz 240d",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":146,
      "Horsepower":67,
      "Weight_in_lbs":3250,
      "Acceleration":21.8,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"honda civic 1500 gl",
      "Miles_per_Gallon":44.6,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":67,
      "Weight_in_lbs":1850,
      "Acceleration":13.8,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"renault lecar deluxe",
      "Miles_per_Gallon":40.9,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":null,
      "Weight_in_lbs":1835,
      "Acceleration":17.3,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"subaru dl",
      "Miles_per_Gallon":33.8,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":67,
      "Weight_in_lbs":2145,
      "Acceleration":18,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"vokswagen rabbit",
      "Miles_per_Gallon":29.8,
      "Cylinders":4,
      "Displacement":89,
      "Horsepower":62,
      "Weight_in_lbs":1845,
      "Acceleration":15.3,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"datsun 280-zx",
      "Miles_per_Gallon":32.7,
      "Cylinders":6,
      "Displacement":168,
      "Horsepower":132,
      "Weight_in_lbs":2910,
      "Acceleration":11.4,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"mazda rx-7 gs",
      "Miles_per_Gallon":23.7,
      "Cylinders":3,
      "Displacement":70,
      "Horsepower":100,
      "Weight_in_lbs":2420,
      "Acceleration":12.5,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"triumph tr7 coupe",
      "Miles_per_Gallon":35,
      "Cylinders":4,
      "Displacement":122,
      "Horsepower":88,
      "Weight_in_lbs":2500,
      "Acceleration":15.1,
      "Year":1980,
      "Origin":"B"
   },
   {
      "Name":"ford mustang cobra",
      "Miles_per_Gallon":23.6,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":null,
      "Weight_in_lbs":2905,
      "Acceleration":14.3,
      "Year":1980,
      "Origin":"A"
   },
   {
      "Name":"honda Accelerationord",
      "Miles_per_Gallon":32.4,
      "Cylinders":4,
      "Displacement":107,
      "Horsepower":72,
      "Weight_in_lbs":2290,
      "Acceleration":17,
      "Year":1980,
      "Origin":"C"
   },
   {
      "Name":"plymouth reliant",
      "Miles_per_Gallon":27.2,
      "Cylinders":4,
      "Displacement":135,
      "Horsepower":84,
      "Weight_in_lbs":2490,
      "Acceleration":15.7,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"buick skylark",
      "Miles_per_Gallon":26.6,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":84,
      "Weight_in_lbs":2635,
      "Acceleration":16.4,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"dodge aries wagon (sw)",
      "Miles_per_Gallon":25.8,
      "Cylinders":4,
      "Displacement":156,
      "Horsepower":92,
      "Weight_in_lbs":2620,
      "Acceleration":14.4,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevrolet citation",
      "Miles_per_Gallon":23.5,
      "Cylinders":6,
      "Displacement":173,
      "Horsepower":110,
      "Weight_in_lbs":2725,
      "Acceleration":12.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"plymouth reliant",
      "Miles_per_Gallon":30,
      "Cylinders":4,
      "Displacement":135,
      "Horsepower":84,
      "Weight_in_lbs":2385,
      "Acceleration":12.9,
      "Year":1982,
      "Origin":"A"
   },
   {
"Name":"toyota starlet",
      "Miles_per_Gallon":39.1,
      "Cylinders":4,
      "Displacement":79,
      "Horsepower":58,
      "Weight_in_lbs":1755,
      "Acceleration":16.9,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"plymouth champ",
      "Miles_per_Gallon":39,
      "Cylinders":4,
      "Displacement":86,
      "Horsepower":64,
      "Weight_in_lbs":1875,
      "Acceleration":16.4,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"honda civic 1300",
      "Miles_per_Gallon":35.1,
      "Cylinders":4,
      "Displacement":81,
      "Horsepower":60,
      "Weight_in_lbs":1760,
      "Acceleration":16.1,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"subaru",
      "Miles_per_Gallon":32.3,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":67,
      "Weight_in_lbs":2065,
      "Acceleration":17.8,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"datsun 210",
      "Miles_per_Gallon":37,
      "Cylinders":4,
      "Displacement":85,
      "Horsepower":65,
      "Weight_in_lbs":1975,
      "Acceleration":19.4,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"toyota tercel",
      "Miles_per_Gallon":37.7,
      "Cylinders":4,
      "Displacement":89,
      "Horsepower":62,
      "Weight_in_lbs":2050,
      "Acceleration":17.3,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"mazda glc 4",
      "Miles_per_Gallon":34.1,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":68,
      "Weight_in_lbs":1985,
      "Acceleration":16,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"plymouth horizon 4",
      "Miles_per_Gallon":34.7,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":63,
      "Weight_in_lbs":2215,
      "Acceleration":14.9,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford escort 4w",
      "Miles_per_Gallon":34.4,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":65,
      "Weight_in_lbs":2045,
      "Acceleration":16.2,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford escort 2h",
      "Miles_per_Gallon":29.9,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":65,
      "Weight_in_lbs":2380,
      "Acceleration":20.7,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"volkswagen jetta",
      "Miles_per_Gallon":33,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":74,
      "Weight_in_lbs":2190,
      "Acceleration":14.2,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"renault 18i",
      "Miles_per_Gallon":34.5,
      "Cylinders":4,
      "Displacement":100,
      "Horsepower":null,
      "Weight_in_lbs":2320,
      "Acceleration":15.8,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"honda prelude",
      "Miles_per_Gallon":33.7,
      "Cylinders":4,
      "Displacement":107,
      "Horsepower":75,
      "Weight_in_lbs":2210,
      "Acceleration":14.4,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"toyota corolla",
      "Miles_per_Gallon":32.4,
      "Cylinders":4,
      "Displacement":108,
      "Horsepower":75,
      "Weight_in_lbs":2350,
      "Acceleration":16.8,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"datsun 200sx",
      "Miles_per_Gallon":32.9,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":100,
      "Weight_in_lbs":2615,
      "Acceleration":14.8,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"mazda 626",
      "Miles_per_Gallon":31.6,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":74,
      "Weight_in_lbs":2635,
      "Acceleration":18.3,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"peugeot 505s turbo diesel",
      "Miles_per_Gallon":28.1,
      "Cylinders":4,
      "Displacement":141,
      "Horsepower":80,
      "Weight_in_lbs":3230,
      "Acceleration":20.4,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"saab 900s",
      "Miles_per_Gallon":null,
      "Cylinders":4,
      "Displacement":121,
      "Horsepower":110,
      "Weight_in_lbs":2800,
      "Acceleration":15.4,
      "Year":1982,
      "Origin":"B"
   },
   {
"Name":"volvo diesel",
      "Miles_per_Gallon":30.7,
      "Cylinders":6,
      "Displacement":145,
      "Horsepower":76,
      "Weight_in_lbs":3160,
      "Acceleration":19.6,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"toyota cressida",
      "Miles_per_Gallon":25.4,
      "Cylinders":6,
      "Displacement":168,
      "Horsepower":116,
      "Weight_in_lbs":2900,
      "Acceleration":12.6,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"datsun 810 maxima",
      "Miles_per_Gallon":24.2,
      "Cylinders":6,
      "Displacement":146,
      "Horsepower":120,
      "Weight_in_lbs":2930,
      "Acceleration":13.8,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"buick century",
      "Miles_per_Gallon":22.4,
      "Cylinders":6,
      "Displacement":231,
      "Horsepower":110,
      "Weight_in_lbs":3415,
      "Acceleration":15.8,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile cutlass ls",
      "Miles_per_Gallon":26.6,
      "Cylinders":8,
      "Displacement":350,
      "Horsepower":105,
      "Weight_in_lbs":3725,
      "Acceleration":19,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford granada gl",
      "Miles_per_Gallon":20.2,
      "Cylinders":6,
      "Displacement":200,
      "Horsepower":88,
      "Weight_in_lbs":3060,
      "Acceleration":17.1,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chrysler lebaron salon",
      "Miles_per_Gallon":17.6,
      "Cylinders":6,
      "Displacement":225,
      "Horsepower":85,
      "Weight_in_lbs":3465,
      "Acceleration":16.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevrolet cavalier",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":112,
      "Horsepower":88,
      "Weight_in_lbs":2605,
      "Acceleration":19.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevrolet cavalier wagon",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":112,
      "Horsepower":88,
      "Weight_in_lbs":2640,
      "Acceleration":18.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevrolet cavalier 2-door",
      "Miles_per_Gallon":34,
      "Cylinders":4,
      "Displacement":112,
      "Horsepower":88,
      "Weight_in_lbs":2395,
      "Acceleration":18,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"pontiac j2000 se hatchback",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":112,
      "Horsepower":85,
      "Weight_in_lbs":2575,
      "Acceleration":16.2,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"dodge aries se",
      "Miles_per_Gallon":29,
      "Cylinders":4,
      "Displacement":135,
      "Horsepower":84,
      "Weight_in_lbs":2525,
      "Acceleration":16,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"pontiac phoenix",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":2735,
      "Acceleration":18,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford fairmont futura",
      "Miles_per_Gallon":24,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":92,
      "Weight_in_lbs":2865,
      "Acceleration":16.4,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"amc concord dl",
      "Miles_per_Gallon":23,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":null,
      "Weight_in_lbs":3035,
      "Acceleration":20.5,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"volkswagen rabbit l",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":74,
      "Weight_in_lbs":1980,
      "Acceleration":15.3,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"mazda glc custom l",
      "Miles_per_Gallon":37,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":68,
      "Weight_in_lbs":2025,
      "Acceleration":18.2,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"mazda glc custom",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":68,
      "Weight_in_lbs":1970,
      "Acceleration":17.6,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"plymouth horizon miser",
      "Miles_per_Gallon":38,
      "Cylinders":4,
      "Displacement":105,
      "Horsepower":63,
      "Weight_in_lbs":2125,
      "Acceleration":14.7,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"mercury lynx l",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":98,
      "Horsepower":70,
      "Weight_in_lbs":2125,
      "Acceleration":17.3,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"nissan stanza xe",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":88,
      "Weight_in_lbs":2160,
      "Acceleration":14.5,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"honda Accelerationord",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":107,
      "Horsepower":75,
      "Weight_in_lbs":2205,
      "Acceleration":14.5,
      "Year":1982,
      "Origin":"C"
   },
   {
"Name":"toyota corolla",
      "Miles_per_Gallon":34,
      "Cylinders":4,
      "Displacement":108,
      "Horsepower":70,
      "Weight_in_lbs":2245,
      "Acceleration":16.9,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"honda civic",
      "Miles_per_Gallon":38,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":67,
      "Weight_in_lbs":1965,
      "Acceleration":15,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"honda civic (auto)",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":67,
      "Weight_in_lbs":1965,
      "Acceleration":15.7,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"datsun 310 gx",
      "Miles_per_Gallon":38,
      "Cylinders":4,
      "Displacement":91,
      "Horsepower":67,
      "Weight_in_lbs":1995,
      "Acceleration":16.2,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"buick century limited",
      "Miles_per_Gallon":25,
      "Cylinders":6,
      "Displacement":181,
      "Horsepower":110,
      "Weight_in_lbs":2945,
      "Acceleration":16.4,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"oldsmobile cutlass ciera (diesel)",
      "Miles_per_Gallon":38,
      "Cylinders":6,
      "Displacement":262,
      "Horsepower":85,
      "Weight_in_lbs":3015,
      "Acceleration":17,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chrysler lebaron medallion",
      "Miles_per_Gallon":26,
      "Cylinders":4,
      "Displacement":156,
      "Horsepower":92,
      "Weight_in_lbs":2585,
      "Acceleration":14.5,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford granada l",
      "Miles_per_Gallon":22,
      "Cylinders":6,
      "Displacement":232,
      "Horsepower":112,
      "Weight_in_lbs":2835,
      "Acceleration":14.7,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"toyota celica gt",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":144,
      "Horsepower":96,
      "Weight_in_lbs":2665,
      "Acceleration":13.9,
      "Year":1982,
      "Origin":"C"
   },
   {
      "Name":"dodge charger 2.2",
      "Miles_per_Gallon":36,
      "Cylinders":4,
      "Displacement":135,
      "Horsepower":84,
      "Weight_in_lbs":2370,
      "Acceleration":13,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevrolet camaro",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":151,
      "Horsepower":90,
      "Weight_in_lbs":2950,
      "Acceleration":17.3,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford mustang gl",
      "Miles_per_Gallon":27,
      "Cylinders":4,
      "Displacement":140,
      "Horsepower":86,
      "Weight_in_lbs":2790,
      "Acceleration":15.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"vw pickup",
      "Miles_per_Gallon":44,
      "Cylinders":4,
      "Displacement":97,
      "Horsepower":52,
      "Weight_in_lbs":2130,
      "Acceleration":24.6,
      "Year":1982,
      "Origin":"B"
   },
   {
      "Name":"dodge rampage",
      "Miles_per_Gallon":32,
      "Cylinders":4,
      "Displacement":135,
      "Horsepower":84,
      "Weight_in_lbs":2295,
      "Acceleration":11.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"ford ranger",
      "Miles_per_Gallon":28,
      "Cylinders":4,
      "Displacement":120,
      "Horsepower":79,
      "Weight_in_lbs":2625,
      "Acceleration":18.6,
      "Year":1982,
      "Origin":"A"
   },
   {
      "Name":"chevy s-10",
      "Miles_per_Gallon":31,
      "Cylinders":4,
      "Displacement":119,
      "Horsepower":82,
      "Weight_in_lbs":2720,
      "Acceleration":19.4,
      "Year":1982,
      "Origin":"A"
   }
];

activeSheet.getColumn(0).width(180);
activeSheet.getColumn(1).width(130);
activeSheet.getColumn(2).width(100);
activeSheet.getColumn(3).width(120);
activeSheet.getColumn(4).width(100);
activeSheet.getColumn(5).width(110);
activeSheet.getColumn(6).width(100);

activeSheet.setColumnHeaderVisible(false);
activeSheet.setRowHeaderVisible(false);

var tableStyle = new GcSpread.Sheets.TableStyle();
var thinBorder = new GcSpread.Sheets.LineBorder($("#linecolor>option:selected").text(), GcSpread.Sheets.LineStyle.thin);
tableStyle.wholeTableStyle(new GcSpread.Sheets.TableStyleInfo("beige", "black", "bold 11pt calibri", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder));

$("#button1").click(function () {

var thinBorder = new GcSpread.Sheets.LineBorder($("#linecolor>option:selected").text(), GcSpread.Sheets.LineStyle.thin);
tableStyle.wholeTableStyle(new GcSpread.Sheets.TableStyleInfo($("#tableStyles>option:selected").text(), $("#textcolor>option:selected").text(), "bold 11pt calibri", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder));
activeSheet.isPaintSuspended(false);
activeSheet.repaint();

   });

var table = activeSheet.addTableByDataSource("table1", 0, 0, datasource, tableStyle);
var slicerData = table.getSlicerData();
//create item slicer
//var slicer = new GcSpread.Sheets.ItemSlicer("slicer");
//Set slicer data to item slicer.
//slicer.setData(slicerData, "Miles_per_Gallon");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
//$("#slicerHost").append(slicer.getDOMElement());

        })
    </script>
</head>
<body>
    <div id="ss" style="width:1020px;height:600px"></div>
<label for="tableStyles" style="width:auto;">Cell Color</label>
            <select id="tableStyles">
                <option value="0">aliceblue</option>
                <option value="1">antiquewhite</option>
                <option value="2">aqua</option>
                <option value="3">aquamarine</option>
                <option value="4">azure</option>
                <option value="5" selected='selected'>beige</option>
                <option value="6">bisque</option>
                <option value="7">black</option>
                <option value="8">blanchedalmond</option>
                <option value="9">blue</option>
                <option value="10">blueviolet</option>
                <option value="11">brown</option>
                <option value="12">burlywood</option>
                <option value="13">cadetblue</option>
                <option value="14">chartreuse</option>
                <option value="15">chocolate</option>
                <option value="16">coral</option>
                <option value="17">cornflowerblue</option>
                <option value="18">cornsilk</option>
                <option value="19">crimson</option>
                <option value="20">cyan</option>
                <option value="21">darkblue</option>
                <option value="22">darkcyan</option>        
                <option value="23">darkgoldenrod</option>
                <option value="24">darkgray</option>
                <option value="25">darkgreen</option>
                <option value="26">darkkhaki</option>
                <option value="27">darkmagenta</option>
                <option value="28">darkolivegreen</option>
                <option value="29">darkorange</option>
                <option value="30">darkorchid</option>
                <option value="31">darkred</option>
                <option value="32">darksalmon</option>
                <option value="33">darkseagreen</option>
                <option value="34">darkslateblue</option>
                <option value="35">darkslategray</option>
                <option value="36">darkturquoise</option>
                <option value="37">darkviolet</option>
                <option value="38">deeppink</option>
                <option value="39">deepskyblue</option>
                <option value="40">dimgray</option>
                <option value="41">dodgerblue</option>
                <option value="42">firebrick</option>
                <option value="43">floralwhite</option>
                <option value="44">forestgreen</option>
                <option value="45">fuchsia</option>
                <option value="46">gainsboro</option>
                <option value="47">ghostwhite</option>
                <option value="48">gold</option>
                <option value="49">goldenrod</option>
                <option value="50">gray</option>
                <option value="51">green</option>
                <option value="52">greenyellow</option>
                <option value="53">honeydew</option>
                <option value="54">hotpink</option>
                <option value="55">indianred</option>
                <option value="56">indigo</option>
                <option value="57">ivory</option>
                <option value="58">khaki</option>
                <option value="59">lavender</option>
                <option value="60">lavenderblush</option>
                <option value="61">lawngreen</option>
                <option value="62">lemonchiffon</option>
                <option value="63">lightblue</option>
                <option value="64">lightcyan</option>
                <option value="65">lightgoldenrodyellow</option>
                <option value="66">lightgray</option>
                <option value="67">lightgreen</option>
                <option value="68">lightpink</option>
                <option value="69">lightsalmon</option>
                <option value="70">lightseagreen</option>
                <option value="71">lightskyblue</option>
                <option value="72">lightslategray</option>
                <option value="73">lightsteelblue</option>
                <option value="74">lightyellow</option>
                <option value="75">lime</option>
                <option value="76">limegreen</option>
                <option value="77">linen</option>
                <option value="78">magenta</option>
                <option value="79">maroon</option>
                <option value="80">mediumaquamarine</option>
                <option value="81">mediumblue</option>
                <option value="82">mediumorchid</option>
                <option value="83">mediumpurple</option>
                <option value="84">mediumseagreen</option>
                <option value="85">mediumslateblue</option>
                <option value="86">mediumspringgreen</option>
                <option value="87">mediumturquoise</option>
                <option value="88">mediumvioletred</option>
                <option value="89">midnightblue</option>
                <option value="90">mintcream</option>
                <option value="91">mistyrose</option>
                <option value="92">moccasin</option>
                <option value="93">navajowhite</option>
                <option value="94">navy</option>
                <option value="95">oldlace</option>
                <option value="96">olive</option>
                <option value="97">olivedrab</option>
                <option value="98">orange</option>
                <option value="99">orangered</option>
                <option value="100">orchid</option>
                <option value="101">palegoldenrod</option>
                <option value="102">palegreen</option>
                <option value="103">paleturquoise</option>
                <option value="104">palevioletred</option>
                <option value="105">papayawhip</option>
                <option value="106">peachpuff</option>
                <option value="107">peru</option>
                <option value="108">pink</option>
                <option value="109">plum</option>
                <option value="110">powderblue</option>
                <option value="111">purple</option>
                <option value="112">red</option>
                <option value="113">rosybrown</option>
                <option value="114">royalblue</option>
                <option value="115">saddlebrown</option>
                <option value="116">salmon</option>
                <option value="117">sandybrown</option>
                <option value="118">seagreen</option>
                <option value="119">seashell</option>
                <option value="120">sienna</option>
                <option value="121">silver</option>
                <option value="122">skyblue</option>
                <option value="123">slateblue</option>
                <option value="124">slategray</option>
                <option value="125">snow</option>
                <option value="126">springgreen</option>
                <option value="127">steelblue</option>
                <option value="128">tan</option>
                <option value="129">teal</option>
                <option value="130">thistle</option>
                <option value="131">tomato</option>
                <option value="132">transparent</option>
                <option value="133">turquoise</option>
                <option value="134">violet</option>
                <option value="135">wheat</option>
                <option value="136">white</option>
                <option value="137">whitesmoke</option>
                <option value="138">yellow</option>
                <option value="139">yellowgreen</option>
            </select>

<label for="textcolor" style="width:auto;">Text Color</label>
            <select id="textcolor">
                <option value="0">aliceblue</option>
                <option value="1">antiquewhite</option>
                <option value="2">aqua</option>
                <option value="3">aquamarine</option>
                <option value="4">azure</option>
                <option value="5">beige</option>
                <option value="6">bisque</option>
                <option value="7" selected='selected'>black</option>
                <option value="8">blanchedalmond</option>
                <option value="9">blue</option>
                <option value="10">blueviolet</option>
                <option value="11">brown</option>
                <option value="12">burlywood</option>
                <option value="13">cadetblue</option>
                <option value="14">chartreuse</option>
                <option value="15">chocolate</option>
                <option value="16">coral</option>
                <option value="17">cornflowerblue</option>
                <option value="18">cornsilk</option>
                <option value="19">crimson</option>
                <option value="20">cyan</option>
                <option value="21">darkblue</option>
                <option value="22">darkcyan</option>        
                <option value="23">darkgoldenrod</option>
                <option value="24">darkgray</option>
                <option value="25">darkgreen</option>
                <option value="26">darkkhaki</option>
                <option value="27">darkmagenta</option>
                <option value="28">darkolivegreen</option>
                <option value="29">darkorange</option>
                <option value="30">darkorchid</option>
                <option value="31">darkred</option>
                <option value="32">darksalmon</option>
                <option value="33">darkseagreen</option>
                <option value="34">darkslateblue</option>
                <option value="35">darkslategray</option>
                <option value="36">darkturquoise</option>
                <option value="37">darkviolet</option>
                <option value="38">deeppink</option>
                <option value="39">deepskyblue</option>
                <option value="40">dimgray</option>
                <option value="41">dodgerblue</option>
                <option value="42">firebrick</option>
                <option value="43">floralwhite</option>
                <option value="44">forestgreen</option>
                <option value="45">fuchsia</option>
                <option value="46">gainsboro</option>
                <option value="47">ghostwhite</option>
                <option value="48">gold</option>
                <option value="49">goldenrod</option>
                <option value="50">gray</option>
                <option value="51">green</option>
                <option value="52">greenyellow</option>
                <option value="53">honeydew</option>
                <option value="54">hotpink</option>
                <option value="55">indianred</option>
                <option value="56">indigo</option>
                <option value="57">ivory</option>
                <option value="58">khaki</option>
                <option value="59">lavender</option>
                <option value="60">lavenderblush</option>
                <option value="61">lawngreen</option>
                <option value="62">lemonchiffon</option>
                <option value="63">lightblue</option>
                <option value="64">lightcyan</option>
                <option value="65">lightgoldenrodyellow</option>
                <option value="66">lightgray</option>
                <option value="67">lightgreen</option>
                <option value="68">lightpink</option>
                <option value="69">lightsalmon</option>
                <option value="70">lightseagreen</option>
                <option value="71">lightskyblue</option>
                <option value="72">lightslategray</option>
                <option value="73">lightsteelblue</option>
                <option value="74">lightyellow</option>
                <option value="75">lime</option>
                <option value="76">limegreen</option>
                <option value="77">linen</option>
                <option value="78">magenta</option>
                <option value="79">maroon</option>
                <option value="80">mediumaquamarine</option>
                <option value="81">mediumblue</option>
                <option value="82">mediumorchid</option>
                <option value="83">mediumpurple</option>
                <option value="84">mediumseagreen</option>
                <option value="85">mediumslateblue</option>
                <option value="86">mediumspringgreen</option>
                <option value="87">mediumturquoise</option>
                <option value="88">mediumvioletred</option>
                <option value="89">midnightblue</option>
                <option value="90">mintcream</option>
                <option value="91">mistyrose</option>
                <option value="92">moccasin</option>
                <option value="93">navajowhite</option>
                <option value="94">navy</option>
                <option value="95">oldlace</option>
                <option value="96">olive</option>
                <option value="97">olivedrab</option>
                <option value="98">orange</option>
                <option value="99">orangered</option>
                <option value="100">orchid</option>
                <option value="101">palegoldenrod</option>
                <option value="102">palegreen</option>
                <option value="103">paleturquoise</option>
                <option value="104">palevioletred</option>
                <option value="105">papayawhip</option>
                <option value="106">peachpuff</option>
                <option value="107">peru</option>
                <option value="108">pink</option>
                <option value="109">plum</option>
                <option value="110">powderblue</option>
                <option value="111">purple</option>
                <option value="112">red</option>
                <option value="113">rosybrown</option>
                <option value="114">royalblue</option>
                <option value="115">saddlebrown</option>
                <option value="116">salmon</option>
                <option value="117">sandybrown</option>
                <option value="118">seagreen</option>
                <option value="119">seashell</option>
                <option value="120">sienna</option>
                <option value="121">silver</option>
                <option value="122">skyblue</option>
                <option value="123">slateblue</option>
                <option value="124">slategray</option>
                <option value="125">snow</option>
                <option value="126">springgreen</option>
                <option value="127">steelblue</option>
                <option value="128">tan</option>
                <option value="129">teal</option>
                <option value="130">thistle</option>
                <option value="131">tomato</option>
                <option value="132">transparent</option>
                <option value="133">turquoise</option>
                <option value="134">violet</option>
                <option value="135">wheat</option>
                <option value="136">white</option>
                <option value="137">whitesmoke</option>
                <option value="138">yellow</option>
                <option value="139">yellowgreen</option>
            </select>

<label for="linecolor" style="width:auto;">Grid Line Color</label>
            <select id="linecolor">
                <option value="0">aliceblue</option>
                <option value="1">antiquewhite</option>
                <option value="2">aqua</option>
                <option value="3">aquamarine</option>
                <option value="4">azure</option>
                <option value="5">beige</option>
                <option value="6">bisque</option>
                <option value="7">black</option>
                <option value="8">blanchedalmond</option>
                <option value="9">blue</option>
                <option value="10">blueviolet</option>
                <option value="11">brown</option>
                <option value="12">burlywood</option>
                <option value="13">cadetblue</option>
                <option value="14">chartreuse</option>
                <option value="15">chocolate</option>
                <option value="16">coral</option>
                <option value="17">cornflowerblue</option>
                <option value="18">cornsilk</option>
                <option value="19">crimson</option>
                <option value="20">cyan</option>
                <option value="21">darkblue</option>
                <option value="22">darkcyan</option>        
                <option value="23">darkgoldenrod</option>
                <option value="24">darkgray</option>
                <option value="25">darkgreen</option>
                <option value="26">darkkhaki</option>
                <option value="27">darkmagenta</option>
                <option value="28">darkolivegreen</option>
                <option value="29">darkorange</option>
                <option value="30">darkorchid</option>
                <option value="31">darkred</option>
                <option value="32">darksalmon</option>
                <option value="33">darkseagreen</option>
                <option value="34">darkslateblue</option>
                <option value="35">darkslategray</option>
                <option value="36">darkturquoise</option>
                <option value="37">darkviolet</option>
                <option value="38">deeppink</option>
                <option value="39">deepskyblue</option>
                <option value="40">dimgray</option>
                <option value="41">dodgerblue</option>
                <option value="42">firebrick</option>
                <option value="43">floralwhite</option>
                <option value="44">forestgreen</option>
                <option value="45">fuchsia</option>
                <option value="46">gainsboro</option>
                <option value="47">ghostwhite</option>
                <option value="48">gold</option>
                <option value="49">goldenrod</option>
                <option value="50">gray</option>
                <option value="51">green</option>
                <option value="52">greenyellow</option>
                <option value="53">honeydew</option>
                <option value="54">hotpink</option>
                <option value="55">indianred</option>
                <option value="56">indigo</option>
                <option value="57">ivory</option>
                <option value="58">khaki</option>
                <option value="59">lavender</option>
                <option value="60">lavenderblush</option>
                <option value="61">lawngreen</option>
                <option value="62">lemonchiffon</option>
                <option value="63">lightblue</option>
                <option value="64">lightcyan</option>
                <option value="65">lightgoldenrodyellow</option>
                <option value="66">lightgray</option>
                <option value="67">lightgreen</option>
                <option value="68">lightpink</option>
                <option value="69">lightsalmon</option>
                <option value="70">lightseagreen</option>
                <option value="71">lightskyblue</option>
                <option value="72">lightslategray</option>
                <option value="73">lightsteelblue</option>
                <option value="74">lightyellow</option>
                <option value="75">lime</option>
                <option value="76">limegreen</option>
                <option value="77">linen</option>
                <option value="78">magenta</option>
                <option value="79">maroon</option>
                <option value="80">mediumaquamarine</option>
                <option value="81">mediumblue</option>
                <option value="82">mediumorchid</option>
                <option value="83">mediumpurple</option>
                <option value="84">mediumseagreen</option>
                <option value="85">mediumslateblue</option>
                <option value="86">mediumspringgreen</option>
                <option value="87">mediumturquoise</option>
                <option value="88">mediumvioletred</option>
                <option value="89">midnightblue</option>
                <option value="90">mintcream</option>
                <option value="91">mistyrose</option>
                <option value="92">moccasin</option>
                <option value="93">navajowhite</option>
                <option value="94">navy</option>
                <option value="95">oldlace</option>
                <option value="96">olive</option>
                <option value="97">olivedrab</option>
                <option value="98" selected='selected'>orange</option>
                <option value="99">orangered</option>
                <option value="100">orchid</option>
                <option value="101">palegoldenrod</option>
                <option value="102">palegreen</option>
                <option value="103">paleturquoise</option>
                <option value="104">palevioletred</option>
                <option value="105">papayawhip</option>
                <option value="106">peachpuff</option>
                <option value="107">peru</option>
                <option value="108">pink</option>
                <option value="109">plum</option>
                <option value="110">powderblue</option>
                <option value="111">purple</option>
                <option value="112">red</option>
                <option value="113">rosybrown</option>
                <option value="114">royalblue</option>
                <option value="115">saddlebrown</option>
                <option value="116">salmon</option>
                <option value="117">sandybrown</option>
                <option value="118">seagreen</option>
                <option value="119">seashell</option>
                <option value="120">sienna</option>
                <option value="121">silver</option>
                <option value="122">skyblue</option>
                <option value="123">slateblue</option>
                <option value="124">slategray</option>
                <option value="125">snow</option>
                <option value="126">springgreen</option>
                <option value="127">steelblue</option>
                <option value="128">tan</option>
                <option value="129">teal</option>
                <option value="130">thistle</option>
                <option value="131">tomato</option>
                <option value="132">transparent</option>
                <option value="133">turquoise</option>
                <option value="134">violet</option>
                <option value="135">wheat</option>
                <option value="136">white</option>
                <option value="137">whitesmoke</option>
                <option value="138">yellow</option>
                <option value="139">yellowgreen</option>
            </select>

<input type="button" id="button1" value="Change Color"/>
<div id="slicerHost" style="height: 300px; width: 50%"></div>
</body>
</html>

You can quickly access information on a web page with a hyperlink. SpreadJS supports hyperlink cells. This allows you to click on a cell and go to a web site, use an email link, or load a basic web page.

A hyperlink cell contains text that functions as a single hyperlink.

You can set the color of the hyperlink and change the color after the link has been accessed. You can display text in the cell that is different from the hyperlink. You can also display a tooltip.

Clicking the link opens a new page and navigates to the link URL.

The hyperlink cell has the following methods:

The HyperLinkTargetType enumeration has the following options:

The following code creates a hyperlink cell.

var cellType = new GcSpread.Sheets.HyperLinkCellType();
cellType.linkColor("blue");
cellType.visitedLinkColor("#FF2235");
cellType.text("GrapeCity");
cellType.linkToolTip("Company Web Site");
activeSheet.getCell(1, 1).cellType(cellType).value("http://spread.grapecity.com/");
activeSheet.getRow(1).height(30);

This example creates a hyperlink cell with a link to a page.

var cellType = new GcSpread.Sheets.HyperLinkCellType();
cellType.linkColor("blue");
cellType.visitedLinkColor("#FF2235");
cellType.text("GrapeCity");
cellType.linkToolTip("Company Web Site");
//this page is in the same location as the main page
activeSheet.getCell(0, 2).cellType(cellType).value("formula.html");

This example creates a hyperlink cell with an email link.

var cellType = new GcSpread.Sheets.HyperLinkCellType();
cellType.linkColor("blue");
cellType.visitedLinkColor("#FF2235");
cellType.text("GrapeCity");
cellType.linkToolTip("Company Web Site");
//this sets the address for an email message
activeSheet.getCell(0, 2).cellType(cellType).value("mailto: example@example.com");

You can use a button cell instead of a hyperlink cell if you want to change sheets by selecting a cell. For example:

var cellType = new GcSpread.Sheets.ButtonCellType();
            cellType.text("Sheet 2");
            activeSheet.getCell(0, 0).cellType(cellType);

            spread.bind(GcSpread.Sheets.Events.ButtonClicked, function (e, args) {
                var sheet = args.sheet, row = args.row, col = args.col;
                var cellType = activeSheet.getCellType(row, col);
                if (cellType instanceof GcSpread.Sheets.ButtonCellType) {
                    spread.setActiveSheet("Sheet2");
                }
            });

Some types of spreadsheets, such as ledgers, have different appearances for alternating rows. This makes it easier to see the data. Spread for Windows Forms allows you to set different appearances for multiple alternating rows.

You can set up the alternating rows using an index for the alternating row appearance. The default row appearance is the first alternating row style (or style zero, since the index is zero-based). Set other alternating row appearances to subsequent indexes.

Use the AlternatingRow class to create alternating row styles. The AlternatingRow class has the following properties and methods.

This example code creates a sheet that has three different appearance settings for rows. This pattern repeats for all subsequent rows.

Alternating Rows

The data in this file is from – https://www.ncdc.noaa.gov/cdo-web/datasets.

C#

fpSpread1.Sheets[0].LoadTextFile("C:\\ANNUAL_sample_csv.csv", FarPoint.Win.Spread.TextFileFlags.None, 
FarPoint.Win.Spread.Model.IncludeHeaders.None, "\n", ",", "");
fpSpread1.Sheets[0].AlternatingRows.Count = 3;
fpSpread1.Sheets[0].AlternatingRows[0].BackColor = Color.Bisque;
fpSpread1.Sheets[0].AlternatingRows[0].ForeColor = Color.Navy;
fpSpread1.Sheets[0].AlternatingRows[1].BackColor = Color.LightYellow;
fpSpread1.Sheets[0].AlternatingRows[1].ForeColor = Color.Navy;
fpSpread1.Sheets[0].AlternatingRows[2].BackColor = Color.PaleGoldenrod;
fpSpread1.Sheets[0].AlternatingRows[2].ForeColor = Color.Navy;
fpSpread1.Font = new System.Drawing.Font("Calibri", 11);

VB

FpSpread1.Sheets(0).LoadTextFile("C:\ANNUAL_sample_csv.csv", FarPoint.Win.Spread.TextFileFlags.None, 
FarPoint.Win.Spread.Model.IncludeHeaders.None, Chr(10), ",", "")
FpSpread1.Sheets(0).AlternatingRows.Count = 3
FpSpread1.Sheets(0).AlternatingRows(0).BackColor = Color.Bisque
FpSpread1.Sheets(0).AlternatingRows(0).ForeColor = Color.Navy
FpSpread1.Sheets(0).AlternatingRows(1).BackColor = Color.LightYellow
FpSpread1.Sheets(0).AlternatingRows(1).ForeColor = Color.Navy
FpSpread1.Sheets(0).AlternatingRows(2).BackColor = Color.PaleGoldenrod
FpSpread1.Sheets(0).AlternatingRows(2).ForeColor = Color.Navy
FpSpread1.Font = New System.Drawing.Font("Calibri", 11)

You can set alternating rows in the designer with the AlternatingRow editor under the Settings tab in the designer.

Spread Designer

You can use the SetDirectInfo method to set other style properties for a cell, column, or row directly. Cell, column, and row styles have precedence over alternating row styles.

“Direct” in the style model means “not composite” or “not inherited.” The SetDirectAltRowInfo method sets the alternating style properties. The alternating style is used by the viewport controls for merging alternating row styles with the composite style for a cell immediately prior to rendering. The index is zero-based and must be between 0 and (AltRowCount-1).

This example uses the SetDirectAltRowInfo method to set the specified alternating row style in the model.

C#

FarPoint.Win.Spread.Model.DefaultSheetStyleModel defstyleModel = new FarPoint.Win.Spread.Model.DefaultSheetStyleModel();
FarPoint.Win.Spread.StyleInfo sInfo = new FarPoint.Win.Spread.StyleInfo();
FarPoint.Win.Spread.StyleInfo composite = new FarPoint.Win.Spread.StyleInfo();
defstyleModel = (FarPoint.Win.Spread.Model.DefaultSheetStyleModel)fpSpread1.ActiveSheet.Models.Style;
sInfo.BackColor = Color.LightBlue;
defstyleModel.SetDirectAltRowInfo(0, sInfo);
composite = defstyleModel.GetDirectAltRowInfo(0, sInfo);
listBox1.Items.Add(composite.BackColor.ToString());

VB

Dim defstyleModel As New FarPoint.Win.Spread.Model.DefaultSheetStyleModel()
Dim sInfo As New FarPoint.Win.Spread.StyleInfo()
Dim composite As New FarPoint.Win.Spread.StyleInfo()
defstyleModel = FpSpread1.ActiveSheet.Models.Style
sInfo.BackColor = Color.LightBlue
defstyleModel.SetDirectAltRowInfo(0, sInfo)
composite = defstyleModel.GetDirectAltRowInfo(0, sInfo)
ListBox1.Items.Add(composite.BackColor.ToString())

The Spread for Windows Forms spreadsheet control can be combined with other components, such as a Ribbon control in order to provide design functionality and other control to the user. In this example, you will learn how to add a Ribbon control to a project and connect it to a Spread component in a Windows Forms application.

If you want to follow along, make sure to download the CodePlex open-source ribbon library from here: CodePlex Ribbon

In addition, the DLL for this particular Spread Ribbon Control can be found here: Spread Ribbon Control

Set Up the Project

Create a new C# Windows Forms application in Visual Studio 2015. Once you have done so, click and drag the FpSpread component from the Toolbox onto a form in your application:

The form with a Spread instance on it.

When you click on the FpSpread component in your form, switch the “Dock” property to “Bottom”:

The docking option in the properties window.

Next, add the reference for the open source Ribbon to the project by right-clicking References in the Solution Explorer and clicking Add Reference…. Browse to the path where you downloaded the CodePlex Ribbon and choose the “System.Windows.Forms.Ribbon35.dll” file.

The References for the Project in the Solution Explorer

Once the correct references are added and the FpSpread component is on the form, you are now ready to add the Ribbon control.

Adding the Spread Ribbon Control

In order to easily add the Ribbon control, it has to be added to the Toolbox in Visual Studio. With the Toolbox open, right click the open space below the items and click Choose Items… Once the Choose Toolbox Items window is open, click Browse…

The Choose Toolbox Items window.

Navigate to the path where you saved the SpreadRibbonControlLibrary.zip file. Make sure to extract it first, and then choose the SpreadRibbonControlLibrary.dll file. Once you are brought back to the Choose Toolbox Items window, click OK to add it to the Toolbox. The new control should now show as SpreadRibbon in the Toolbox. To add it to the form, simply click and drag it from the Toolbox to the form.

The form with the added Spread Ribbon Control.

Ribbon Layout and Spread Connection

Once the Spread Ribbon Control has been added to the form, it can be connected to a Spread component on that form (Note: the Ribbon can only be connected to one instance of the Spread component at a time). There are Smart Tags to make this process easy, which include specifying the Spread instance and docking it in the form. To open the Smart Tags for the control, select the instance of the Ribbon Control in the form and click on the arrow at the top right of the control:

The Smart Tags for the Spread Ribbon Control.

To connect the ribbon to the FpSpread control, click the Spread Instance drop-down and select the name of the FpSpread control. To dock the control to the top of the form, click on Dock in parent container. Save the changes, and then Build and Run the project. If done correctly, the form should open up with the Spread control as well as the Ribbon control. You should be able to make changes to the FpSpread component from the ribbon toolbar, and see the properties of the cells reflected in the Ribbon.

The completed form.

Sparklines are small charts that you can use to provide visual representation of your data. Sparklines use data from a range of cells. SpreadJS supports sparklines in cells.

SpreadJS provides two different ways to create sparklines. You can use methods or formulas.

You can create column, line, or winloss sparklines with the setSparkline method.

You can display colors for the marker points. You can set colors for the high, low, negative, first, and last points. Use the SparklineSetting class to specify colors and other options. The data for the column, line, or winloss sparkline is limited to one column or row of values.

You can create the following sparkline types using formulas and cell data:

• Area
• Pie
• Scatter
• Bullet
• Spread
• Stacked
• Hbar
• Vbar
• Box plot
• Vari
• Cascade
• Pareto

The sparklines you create with formulas also have options to set colors and other options in the formula. Sparklines created using formulas are not exported to an Excel file.

You can create a custom sparkline in SpreadJS with the createFunction method from the SparklineEx class.

Sparklines have horizontal and vertical axes.

Sparklines are stored as groups. A group contains at least one sparkline. You can group and ungroup sparklines.

This example creates a column sparkline. This example uses ANNUAL_sample_csv.csv from https://www.ncdc.noaa.gov/cdo-web/datasets. The data in this example was copied and pasted from the designer.

Column Sparkline

JavaScript

activeSheet.setFormula(15, 6, '=COLUMNSPARKLINE(G2:G13,0)');


This example creates an area sparkline.

Area Sparkline

JavaScript

var datasource1 = [
{ Name: "Apple", Category: "Fruit", Total: 11 },
{ Name: "Orange", Category: "Fruit", Total: 10 },
{ Name: "Broccoli", Category: "Vegetable", Total: 5 },
{ Name: "Kiwi", Category: "Fruit", Total: 4 },
{ Name: "Rice", Category: "Cereal", Total: 15 },
{ Name: "Strawberry", Category: "Fruit", Total: 12 },
{ Name: "Yogurt", Category: "Dairy", Total: 20 },
{ Name: "Plum", Category: "Fruit", Total: 3 },
{ Name: "Celery", Category: "Vegetable", Total: 6 },
{ Name: "Grape", Category: "Fruit", Total: 18 },
{ Name: "Oats", Category: "Cereal", Total: 14 },
{ Name: "Quinoa", Category: "Cereal", Total: 2 },
{ Name: "Maize", Category: "Cereal", Total: 7 },
{ Name: "Okra", Category: "Vegetable", Total: 8 },
{ Name: "Corn", Category: "Vegetable", Total: 25 },
{ Name: "Wheat", Category: "Cereal", Total: 30 },
{ Name: "Barley", Category: "Cereal", Total: 4 },
{ Name: "Cream", Category: "Dairy", Total: 13 },
{ Name: "Millet", Category: "Cereal", Total: 5 },
{ Name: "Rye", Category: "Cereal", Total: 7 },
{ Name: "Artichoke", Category: "Vegetable", Total: 5 },
{ Name: "Buckwheat", Category: "Cereal", Total: 3 },
{ Name: "Gooseberry", Category: "Fruit", Total: 10 },
{ Name: "Amaranth", Category: "Cereal", Total: 6 },
{ Name: "Carrot", Category: "Vegetable", Total: 16 },
{ Name: "Cheese", Category: "Dairy", Total: 30 },
{ Name: "Fig", Category: "Fruit", Total: 5 },
{ Name: "Milk", Category: "Dairy", Total: 20 },
{ Name: "Butter", Category: "Dairy", Total: 25 },
               ];
activeSheet.setDataSource(datasource1);
var row = activeSheet.getRowCount();
//Add rows after the last row
activeSheet.addRows(row, 1);
activeSheet.getRow(29).height(50);

activeSheet.setFormula(29, 2, '=AREASPARKLINE(C1:C29,-15,50,5,-5,"red","green")');
activeSheet.setColumnWidth(2, 200,GcSpread.Sheets.SheetArea.viewport);


This example creates a custom sparkline.

Custom Sparkline

JavaScript

function Clock() {
                GcSpread.Sheets.SparklineEx.call(this);
            }
            Clock.prototype = new GcSpread.Sheets.SparklineEx();
            Clock.prototype.createFunction = function () {
                var func = new GcSpread.Sheets.Calc.Functions.Function("CLOCK", 1, 1);
                func.evaluate = function (args) {
                    return args[0];
                };
                return func;
            };
            Clock.prototype._drawCircle = function (context, centerX, centerY, radius) {
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
                context.stroke();
            };
            Clock.prototype._drawCenter = function (context, centerX, centerY, radius) {
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
                context.fill();
            };
            Clock.prototype._drawHand = function (context, centerX, centerY, loc, radius) {
                var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;
                context.beginPath();
                context.moveTo(centerX, centerY);
                context.lineTo(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius);
                context.stroke();
            };
            Clock.prototype._drawHands = function (context, value, centerX, centerY, radius) {
                var date = value, hour = date.getHours();
                hour = hour > 12 ? hour - 12 : hour;
                this._drawHand(context, centerX, centerY, hour * 5 + (date.getMinutes() / 60) * 5, radius / 2);
                this._drawHand(context, centerX, centerY, date.getMinutes(), radius * 3 / 4);
                context.strokeStyle = "red";
                this._drawHand(context, centerX, centerY, date.getSeconds(), radius * 3 / 4);

            };
            Clock.prototype._drawNumerals = function (context, centerX, centerY, radius) {
                var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    angle,
                    numeralWidth;
                if (radius > 0) {
                    numerals.forEach(function (numeral) {
                        angle = Math.PI / 6 * (numeral - 3);
                        numeralWidth = context.measureText(numeral).width;
                        context.beginPath();
                        context.fillText(numeral, centerX + Math.cos(angle) * radius + numeralWidth / 2, centerY + Math.sin(angle) * radius + numeralWidth / 2);
                    });
                }
            };
            Clock.prototype.paint = function (context, value, x, y, width, height) {
                if (!(value instanceof Date)) {
                    return;
                }
                var centerX = x + width / 2,
                    centerY = y + height / 2,
                    margin = 10,
                    padding = 10,
                    radius = Math.min(width, height) / 2 - margin;
                if (radius <= 0) {
                    return;
                }
                context.save();

                //draw circle
                this._drawCircle(context, centerX, centerY, radius);
                //draw center
                this._drawCenter(context, centerX, centerY, 3);
                //draw hands
                this._drawHands(context, value, centerX, centerY, radius);
                //draw numerals
                this._drawNumerals(context, centerX, centerY, radius - padding);

                context.restore();
            };
            spread.addSparklineEx(new Clock());

            var sheet = spread.getActiveSheet();

            var style = new GcSpread.Sheets.Style();
            style.hAlign = GcSpread.Sheets.HorizontalAlign.center;
            style.vAlign = GcSpread.Sheets.VerticalAlign.center;
            sheet.setDefaultStyle(style);
            sheet.getCell(0, 1).value("Universal Time").font("20px Arial");
            sheet.setValue(1, 0, "Beijing");
            sheet.setValue(1, 1, "Tokyo");
            sheet.setValue(1, 2, "New York");
            sheet.setFormula(2, 0, '=CLOCK(A4)');
            sheet.setFormula(2, 1, '=CLOCK(B4)');
            sheet.setFormula(2, 2, '=CLOCK(C4)');
            sheet.getRow(3).formatter("hh:mm:ss tt");
            sheet.setRowHeight(0, 50);
            sheet.setRowHeight(2, 200);
            sheet.setColumnWidth(0, 200);
            sheet.setColumnWidth(1, 200);
            sheet.setColumnWidth(2, 200);
            function updateTime() {
                var now = new Date();
                var utcNow = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(), now.getUTCMilliseconds());
                sheet.setValue(3, 0, new Date(utcNow.setHours(utcNow.getHours() + 8)));//+8
                sheet.setValue(3, 1, new Date(utcNow.setHours(utcNow.getHours() + 1)));//+9
                sheet.setValue(3, 2, new Date(utcNow.setHours(utcNow.getHours() - 14)));//-5
            }
            setInterval(updateTime, 1000);
            updateTime();

Spread for Windows Forms can display relational data, such as from a relational database, in hierarchical views.

The following image displays a typical hierarchical view with expanded child sheets.

Hierarchy

The top-level hierarchical view is displayed in a parent sheet. Child records are displayed in separate, child sheets. This can make navigating with keyboard keys from one sheet to another difficult.

You can write code that allows you to navigate through the rows in the parent and child sheets.

The sample project included at the end of this blog allows you to use up or down arrow keys to navigate through the parent and child rows.

The following code from the sample creates custom action maps that move to the previous row (up arrow) or to the next row (down arrow).

fpSpread1.GetActionMap().Put("HierarchyMoveToPreviousRow", new HierarchyMoveToPreviousRowAction());
fpSpread1.GetActionMap().Put("HierarchyMoveToNextRow", new HierarchyMoveToNextRowAction());
InputMap inputMap = fpSpread1.GetInputMap(InputMapMode.WhenFocused);
inputMap.Put(new Keystroke(Keys.Up, Keys.None), "HierarchyMoveToPreviousRow");
inputMap.Put(new Keystroke(Keys.Down, Keys.None), "HierarchyMoveToNextRow");

This code from the example binds Spread to a datasource using a CreateDataSource function.

fpSpread1.DataSource = CreateDataSource();

This code from the example uses a function to expand all the child sheets so that navigation works properly.

ExpandChildrenRecursive(fpSpread1_Sheet1);

The input maps are set for the parent sheet and all the child sheets in this section of code.

SpreadView root = fpSpread1.GetRootWorkbook();
      foreach (SpreadView child in root.GetChildWorkbooks())
        SetInputMapRecursive(inputMap, root, child);

You can get the complete Visual Studio 2015 C# or VB sample project from this location:

C# SpreadCustomActionsSample VB SpreadCustomActionsSampleVB

Data binding is a useful feature that enables the user to work with data without needing complex code. In SpreadJS, the workbook can be bound to data and then displayed on a web page to give the user access to that data.

To download the sample used in this blog, click here: SpreadJS Data Binding

Set Up the Project

Create a new empty ASP.NET Web project, and add a new html file in Visual Studio 2015. In this file, add references to the SpreadJS script and css files:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SpreadJS Data Binding</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>
</head>
<body>
</body>
</html>

Once this is done, add a script to the page that initializes the SpreadJS component as well as a div element to contain it:

<script>
    window.onload = function() {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("spreadSheet"), { sheetCount: 1 });
        var activeSheet = spread.getActiveSheet();
    }
</script>
</head>
<body>
    <div id="spreadSheet" style="width: 100%; height: 550px; border: 1px solid gray"></div>
</body>

Load Data

SpreadJS can load data contained in a JSON file so that the user can manipulate it. In this example, the Spreadsheet is using a JSON file called ClassicCars.json, which contains data about different types of classic cars. To load this JSON into SpreadJS, first create a script function that will load the JSON from a file using an XLMHttpRequest:

function loadJSON(file, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', file, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

Now implement that function, passing in the name of the file and a function for the callback parameter:

loadJSON("ClassicCars.json", function (response) {
});

Inside of that callback function, create a variable to hold the JSON data, and column information variables for each column in that data source:

var actual_JSON = JSON.parse(response);
var nameColInfo = { name: "Name", displayName: "Name", size: "150" };
var mpgColInfo = { name: "Miles_per_Gallon", displayName: "Miles/Gallon", size: "110" };
var cylindersColInfo = { name: "Cylinders", displayName: "Cylinders", size: "100" };
var displacementColInfo = { name: "Displacement", displayName: "Displacement (CI)", size: "140" };
var horsepowerColInfo = { name: "Horsepower", displayName: "Horsepower", size: "120" };
var weightColInfo = { name: "Weight_in_lbs", displayName: "Weight (lbs)", size: "110" };
var accelerationColInfo = { name: "Acceleration", displayName: "Acceleration (sec.)", size: "140" };
var yearColInfo = { name: "Year", displayName: "Year", size: "80" };
var originColInfo = { name: "Origin", displayName: "Origin", size: "80" };
var imageColInfo = { name: "Image", displayName: "Car Image", size: "330" };

Then, set the data source of the SpreadJS instance to the JSON variable, and bind the columns to the column information variables that were created:

activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(actual_JSON["Classic Cars"]);
activeSheet.setRowHeaderVisible(false);
activeSheet.bindColumn(0, nameColInfo);
activeSheet.bindColumn(1, mpgColInfo);
activeSheet.bindColumn(2, accelerationColInfo);
activeSheet.bindColumn(3, cylindersColInfo);
activeSheet.bindColumn(4, displacementColInfo);
activeSheet.bindColumn(5, horsepowerColInfo);
activeSheet.bindColumn(6, weightColInfo);
activeSheet.bindColumn(7, yearColInfo);
activeSheet.bindColumn(8, originColInfo);
activeSheet.bindColumn(9, imageColInfo);

This code successfully binds the data in the JSON file to the SpreadJS instance, and ensures that the columns in SpreadJS match up with the columns in the data source:

The data-bound sheet without formatting.

Format SpreadJS

Now that the data is in SpreadJS, the formatting can be changed to make the data look nicer. Create a new function to format the SpreadJS instance, and inside that function, add code to set the font, spacing, alignment, and borders for each row. In addition, set the background image of the cells in the ninth row from the URL provided in those cells:

function formatSpread() {
    for (var i = 0; i < activeSheet.getRowCount() ; i++) {
        activeSheet.getColumn(0).wordWrap(true);
        activeSheet.getRow(i).font("12pt arial");
        activeSheet.setRowHeight(i, 210);
        activeSheet.getRow(i).borderBottom(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thick));
        if (activeSheet.getValue(i, 9) != null) {
            var carImage = activeSheet.getValue(i, 9);
            activeSheet.setValue(i, 9, null);
            activeSheet.getCell(i, 9).backgroundImage(carImage);
        }
        activeSheet.getRow(i).vAlign(GcSpread.Sheets.VerticalAlign.center);
        activeSheet.getRow(i).hAlign(GcSpread.Sheets.HorizontalAlign.center);
    }
}

Next, add row filters for each row to allow the user to filter and sort on each column:

var cellRange = new GcSpread.Sheets.Range(0, 0, activeSheet.getRowCount(), 10);
var hideRowFilter = new GcSpread.Sheets.HideRowFilter(cellRange);
activeSheet.rowFilter(hideRowFilter);

After that, add multiple column headers to help layout the data, and add a column range group to allow the user to minimize certain columns:

activeSheet.setRowCount(2, GcSpread.Sheets.SheetArea.colHeader);

activeSheet.getColumn(0).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));
activeSheet.setRowHeight(0, 30, GcSpread.Sheets.SheetArea.colHeader);
activeSheet.addSpan(0, 1, 1, 2, GcSpread.Sheets.SheetArea.colHeader);
activeSheet.getCell(0, 1, GcSpread.Sheets.SheetArea.colHeader).value("Fuel Economy & Acceleration");
activeSheet.colRangeGroup.group(1, 2);
activeSheet.getColumn(2).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

activeSheet.addSpan(0, 3, 1, 3, GcSpread.Sheets.SheetArea.colHeader);
activeSheet.getCell(0, 3, GcSpread.Sheets.SheetArea.colHeader).value("Engine Details");
activeSheet.addSpan(0, 6, 1, 4, GcSpread.Sheets.SheetArea.colHeader);
activeSheet.getCell(0, 6, GcSpread.Sheets.SheetArea.colHeader).value("Car Details");
activeSheet.getColumn(5).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

activeSheet.setRowHeight(1, 30, GcSpread.Sheets.SheetArea.colHeader);

var headerStyle = new GcSpread.Sheets.Style();
headerStyle.backColor = "Green";
headerStyle.foreColor = "White";
headerStyle.hAlign = GcSpread.Sheets.HorizontalAlign.center;
headerStyle.vAlign = GcSpread.Sheets.VerticalAlign.center;

for (var i = 0; i < activeSheet.getColumnCount() ; i++) {
    activeSheet.setStyle(0, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
    activeSheet.setStyle(1, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
}

That code completes the formatting function implementation. Add a call to that function from within the callback function for loading the JSON, to ensure the SpreadJS instance gets formatted once the data is loaded:

//...
activeSheet.bindColumn(9, imageColInfo);

formatSpread();

spread.isPaintSuspended(false);

Once that is done, the SpreadJS instance will be formatted to layout the data in a user-friendly manner. This tutorial showed how to bind data to SpreadJS, as well as how to format that data to provide additional functionality to the user.

The data-bound sheet with formatting.

An important part of a Spreadsheet is adding data. Spread for Windows Forms has many ways to add data. You can load files, bind to data sources, or use methods and properties to add data to cells.

The following table lists the different ways you can load files:

You can use the DataSource property to bind Spread. You can bind the Spread component to a data set, such as data in a database, or to anything that the .NET framework allows, such as an IList object.

You can bind to a cell range with the MapperInfo class, the SpreadDataBindingAdapter class, and the FillSpreadDataByDataSource method.

This example binds the control to a data set.

Data Set

C#

DataSet ds = new DataSet();
DataTable emp = new DataTable("Product");
DataTable div = new DataTable("Total Cost");
emp.Columns.Add("Name");
emp.Columns.Add("Category");
emp.Rows.Add(new Object[] { "Apple", "Fruit" });
emp.Rows.Add(new Object[] { "Orange", "Fruit" });
emp.Rows.Add(new Object[] { "Plum", "Fruit" });
emp.Rows.Add(new Object[] { "Kiwi", "Fruit" });
emp.Rows.Add(new Object[] { "Strawberry", "Fruit" });
emp.Rows.Add(new Object[] { "Broccoli", "Vegetable" });
emp.Rows.Add(new Object[] { "Celery", "Vegetable" });
emp.Rows.Add(new Object[] { "Artichoke", "Vegetable" });
emp.Rows.Add(new Object[] { "Okra", "Vegetable" });
div.Columns.Add("Price");
div.Columns.Add("Quantity");
div.Rows.Add(new Object[] { "1.99 per pound", "100" });
div.Rows.Add(new Object[] { "2.00 per pound", "50" });
div.Rows.Add(new Object[] { "1.75 per pound", "150" });
div.Rows.Add(new Object[] { "2.50 per pound", "80" });
div.Rows.Add(new Object[] { "1.75 per pound", "150" });
div.Rows.Add(new Object[] { "2.50 per pound", "100" });
div.Rows.Add(new Object[] { "1.00 per pound", "250" });
div.Rows.Add(new Object[] { "4.75 per pound", "50" });
div.Rows.Add(new Object[] { "1.00 per pound", "150" });
ds.Tables.AddRange(new DataTable[] { emp, div });
fpSpread1.DataSource = ds;
fpSpread1.DataMember = "Product";

VB

Dim ds As New DataSet()
Dim emp As New DataTable("Product")
Dim div As New DataTable("Total Cost")
emp.Columns.Add("Name")
emp.Columns.Add("Category")
emp.Rows.Add(New Object() {"Apple", "Fruit"})
emp.Rows.Add(New Object() {"Orange", "Fruit"})
emp.Rows.Add(New Object() {"Plum", "Fruit"})
emp.Rows.Add(New Object() {"Kiwi", "Fruit"})
emp.Rows.Add(New Object() {"Strawberry", "Fruit"})
emp.Rows.Add(New Object() {"Broccoli", "Vegetable"})
emp.Rows.Add(New Object() {"Celery", "Vegetable"})
emp.Rows.Add(New Object() {"Artichoke", "Vegetable"})
emp.Rows.Add(New Object() {"Okra", "Vegetable"})
div.Columns.Add("Price")
div.Columns.Add("Quantity")
div.Rows.Add(New Object() {"1.99 per pound", "100"})
div.Rows.Add(New Object() {"2.00 per pound", "50"})
div.Rows.Add(New Object() {"1.75 per pound", "150"})
div.Rows.Add(New Object() {"2.50 per pound", "80"})
div.Rows.Add(New Object() {"1.75 per pound", "150"})
div.Rows.Add(New Object() {"2.50 per pound", "100"})
div.Rows.Add(New Object() {"1.00 per pound", "250"})
div.Rows.Add(New Object() {"4.75 per pound", "50"})
div.Rows.Add(New Object() {"1.00 per pound", "150"})
ds.Tables.AddRange(New DataTable() {emp, div})
FpSpread1.DataSource = ds
FpSpread1.DataMember = "Product"

You can place data in cells as formatted or unformatted strings or as data objects. The following table summarizes the ways you can add data using methods at the sheet level:

When you work with formatted data, the data is parsed by the cell type formatted for that cell and placed in the data model. When you work with unformatted data, the data goes directly into the data model. If you add data to the sheet that is placed directly into the data model, you might want to parse the data because the component does not do so.

This example uses the SetArray method.

C#

fpSpread1.ActiveSheet.SetArray(1, 0, new String[,] { { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" } });

VB

FpSpread1.ActiveSheet.SetArray(1, 0, New String(,) {{"Monday", "Tuesday", "Wednesday", "Thursday", "Friday"}})

This example uses the SetClip method.

C#

fpSpread1.ActiveSheet.SetClip(0, 0, 3, 4, "January\tFebruary\tMarch\tApril\r\nMay\tJune\tJuly\tAugust\r\nSeptember\tOctober\tNovember\tDecember");

VB

FpSpread1.ActiveSheet.SetClip(0, 0, 3, 4, "January" + Chr(9) + "February" + Chr(9) + "March" + Chr(9) + "April" + vbCrLf + "May" + Chr(9) +
 "June" + Chr(9) + "July" + Chr(9) + "August" + vbCrLf + "September" + Chr(9) + "October" + Chr(9) + "November" + Chr(9) + December")

The following table lists the ways you can get or set data in cells using properties of the cell:

Knockout is a JavaScript library that helps you create responsive displays, as well as user interfaces that have an underlying data model. SpreadJS can work with Knockout to make binding to data easier to understand. This blog is a part of the SpreadJS Data Binding series, which centers on binding the same data to SpreadJS using different JavaScript libraries.

To download Knockout, go here: KnockoutJS

To download the sample used in this blog, click here: SpreadJS Knockout Data Binding

To read more about using SpreadJS with Knockout, click here: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#knockout.html

Set Up the Project

Create a new empty ASP.NET Web project, and add a new html file in Visual Studio 2015. In this file, add references to the SpreadJS script and css files, as well as the Knockout and jQuery script files:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SpreadJS Data Binding Knockout</title>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

    <script type='text/javascript' src='Scripts/knockout-3.4.0.js'></script>
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>
</head>
<body>
</body>
</html>

Once this is done, add a script to the page to contain the knockout code as well as a div element that represents the Spread component:

<script>
    window.onload = function() {
    }
</script>
</head>
<body>
    <div id="spreadSheet" style="width: 100%; height: 550px; border: 1px solid gray"></div>
</body>

Load Data

Before adding code to load the JSON file, add a data-bind element to the spreadSheet DIV element in order to use Knockout:

    <div id="spreadSheet" data-bind="gcspread-sheets: {
                sheetCount: 1,
                sheets: [
                    {
                        data: items,
                        columns: [
                            { displayName: 'Name', name: 'Name', size: 150},
                            { displayName: 'Miles/Gallon', name: 'Miles_per_Gallon', size: 110},
                            { displayName: 'Cylinders', name: 'Cylinders', size: 100},
                            { displayName: 'Displacement (CI)', name: 'Displacement', size: 140},
                            { displayName: 'Horsepower', name: 'Horsepower', size: 120},
                            { displayName: 'Weight (lbs)', name: 'Weight_in_lbs', size: 110},
                            { displayName: 'Acceleration (sec.)', name: 'Acceleration', size: 140},
                            { displayName: 'Year', name: 'Year', size: 80},
                            { displayName: 'Origin', name: 'Origin', size: 80},
                            { displayName: 'Car Image', name: 'Image', size: 330}
                        ]
                    }
                ]
            }" style="width: 100%; height: 550px; border: 1px solid gray"></div>

Next, define a JavaScript function that loads a JSON file via a XMLHttpRequest:

function loadJSON(file, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', file, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

After that, call that function and create a new function to pass in as the callback. In this callback function, define the ViewModel function and initialize it with the data from the JSON file. Then apply that binding to Knockout:

loadJSON("ClassicCars.json", function (response) {

    // Define the ViewModel
    var ViewModel = function (items) {
        this.items = ko.observableArray(items);
    };

    var actual_JSON = JSON.parse(response);
    var initialData = actual_JSON["Classic Cars"];
    var viewModel = new ViewModel(initialData);

    //Apply binding
    $(function () {
        ko.applyBindings(viewModel);
    });                
});

The data-bound sheet without formatting.

Format SpreadJS

In this same callback function, define the function that formats the SpreadJS component, and apply that formatting to it:

// Get the spread control
var spread = GcSpread.Sheets.findControl(document.getElementById("spreadSheet"));
var activeSheet = spread.getActiveSheet();

spread.isPaintSuspended(true);

// Format the Spread component
activeSheet.setRowHeaderVisible(false);
formatSpread();

spread.isPaintSuspended(false);

function formatSpread() {
    for (var i = 0; i < activeSheet.getRowCount() ; i++) {
        activeSheet.getColumn(0).wordWrap(true);
        activeSheet.getRow(i).font("12pt arial");
        activeSheet.setRowHeight(i, 210);
        activeSheet.getRow(i).borderBottom(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thick));
        if (activeSheet.getValue(i, 9) != null) {
            var carImage = activeSheet.getValue(i, 9);
            activeSheet.setValue(i, 9, null);
            activeSheet.getCell(i, 9).backgroundImage(carImage);
        }
        activeSheet.getRow(i).vAlign(GcSpread.Sheets.VerticalAlign.center);
        activeSheet.getRow(i).hAlign(GcSpread.Sheets.HorizontalAlign.center);
    }

    var cellRange = new GcSpread.Sheets.Range(0, 0, activeSheet.getRowCount(), 10);
    var hideRowFilter = new GcSpread.Sheets.HideRowFilter(cellRange);
    activeSheet.rowFilter(hideRowFilter);

    activeSheet.setRowCount(2, GcSpread.Sheets.SheetArea.colHeader);

    activeSheet.getColumn(0).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));
    activeSheet.setRowHeight(0, 30, GcSpread.Sheets.SheetArea.colHeader);
    activeSheet.addSpan(0, 1, 1, 2, GcSpread.Sheets.SheetArea.colHeader);
    activeSheet.getCell(0, 1, GcSpread.Sheets.SheetArea.colHeader).value("Fuel Economy & Acceleration");
    activeSheet.colRangeGroup.group(1, 2);
    activeSheet.getColumn(2).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

    activeSheet.addSpan(0, 3, 1, 3, GcSpread.Sheets.SheetArea.colHeader);
    activeSheet.getCell(0, 3, GcSpread.Sheets.SheetArea.colHeader).value("Engine Details");
    activeSheet.addSpan(0, 6, 1, 4, GcSpread.Sheets.SheetArea.colHeader);
    activeSheet.getCell(0, 6, GcSpread.Sheets.SheetArea.colHeader).value("Car Details");
    activeSheet.getColumn(5).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

    activeSheet.setRowHeight(1, 30, GcSpread.Sheets.SheetArea.colHeader);

    var headerStyle = new GcSpread.Sheets.Style();
    headerStyle.backColor = "Green";
    headerStyle.foreColor = "White";
    headerStyle.hAlign = GcSpread.Sheets.HorizontalAlign.center;
    headerStyle.vAlign = GcSpread.Sheets.VerticalAlign.center;

    for (var i = 0; i < activeSheet.getColumnCount() ; i++) {
        activeSheet.setStyle(0, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
        activeSheet.setStyle(1, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
    }
}

If done correctly, the data from the JSON file should show up in the SpreadJS instance on the page, and the component should be formatted like the screenshot below:

The data-bound sheet with formatting.

In this tutorial, SpreadJS was combined with Knockout to implement data binding functionality through a ViewModel and Knockout bindings. The data was loaded from a JSON file, and the bindings allowed that data to be bound to different columns in the SpreadJS instance. The extensibility of Knockout means that binding SpreadJS to different data types becomes a stress-free task.

To learn more about SpreadJS and to download a trial, click here: http://spread.grapecity.com/Downloads/

PDF files are popular because they can be viewed in many different operating systems. You can save to PDF with SpreadJS.

There are several ways to create a PDF file with SpreadJS.

You can use the Excel Import and Export component to save to a PDF file using the following steps:

1. Create a Visual Studio project using these steps: http://sphelp.grapecity.com/2015/12/16/spreadjs-excel-import-and-export/. For more information, refer to: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#excelservice.html in the on-line help.
2. After you create the Visual Studio project, add a button named SavePDF and this additional code:

   private void SavePDF_Click(object sender, EventArgs e)
           {
               PdfExportSettings pdfs = new PdfExportSettings();
               pdfs.Title = "PDF Test";
               pdfs.DisplayDocTitle = true;
   
               saveFileDialog1.Filter = "PDF (*.pdf)|*.pdf";
               saveFileDialog1.FilterIndex = 1;
   
               DialogResult result = this.saveFileDialog1.ShowDialog();
   
               if (result == DialogResult.OK)
               {                
                   using (FileStream fs = File.Create(this.saveFileDialog1.FileName))
                   {                   
                       Exporter exporter = new Exporter(this.richTextBox1.Text);                    
                       exporter.SavePdf(fs, pdfs, 0);
                   }
               }
           }
   

3. Run the project, load a file using the import button, and then use the SavePDF button to save to a PDF file.

Another way to print to PDF is to use the browser print options with an installed PDF print driver.

Browser Print Option

You can also use the SpreadJS print method and select a PDF printer option. The following example uses the SpreadJS print method.

PDF File

var datasource = [
	{ Name: "Apple", Category: "Fruit" },
	{ Name: "Orange", Category: "Fruit" },
	{ Name: "Broccoli", Category: "Vegetable" },
	{ Name: "Kiwi", Category: "Fruit" },
	{ Name: "Rice", Category: "Cereal" },
	{ Name: "Strawberry", Category: "Fruit" },
	{ Name: "Yogurt", Category: "Dairy" },
	{ Name: "Plum", Category: "Fruit" },
	{ Name: "Celery", Category: "Vegetable" },
	{ Name: "Grape", Category: "Fruit" },
	{ Name: "Oats", Category: "Cereal" },
	{ Name: "Quinoa", Category: "Cereal" },
	{ Name: "Maize", Category: "Cereal" },
	{ Name: "Okra", Category: "Vegetable" },
	{ Name: "Corn", Category: "Vegetable" },
	{ Name: "Wheat", Category: "Cereal" },
	{ Name: "Barley", Category: "Cereal" },
	{ Name: "Cream", Category: "Dairy" },
	{ Name: "Millet", Category: "Cereal" },
	{ Name: "Rye", Category: "Cereal" },
	{ Name: "Artichoke", Category: "Vegetable" },
	{ Name: "Buckwheat", Category: "Cereal" },
	{ Name: "Gooseberry", Category: "Fruit" },
	{ Name: "Amaranth", Category: "Cereal" },
	{ Name: "Carrot", Category: "Vegetable" },
	{ Name: "Cheese", Category: "Dairy" },
	{ Name: "Fig", Category: "Fruit" },
	{ Name: "Milk", Category: "Dairy" },
	{ Name: "Butter", Category: "Dairy" },
               ];

              activeSheet.setDataSource(datasource); 

$("#button1").click(function () {
spread.print(0);
   });


Earlier versions of SpreadJS used an Excel service to import and export Excel files. This service also exported to PDF files. You can use the following help information to use the older Excel service, http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#excelioprevious.html.

The following example exports to PDF using the Excel Import and Export service.

var dataObj = {
    "spread": spread.toJSON(),
    "exportFileType": "pdf"
};
dataObj.pdf = {"setting":{}, "sheetIndexes":[0, 2]};
dataObj.pdf.setting.author = "Jone";
dataObj.pdf.setting.pageLayout = 2; // same as dataObj.pdf.setting.pageLayout = "OneColumn";
dataObj.pdf.setting.printPreset = {};
dataObj.pdf.setting.printPreset.duplexMode = "DuplexFlipShortEdge";
dataObj.pdf.setting.printPreset.printRanges = [{ "index": 1, "count": 1 }, { "index": 2, "count": 3 }];


You can also use the SpreadJS designer at design time to save to a PDF file.

SpreadJS Designer

Some applications allow you to view page breaks for printing. You can use code to add visual indicators for page breaks in Spread for Windows Forms.

There are several ways to add visible page breaks in Spread Windows Forms. You can add a border to the row or column, a backcolor to the header, or an image to the header.

This example adds visual indicators for the row page breaks.

Row Page Breaks

Use the following steps to create this example:

1. Create a form.
2. Add Spread and three buttons to the form.
3. Add a list box to the form.
4. Add the following code.

C#

private void Printing1_Load(object sender, EventArgs e)
        {
            fpSpread1.Open("C:\\Program Files (x86)\\GrapeCity\\Spread Studio 9\\Common\\CostOfGoodSold.xml");
        }

        private void button1_Click(object sender, EventArgs e)
        {
            int[] i;
            i = fpSpread1.GetRowPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                // Set a border for the row
                fpSpread1.Sheets[0].Cells[(int)o, 0, (int)o, fpSpread1.Sheets[0].Columns.Count - 1].Border = new FarPoint.Win.LineBorder(Color.Red, 2, false, true, false, false);
            }
        }

        private void button2_Click(object sender, EventArgs e)
        {
            int[] i;
            i = fpSpread1.GetRowPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                // Set the color for a header cell
                fpSpread1.Sheets[0].RowHeader.Cells[(int)o, 0].BackColor = Color.Red;
            }
        }

        private void button3_Click(object sender, EventArgs e)
        {
            FarPoint.Win.Spread.CellType.ImageCellType imagecell = new FarPoint.Win.Spread.CellType.ImageCellType();
            System.Drawing.Image image = System.Drawing.Image.FromFile("C:\\Program Files (x86)\\GrapeCity\\Spread Studio 9\\Common\\SD.ico");

            int[] i;
            i = fpSpread1.GetRowPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                // Add an image to the header cell
                fpSpread1.Sheets[0].RowHeader.Cells[(int)o, 0].CellType = imagecell;
                fpSpread1.Sheets[0].RowHeader.Cells[(int)o, 0].Value = image;
            }
        }

VB

Private Sub Printing1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        FpSpread1.Open("C:\Program Files (x86)\GrapeCity\Spread Studio 9\Common\CostOfGoodSold.xml")
    End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim i() As Integer        
        Dim o As Object
        i = FpSpread1.GetRowPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)         
            ‘ Set a border for the row   
            FpSpread1.Sheets(0).Cells(CInt(o), 0, CInt(o), FpSpread1.Sheets(0).Columns.Count - 1).Border = New FarPoint.Win.LineBorder(Color.Red, 2, False, True, False, False)
        Next
    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Dim i() As Integer        
        Dim o As Object
        i = FpSpread1.GetRowPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)
            ‘ Set a color for the header cell
            FpSpread1.Sheets(0).RowHeader.Cells(CInt(o), 0).BackColor = Color.Red
        Next
    End Sub

    Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        Dim imagecell As New FarPoint.Win.Spread.CellType.ImageCellType()
        Dim image As System.Drawing.Image
        image = System.Drawing.Image.FromFile("C:\Program Files (x86)\GrapeCity\Spread Studio 9\Common\SD.ico")

        Dim i() As Integer        
        Dim o As Object
        i = FpSpread1.GetRowPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)
            ‘ Add an image to the header cell
            FpSpread1.Sheets(0).RowHeader.Cells(CInt(o), 0).CellType = imagecell
            FpSpread1.Sheets(0).RowHeader.Cells(CInt(o), 0).Value = image
        Next
    End Sub

You can use the GetColumnPageBreaks method to get column page breaks.

Use the following steps to create an example that gets the column page breaks and sets a border, header color, or adds an image to the header:

1. Create a form.
2. Add Spread and three buttons to the form.
3. Add a list box to the form.
4. Add the following code.

C#

private void Printing1_Load(object sender, EventArgs e)
        {
            fpSpread1.Open("C:\\Program Files (x86)\\GrapeCity\\Spread Studio 9\\Common\\CostOfGoodSold.xml");   
        }       

        private void button1_Click(object sender, EventArgs e)
        {
            int[] i;
            i = fpSpread1.GetColumnPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                fpSpread1.Sheets[0].Cells[0, (int)o, fpSpread1.Sheets[0].Rows.Count - 1, (int)o].Border = new FarPoint.Win.LineBorder(Color.Red, 2, true, false, false, false);               
            }
        }

private void button2_Click(object sender, EventArgs e)
        {
            int[] i;
            i = fpSpread1.GetColumnPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                fpSpread1.Sheets[0].ColumnHeader.Cells[0, (int)o].BackColor = Color.Red;
            }
        }

private void button3_Click(object sender, EventArgs e)
        {
            FarPoint.Win.Spread.CellType.ImageCellType imagecell = new FarPoint.Win.Spread.CellType.ImageCellType();
            System.Drawing.Image image = System.Drawing.Image.FromFile("C:\\Program Files (x86)\\GrapeCity\\Spread Studio 9\\Common\\SD.ico");

            int[] i;
            i = fpSpread1.GetColumnPageBreaks(0);
            foreach (object o in i)
            {
                listBox1.Items.Add(o);
                fpSpread1.Sheets[0].ColumnHeader.Cells[0,(int)o].CellType = imagecell;
                fpSpread1.Sheets[0].ColumnHeader.Cells[0,(int)o].Value = image;
            }
        }

VB

Private Sub Printing1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        FpSpread1.Open("C:\Program Files (x86)\GrapeCity\Spread Studio 9\Common\CostOfGoodSold.xml")
End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim i() As Integer
        Dim o As Object
        i = FpSpread1.GetColumnPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)
            FpSpread1.Sheets(0).Cells(0, CInt(o), FpSpread1.Sheets(0).Rows.Count - 1, CInt(o)).Border = New FarPoint.Win.LineBorder(Color.Red, 2, True, False, False, False)
        Next
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Dim i() As Integer
        Dim o As Object
        i = FpSpread1.GetColumnPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)
            FpSpread1.Sheets(0).ColumnHeader.Cells(0, CInt(o)).BackColor = Color.Red
        Next
End Sub

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        Dim imagecell As New FarPoint.Win.Spread.CellType.ImageCellType()
        Dim image As System.Drawing.Image
        image = System.Drawing.Image.FromFile("C:\Program Files (x86)\GrapeCity\Spread Studio 9\Common\SD.ico")

        Dim i() As Integer
        Dim o As Object
        i = FpSpread1.GetColumnPageBreaks(0)
        For Each o In i
            ListBox1.Items.Add(o)
            FpSpread1.Sheets(0).ColumnHeader.Cells(0, CInt(o)).CellType = imagecell
            FpSpread1.Sheets(0).ColumnHeader.Cells(0, CInt(o)).Value = image
        Next
End Sub

AngularJS is a JavaScript library that is used for creating dynamic displays in web-applications. SpreadJS can work with Angular to make binding to data easier to understand by extending HTML. This blog is a part of the SpreadJS Data Binding series, which centers on binding the same data to SpreadJS using different JavaScript libraries.

To download Angular, go here: AngularJS

To download the sample used in this blog, click here: SpreadJSAngular

To read more about using SpreadJS with Angular, click here: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#angular.html

Set Up the Project

Create a new empty ASP.NET Web project, and add a new html file in Visual Studio 2015. In this file, add references to the SpreadJS script and css files, as well as the Angular and jQuery script files:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SpreadJS Data Binding Angular</title>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

    <script src="Scripts/angular.js" type="text/javascript"></script>
    <script src="Scripts/angular-route.js" type="text/javascript"></script>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>
</head>
<body>
</body>
</html>

In addition, add a reference to the Angular Spread JavaScript file in order to make SpreadJS work with Angular:

<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/angular.gcspread.sheets.9.40.20153.0.min.js"></script>

Once this is done, add a script to the page to contain the Angular code as well as an HTML element that represents the Spread component, setting up the columns that will be bound to data:

<head>
    <script>
         window.onload = function() {
	  }
    </script>
</head>
<body id="spreadController">
    <h1>Classic Cars 1970 - 1982</h1>
    <gcspread-sheets id="spreadSheet" style="width: 100%; height: 550px; border: 1px solid gray">
        <sheets>
            <sheet datasource="cars">
                <columns>
                    <column dataField="Name" headerText="Name" width="150"></column>
                    <column dataField="Miles_per_Gallon" headerText="Miles/Gallon" width="110"></column>
                    <column dataField="Cylinders" headerText="Cylinders" width="100"></column>
                    <column dataField="Displacement" headerText="Displacement (CI)" width="140"></column>
                    <column dataField="Horsepower" headerText="Horsepower" width="120"></column>
                    <column dataField="Weight_in_lbs" headerText="Weight (lbs)" width="110"></column>
                    <column dataField="Acceleration" headerText="Acceleration (sec.)" width="140"></column>
                    <column dataField="Year" headerText="Year" width="80"></column>
                    <column dataField="Origin" headerText="Origin" width="80"></column>
                    <column dataField="Image" headerText="Car Image" width="330"></column>
                </columns>
            </sheet>
        </sheets>
    </gcspread-sheets>
</body>

Load Data

Before adding code to load the JSON file, create a controller and a module for the Angular application:

<script>
        var initialData = null;
        
        var app = angular.module("spreadApp", ["gcspreadsheets", "ngRoute"]);
        app.controller("spreadCtrl", function ($scope, $http) {
});
</script>

Within that controller function, specify a function that will load the data from the JSON file into the “cars” variable for the application:

app.controller("spreadCtrl", function ($scope, $http) {            
    $scope.loadData = function () {
        $http.get('ClassicCars.json').success(function (data) {
            $scope.cars = data["Classic Cars"];
        });                
    };
});

Going back to the “gcspread-sheets” HTML element that contains the Spread instance on the page, add this controller and initialization function so that the Spread instance is populated with the data from the JSON file:

<body id="spreadController" ng-controller="spreadCtrl" ng-init="loadData()">
    <h1>Classic Cars 1970 - 1982</h1>
    <gcspread-sheets id="spreadSheet" style="width: 100%; height: 550px; border: 1px solid gray">
        <sheets>
            <sheet datasource="cars">
                <columns>
                    //…
                </columns>
            </sheet>
        </sheets>
    </gcspread-sheets>
</body>

The data-bound sheet without formatting.

Format SpreadJS

In the controller function for the Spread instance, define the function that formats the SpreadJS component, and apply that formatting to it:

app.controller("spreadCtrl", function ($scope, $http) {            
//…

    $scope.formatSpread = function () {
        // Only format the Spread after the data has been loaded
        $http.get('ClassicCars.json').success(function (data) {
                    // Get the spread control
                    var spread = GcSpread.Sheets.findControl(document.getElementById("spreadSheet"));
                    var activeSheet = spread.getActiveSheet();

                    spread.isPaintSuspended(true);

                    activeSheet.setRowHeaderVisible(false);
                    for (var i = 0; i < activeSheet.getRowCount() ; i++) {
                        activeSheet.getColumn(0).wordWrap(true);
                        activeSheet.getRow(i).font("12pt arial");
                        activeSheet.setRowHeight(i, 210);
                        activeSheet.getRow(i).borderBottom(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thick));
                        if (activeSheet.getValue(i, 9) != null) {
                            var carImage = activeSheet.getValue(i, 9);
                            activeSheet.setValue(i, 9, null);
                            activeSheet.getCell(i, 9).backgroundImage(carImage);
                        }
                        activeSheet.getRow(i).vAlign(GcSpread.Sheets.VerticalAlign.center);
                        activeSheet.getRow(i).hAlign(GcSpread.Sheets.HorizontalAlign.center);
                    }

                    var cellRange = new GcSpread.Sheets.Range(0, 0, activeSheet.getRowCount(), 10);
                    var hideRowFilter = new GcSpread.Sheets.HideRowFilter(cellRange);
                    activeSheet.rowFilter(hideRowFilter);

                    activeSheet.setRowCount(2, GcSpread.Sheets.SheetArea.colHeader);

                    activeSheet.getColumn(0).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));
                    activeSheet.setRowHeight(0, 30, GcSpread.Sheets.SheetArea.colHeader);
                    activeSheet.addSpan(0, 1, 1, 2, GcSpread.Sheets.SheetArea.colHeader);
                    activeSheet.getCell(0, 1, GcSpread.Sheets.SheetArea.colHeader).value("Fuel Economy & Acceleration");
                    activeSheet.colRangeGroup.group(1, 2);
                    activeSheet.getColumn(2).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

                    activeSheet.addSpan(0, 3, 1, 3, GcSpread.Sheets.SheetArea.colHeader);
                    activeSheet.getCell(0, 3, GcSpread.Sheets.SheetArea.colHeader).value("Engine Details");
                    activeSheet.addSpan(0, 6, 1, 4, GcSpread.Sheets.SheetArea.colHeader);
                    activeSheet.getCell(0, 6, GcSpread.Sheets.SheetArea.colHeader).value("Car Details");
                    activeSheet.getColumn(5).borderRight(new GcSpread.Sheets.LineBorder("Green", GcSpread.Sheets.LineStyle.thin));

                    activeSheet.setRowHeight(1, 30, GcSpread.Sheets.SheetArea.colHeader);

                    var headerStyle = new GcSpread.Sheets.Style();
                    headerStyle.backColor = "Green";
                    headerStyle.foreColor = "White";
                    headerStyle.hAlign = GcSpread.Sheets.HorizontalAlign.center;
                    headerStyle.vAlign = GcSpread.Sheets.VerticalAlign.center;

                    for (var i = 0; i < activeSheet.getColumnCount() ; i++) {
                        activeSheet.setStyle(0, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
                        activeSheet.setStyle(1, i, headerStyle, GcSpread.Sheets.SheetArea.colHeader);
                    }

                    spread.isPaintSuspended(false);
        });
    };
});

Once the formatting function has been defined, call it when the window is loaded:

window.onload = function () {
    angular.element(document.getElementById('spreadSheet')).scope().formatSpread();
}

If done correctly, the data from the JSON file should show up in the SpreadJS instance on the page, and the component should be formatted like the screenshot below:

The data-bound sheet with formatting.

In this tutorial, SpreadJS was combined with Angular to implement data binding functionality using an Angular controller and an initialization function. The data was loaded from a JSON file, and the pre-defined column attributes allowed that data to be bound to different columns in the SpreadJS instance. Angular can be combined with SpreadJS to provide an intuitive way to bind data and display it to the user.

To learn more about SpreadJS and to download a trial, click here: http://spread.grapecity.com/Downloads/

You can quickly design a spreadsheet component using the Spread Designer. Whether you are prototyping a complete spreadsheet component or simply customizing some aspect of an existing spreadsheet component, the dedicated graphical interface offers many features to save time and effort.

There are several ways to use the designer. You can use the designer in Visual Studio, as a stand-alone application, or you can load designer dialogs using code.

You can start the Spread Designer from inside your Visual Studio .NET project by doing one of the following:

• Right-click on the FpSpread component on your form and choose Spread Designer.

  Right-Click Option

• Select the Spread Designer verb at the top right-edge of the Spread control.

  Spread Designer Verb

You can also run the Spread Designer outside of Visual Studio .NET as a stand-alone application. For many developers who want to create and share designs, this is a quick way to design FpSpread-based applications and save them as either XML or Excel-compatible files. Practically all of the functionality you expect from the Spread Designer is available in this stand-alone application except those features that involve applying to and reverting from the form in Visual Studio.

Run the FarPoint.SpreadDesigner.EXE from the product bin folder to use the Spread Designer as a stand-alone application.

You can use the Spread Designer in your project with code. Add the FarPoint.Win.Spread.Design dll to the list of references in your Visual Studio project. Then select the FpSpreadDesigner component from the Toolbox under the GrapeCity Spread section and drag it to the form.

FpSpreadDesigner

You can use one of the following API methods to display the designer:

This example displays the FpSpreadDesigner component at run time after it has been added to the form at design time.

C#

fpSpreadDesigner1.Show(fpSpread1);

VB

FpSpreadDesigner1.Show(FpSpread1)

This example displays the FpSpreadDesigner component at run time after it has been added to the form at design time.

C#

fpSpreadDesigner1.ShowDialog(fpSpread1);

VB

FpSpreadDesigner1.ShowDialog(FpSpread1)

This example loads the cell type editor.

Cell Type Editor

C#

FarPoint.Win.Spread.Design.ExternalDialogs.CellTypeEditor(fpSpread1);

VB

FarPoint.Win.Spread.Design.ExternalDialogs.CellTypeEditor(FpSpread1)

This example uses the border editor.

Border Editor

C#

FarPoint.Win.Spread.Design.ExternalDialogs.BorderEditor(fpSpread1);

VB

FarPoint.Win.Spread.Design.ExternalDialogs.BorderEditor(FpSpread1)

This example uses ANNUAL_sample_csv.csv from https://www.ncdc.noaa.gov/cdo-web/datasets. Use the File tab and the Open menu to load the file. Use the default column delimiter and line feed for the row delimiter.

Load File

The first row of text in this example uses bold formatting. You can set other formatting options using the designer.

Spread Designer Example

Currency cells are useful if you want to display numbers as monetary values.

You can display currency values in Spread Windows Forms with a currency cell. You can customize formatting in the currency cell such as the currency symbol, separator character, decimal separator, and so on.

By default, Spread uses the regional Windows settings (or options) of the machine on which it runs for the currency formatting. You can customize any of these currency formatting properties:

• currency symbol (and whether to display it)
• separator character (and whether to display it)
• decimal symbol
• whether to display a leading zero
• positive value indicator (and whether to display it)
• negative value indicator (and whether to display it)

Use the CurrencyCellType class to set the currency cell properties. The following table lists the properties for the currency cell:

The MinimumValue and MaximumValue properties limit the value that the user enters when editing the cell. It does not affect the data model and does not the limit the cell getting a value by other means, for example, by means of a formula. The built-in operators and built-in functions for use in formulas return results as a Double (15 digits).

Use the MinimumValue and MaximumValue properties to place range restrictions on user entry. For example, the following code limits user input to values between 0 and 100.

C#

FarPoint.Win.Spread.CellType.CurrencyCellType currencycell = new FarPoint.Win.Spread.CellType.CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
currencycell.MinimumValue = 0;
currencycell.MaximumValue = 100;
fpSpread1.Sheets[0].Cells[0, 0, 2, 2].CellType = currencycell;

VB

Dim currencycell As New FarPoint.Win.Spread.CellType.CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
currencycell.MinimumValue = 0
currencycell.MaximumValue = 100
FpSpread1.Sheets(0).Cells(0, 0, 2, 2).CellType = currencycell

Use the MIN and MAX functions to place range restrictions on formula calculations. For example, the following code limits the summation calculation to values between 0 and 100. Type values in A1 and A2 to see the result.

C#

fpSpread1.Sheets[0].Cells[2, 4].Formula = "MAX(0,MIN(SUM(A1:A2), 100))";

VB

FpSpread1.Sheets(0).Cells(2, 4).Formula = "MAX(0,MIN(SUM(A1:A2), 100))"

This example loads data from a data source and creates a column of currency cells.

Column of Currency Cells

C#

//Add sample data
string conStr = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\\Program Files (x86)\\GrapeCity\\Spread Studio 8\\Common\\nwind.mdb";
//string sqlStr = "Select CompanyName, ContactName, ContactTitle, Country from Customers";
string sqlStr = "Select OrderID, CustomerID, ShipName, Freight from Orders";
//string sqlStr = "Select * from Orders";
System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(conStr);
DataSet ds = new DataSet();
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter(sqlStr, conn);
da.Fill(ds);
fpSpread1.ActiveSheet.DataAutoSizeColumns = true;            
fpSpread1.ActiveSheet.DataSource = ds;

FarPoint.Win.Spread.CellType.CurrencyCellType currencycell = new FarPoint.Win.Spread.CellType.CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
fpSpread1.ActiveSheet.Columns[3].CellType = currencycell;
fpSpread1.ActiveSheet.Columns[3].BackColor = Color.Beige;
fpSpread1.Font = new Font("Calibri", 10);

VB

'Add sample data
Dim conStr As String = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\Program Files (x86)\GrapeCity\Spread Studio 8\Common\nwind.mdb"
Dim sqlStr As String = "Select OrderID, CustomerID, ShipName, Freight from Orders"
Dim conn As New System.Data.OleDb.OleDbConnection(conStr)
Dim ds As New DataSet()
Dim da As New System.Data.OleDb.OleDbDataAdapter(sqlStr, conn)
da.Fill(ds)
FpSpread1.ActiveSheet.DataAutoSizeColumns = True
FpSpread1.ActiveSheet.DataSource = ds

Dim currencycell As New FarPoint.Win.Spread.CellType.CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
FpSpread1.ActiveSheet.Columns(3).CellType = currencycell
FpSpread1.ActiveSheet.Columns(3).BackColor = Color.Beige
FpSpread1.Font = New Font("Calibri", 10)

If you double-click on the currency cell in edit mode at run-time or press F4, a pop-up calculator appears by default. You can prevent the pop-up calculator by setting e.Cancel to True in the SubEditorOpening event. You can specify the text that displays on the OK and Cancel buttons with the SetCalculatorText method.

This example displays the pop-up calculator with custom button text.

Pop-up Calculator

C#

FarPoint.Win.Spread.CellType.CurrencyCellType currencycell = new FarPoint.Win.Spread.CellType.CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
currencycell.SetCalculatorText("Accept", "Cancel");
fpSpread1.Sheets[0].Cells[0, 0, 2, 2].CellType = currencycell;

VB

Dim currencycell As New FarPoint.Win.Spread.CellType.CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
currencycell.SetCalculatorText("Accept", "Cancel")
FpSpread1.Sheets(0).Cells(0, 0, 2, 2).CellType = currencycell

You can display spin buttons on the side of the cell when the cell is in edit mode.

This example displays spin buttons and sets the decimal and integer increments.

Spin Buttons in Cell

C#

FarPoint.Win.Spread.CellType.CurrencyCellType currencycell = new FarPoint.Win.Spread.CellType.CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
currencycell.SpinButton = true;
currencycell.SpinDecimalIncrement = 0.5F;
currencycell.SpinIntegerIncrement = 5;
currencycell.SpinWrap = true;
fpSpread1.Sheets[0].Cells[1, 1].CellType = currencycell;
fpSpread1.Sheets[0].Rows[1].Height = 40;
fpSpread1.Sheets[0].Columns[1].Width = 100;

VB

Dim currencycell As New FarPoint.Win.Spread.CellType.CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
currencycell.SpinButton = True
currencycell.SpinDecimalIncrement = 0.5F
currencycell.SpinIntegerIncrement = 5
currencycell.SpinWrap = True
FpSpread1.Sheets(0).Cells(1, 1).CellType = currencycell
FpSpread1.Sheets(0).Rows(1).Height = 40
FpSpread1.Sheets(0).Columns(1).Width = 100

This example sets a negative color and the positive and negative format for a currency cell.

C#

FarPoint.Win.Spread.CellType.CurrencyCellType currencycell = new FarPoint.Win.Spread.CellType.CurrencyCellType();
currencycell.DecimalPlaces = 2;
currencycell.ShowCurrencySymbol = true;
currencycell.NegativeRed = true;
currencycell.NegativeFormat = FarPoint.Win.Spread.CellType.CurrencyNegativeFormat.SignSymbolBefore;
currencycell.PositiveFormat = FarPoint.Win.Spread.CellType.CurrencyPositiveFormat.CurrencySymbolBefore;
fpSpread1.Sheets[0].Cells[1, 1].CellType = currencycell;

VB

Dim currencycell As New FarPoint.Win.Spread.CellType.CurrencyCellType()
currencycell.DecimalPlaces = 2
currencycell.ShowCurrencySymbol = True
currencycell.NegativeRed = True
currencycell.NegativeFormat = FarPoint.Win.Spread.CellType.CurrencyNegativeFormat.SignSymbolBefore
currencycell.PositiveFormat = FarPoint.Win.Spread.CellType.CurrencyPositiveFormat.CurrencySymbolBefore
FpSpread1.Sheets(0).Cells(1, 1).CellType = currencycell

You can also create currency cells in the Spread Designer. Select the cell or cells, right-click on the cells, and then select Cell Types. Another way to set the cell type in the designer is to use the Set CellType option in the Cell Type section of the Home menu.

Cell Type Dialog in Designer

Currency Cell Menu

You might want to display multiple columns of data in a cell and limit the user choices. Spread ASP.NET allows you to do this with a multiple-column combo box cell.

You can create a combo box cell with multiple columns in the drop-down list. You can provide a drop-down list and allow the user to choose from a displayed list.

Specify the list of items by binding the cell. You can also choose which column is displayed in the edit area of the cell with the ColumnEditName property.

The multiple-column combo cell can be bound to data by setting the DataSource, DataSourceID, DataMember, DataColumn, or DataColumnName property.

The following properties are available for the multiple-column combo cell and are located in the MultiColumnComboBoxCellType class:

The multiple-column combo cell returns the column edit value (the value which appears in the cell) as the postback data. This is the value returned from the EditValues property inside the UpdateCommand event. Set the UseValue property to true, to use the DataColumn or DataColumnName (instead of ColumnEdit or ColumnEditName) value as the postback data.

You can use the Spread Designer to set the cell type and most of the properties for the cell type. Setting the DataSource property for a cell requires code.

You can set cell types in the Spread Designer using the following steps:

1. In the work area, select the cell or cells for which you want to set the cell type.
2. Select the Home menu.
3. Select the SetCellType icon under the CellType section.
4. Select the cell type and any other cell properties.
5. Select OK to close the dialog.
6. Click Apply and Exit to close the Spread Designer.

You can also right-click on the cell or cells in the work area and then set the cell using the CellType tab.

Spread Designer

You can also use the Property Grid in the Spread Designer to set the cell type.

Property Grid

This example binds the multiple-column combo box cell to a data source.

Multiple-Column Combo Cell

C#

protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack) return;
//Add sample data
string conStr = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\\Program Files (x86)\\GrapeCity\\Spread Studio 8\\Common\\nwind.mdb";
string sqlStr = "Select OrderID, CustomerID, ShipName, Freight from Orders";
System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(conStr);
System.Data.DataSet ds = new System.Data.DataSet();
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter(sqlStr, conn);
da.Fill(ds);
FpSpread1.ActiveSheetView.DefaultStyle.Font.Name ="Calibri";

FarPoint.Web.Spread.MultiColumnComboBoxCellType cb = new FarPoint.Web.Spread.MultiColumnComboBoxCellType();
cb.DataSource = ds;
cb.ShowButton = true;
cb.ColumnEditName = "ShipName";
FpSpread1.ActiveSheetView.Cells[0, 0].CellType = cb;
FpSpread1.ActiveSheetView.Columns[0].Width = 300;
}

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (IsPostBack) Then
Return
End If

'Add sample data
Dim conStr As String = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\Program Files (x86)\GrapeCity\Spread Studio 8\Common\nwind.mdb"
Dim sqlStr As String = "Select OrderID, CustomerID, ShipName, Freight from Orders"
Dim conn As New System.Data.OleDb.OleDbConnection(conStr)
Dim ds As New DataSet()
Dim da As New System.Data.OleDb.OleDbDataAdapter(sqlStr, conn)
da.Fill(ds)
FpSpread1.ActiveSheetView.DefaultStyle.Font.Name = "Calibri"

Dim cb As New FarPoint.Web.Spread.MultiColumnComboBoxCellType()
cb.DataSource = ds
cb.ShowButton = True
cb.ColumnEditName = "ShipName"
FpSpread1.ActiveSheetView.Cells(0, 0).CellType = cb
FpSpread1.ActiveSheetView.Columns(0).Width = 300
End Sub

This example sets the UseValue property and returns the cell value using the UpdateCommand event.

Multiple-Column Combo Cell

C#

protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack) return;

System.Data.DataSet ds = new System.Data.DataSet();
System.Data.DataTable name;
System.Data.DataTable city;
name = ds.Tables.Add("Customers");
name.Columns.AddRange(new System.Data.DataColumn[] { new System.Data.DataColumn("LastName", typeof(string)), new System.Data.DataColumn("FirstName", typeof(string)), new System.Data.DataColumn("ID", typeof(Int32)) });
name.Rows.Add(new object[] { "Fielding", "William", 0 });
name.Rows.Add(new object[] { "Williams", "Arthur", 1 });
name.Rows.Add(new object[] { "Zuchini", "Theodore", 2 });
city = ds.Tables.Add("City/State");
city.Columns.AddRange(new System.Data.DataColumn[] { new System.Data.DataColumn("City", typeof(string)), new System.Data.DataColumn("Owner", typeof(Int32)), new System.Data.DataColumn("State", typeof(string)) });
city.Rows.Add(new object[] { "Atlanta", 0, "Georgia" });
city.Rows.Add(new object[] { "Boston", 1, "Mass." });
city.Rows.Add(new object[] { "Tampa", 2, "Fla." });

FarPoint.Web.Spread.MultiColumnComboBoxCellType cb = new FarPoint.Web.Spread.MultiColumnComboBoxCellType();
cb.DataSource = ds;
cb.ShowButton = true;
cb.DataMember = "City/State";
cb.UseValue = true;
//Displays the State after a list item is selected
cb.ColumnEditName = "State";
FpSpread1.ActiveSheetView.Cells[0, 0].CellType = cb;
FpSpread1.ActiveSheetView.Columns[0].Width = 280;
}

protected void FpSpread1_UpdateCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
{
int colcnt;
int i;
string strvalue;
int r = (int)e.CommandArgument;
colcnt = e.EditValues.Count - 1;
for (i = 0; i <= colcnt; i++)
{
if (!object.ReferenceEquals(e.EditValues[i], FarPoint.Web.Spread.FpSpread.Unchanged))
strvalue = e.EditValues[i].ToString();
}
}

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (IsPostBack) Then
Return
End If

Dim ds As New System.Data.DataSet
Dim name As DataTable
Dim city As DataTable
name = ds.Tables.Add("Customers")
name.Columns.AddRange(New DataColumn() {New DataColumn("LastName", Type.GetType("System.String")), New DataColumn("FirstName",
Type.GetType("System.String")), New DataColumn("ID", Type.GetType("System.Int32"))})
name.Rows.Add(New Object() {"Fielding", "William", 0})
name.Rows.Add(New Object() {"Williams", "Arthur", 1})
name.Rows.Add(New Object() {"Zuchini", "Theodore", 2})
city = ds.Tables.Add("City/State")
city.Columns.AddRange(New DataColumn() {New DataColumn("City", Type.GetType("System.String")), New DataColumn("Owner", Type.GetType("System.Int32")),
New DataColumn("State", Type.GetType("System.String"))})
city.Rows.Add(New Object() {"Atlanta", 0, "Georgia"})
city.Rows.Add(New Object() {"Boston", 1, "Mass."})
city.Rows.Add(New Object() {"Tampa", 2, "Fla."})

Dim cb As New FarPoint.Web.Spread.MultiColumnComboBoxCellType()
cb.DataSource = ds
cb.ShowButton = True
cb.DataMember = "City/State"
cb.UseValue = True
'Displays the State after a list item Is selected
cb.ColumnEditName = "State"
FpSpread1.ActiveSheetView.Cells(0, 0).CellType = cb
FpSpread1.ActiveSheetView.Columns(0).Width = 280
End Sub

Protected Sub FpSpread1_UpdateCommand(sender As Object, e As SpreadCommandEventArgs) Handles FpSpread1.UpdateCommand
Dim colcnt As Integer
Dim i As Integer
Dim strvalue As String
Dim r As Integer = CInt(e.CommandArgument)
colcnt = e.EditValues.Count - 1
If Not Object.ReferenceEquals(e.EditValues(i), FarPoint.Web.Spread.FpSpread.Unchanged) Then
strvalue = e.EditValues(i).ToString()
End If
End Sub

The SpreadJS Designer allows you to create basic cell types quickly and without code.

You can create button, check box, combo box, and hyperlink cells in the SpreadJS Designer.

The options for setting the cell type are located under the Home tab.

Designer

Select this icon for the button cell:

Select this icon for the check box cell:

Select this icon for the combo box cell:

Select this icon for the hyperlink cell:

The Button CellType dialog has the following options:

Button CellType Dialog

The CheckBox CellType dialog has the following options:

CheckBox CellType Dialog

The ComboBox CellType dialog has the following options:

ComboBox CellType Dialog

The EditorValueType option has the following settings:

The HyperLink CellType dialog has the following options:

HyperLink CellType Dialog

Type the hyperlink value in the cell and then set the hyperlink cell type. The cell value is used for the hyperlink URL.

The following image displays a column of button, check box, combo box, and hyperlink cells in the designer.

SpreadJS Designer Example

In this article, you will find all of the .NET bugs that were fixed in the first Service Pack release of Spread V9.

To download Spread V9 Service Pack 1, click here.

Spread for Winforms

• The CheckboxCellType now works correctly with certain key characters.
• Performance issues with adding rows were fixed.
• Performance issues with loading XML files were fixed.
• The AllArrowsIgnoreMultiline option now works correctly in Korean culture.
• Certain XML files now load correctly.
• Copy and paste now work correctly.
• Performance issues with grouping were fixed.
• The print header and footer now work correctly with French settings.
• The print header and footer now export correctly to Excel.
• Performance issues with RichTextCellType and cell spans were fixed.
• BestFitCols now works correctly with spanned cells.

Spread for ASP.NET

• Formulas that reference empty cells on other pages now work correctly.

Spread for Silverlight

• Multiple conditional formats are now correctly imported from an Excel-formatted file.

Spread for WPF

• Print settings are now imported correctly from Excel-formatted files.
• Multiple conditional formats are now correctly imported from Excel-formatted files.
• The Licenses.licx file now gets correctly updated when adding a component to a project.

Spread for WinRT

• Multiple conditional formats are now correctly imported from Excel-formatted files.

In this article, you will find all of the SpreadJS bugs that were fixed in the first Service Pack release of Spread V9.

To download Spread V9 Service Pack 1, click here.

SpreadJS

• The hitTest method now works correctly when filters are applied.
• Certain Excel-formatted files now import correctly.
• Scrolling issues after importing certain Excel files are fixed.
• Margins now import correctly when importing Excel-formatted files.
• Formulas now recalculate correctly when invoking the Sheet.reset method.
• The DragFillBlock event now works correctly with merged cells.
• Pasted values are now recognized correctly.
• Updating CustomFloatingObject content now works correctly.
• Unlocking cells with conditional formatting applied now works correctly.
• TypeScript definitions for Cell properties are now correct.
• Conditional formatting correctly exports to Excel now.
• Deleting data when using the Safari browser on Mac OS now works correctly.
• Header text is now displayed correctly when setting the default row height.
• Hidden row values are no longer displayed in data filters.
• The autoFitRow method now works correctly when hiding columns.
• The filter dialog now works correctly during data input.
• Searching now works correctly with the French locale setting.
• The DATEDIF formula now works correctly.
• Comments are now displayed properly when loading a sheet and re-adding comments.
• The T.INV formula now works correctly.
• The moveToNextCellThenControl method now works correctly when the row count is zero.
• Long dates are now formatted correctly.
• Importing Excel-formatted files with images now works correctly.
• SpreadJS now works correctly within a scrollable container.
• Custom data validation is now saved correctly to an Excel-formatted file.
• The SpreadJS Designer now displays the correct names in the name manager.
• Cells with line breaks are now pasted correctly.
• The cellType.processMouseEnter/processMouseLeave functions now work correctly when scrolling.
• The row filter now works correctly when cells contain line breaks.
• The dirty status is now set correctly when editing a cell with a line break.
• Performance issues with loading certain SSJSON files are now fixed.
• SpreadJS now displays properly on Mac OS.
• The German culture setting now works correctly with certain values.
• Printing to PDF now works correctly.
• Scrolling now works correctly with large column widths.
• Row filters now work correctly when cells contain HTML tags.
• Formulas that reference other sheets now update correctly.
• The recalcAll method now works correctly.
• The Excel import and export DLLs now display the correct version number.
• Merged cells are now pasted correctly.
• Custom culture now works correctly.
• The qualityFactor method has now been added.
• The formula text box now uses the correct culture setting.
• Excel-formatted files are now exported correctly when using the German culture.
• The ACCRINT formula now works correctly.
• The ADDRESS formula now works correctly.
• The spread.fromJSON method now works correctly.
• Certain Excel-formatted files now load correctly.
• The SpreadJS Designer now displays comments correctly.
• The general formatter now works correctly.
• The ExcelIO DLLs now contain the correct information.
• When saving to SSJSON, rowHeaderColWidth and colHeaderRowHeight now return the correct types.
• The addRows method now works correctly with formulas.
• Cell values are now formatted correctly when using German culture settings.

We have just released Spread Studio v9 Sp1 and SpreadJS v9 Sp1 and a few announcements come with this release.

SpreadJS is No Longer Part of Spread Studio

SpreadJS is growing into its own product line (see the Spread.Views announcement below). Starting with this release, it is no longer licensed with Spread Studio. Don’t worry, Spread Studio customers are still eligible for the Sp1 update. A few important things to remember:

• SpreadJS will need its own key to unlock the designer and the ExcelIO component. An email to Spread Studio 9 owners has been sent with that key. If you did not receive that email, please email spread.sales@grapecity.com.
• Each Spread Studio 9 license without maintenance is eligible for a free upgrade to a SpreadJS 9 Sp1 developer license. When SpreadJS v10 is released, it will require a separate upgrade purchase.
• Each Spread Studio 9 license with maintenance will receive a SpreadJS 9 Sp1 license and a SpreadJS 10 upgrade license. After v10, SpreadJS will need to be purchased separately.

Note that SpreadJS is licensed per developer. Separate license agreements are required for use in commercial applications. Email spread.sales@grapecity.com to learn more.

Introducing the Spread.Views Community Technology Preview

We are adding a new component to the SpreadJS family!  Spread.Views is an innovative, high-performance JavaScript data presentation and layout component that goes beyond traditional tabular display by including a variety of views such as grid, tree, card, masonry, trellis, timeline, Gantt, and calendar. Spread.Views provides ultimate flexibility by making layouts, row templates, data fields, calculations, and editing modes completely and easily customizable. Spread.Views is available as Community Technology Preview and the first version will be released this November with SpreadJS v10.

• See the demo
• Download the preview

SpreadJS is Becoming Spread.Sheets

What you now know as SpreadJS will become Spread.Sheets. SpreadJS is the name for Spread’s JavaScript product family. SpreadJS Product Line:

• Spread.Sheets: Our flagship JavaScript spreadsheet component
• Spread.Views: Our new data presentation and layout component