Create Data Charts

To create a Data Chart, follow the below steps:

1. Add the following CSS and script files to use the Data Charts.

    <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js"></script>
    <script src="scripts/gc.spread.sheets.datacharts.x.x.x.min.js"></script>

2. Run the window.onload event with a function that is marked as async. Then, create an instance of the spread and retrieve the sheet in the SpreadJS environment to add the Data Chart.

   let spread = new GC.Spread.Sheets.Workbook("spreadjs-host");
   const sheet = spread.getActiveSheet();

3. Initialize the Data Manager instance using the dataManager method.

   const dataManager = spread.dataManager();

4. Create a table in the Data Manager and fetch data from the specified source using the fetch() method.

   Use await to ensure that the code execution pauses until the data is fully fetched. Note that await is only valid in async functions.

   const salesTable = createSalesTable(dataManager);
   await salesTable.fetch();

5. Create the function to add data to the table.

   function createSalesTable (dataManager) {
       const records = [
           ['2021', 'East', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
           ['2021', 'East', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
           ['2021', 'East', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
           ['2021', 'East', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
           ['2021', 'East', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
           ['2021', 'North', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
           ['2021', 'North', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
           ['2021', 'North', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
           ['2021', 'North', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
           ['2021', 'East', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
           ['2021', 'East', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
           ['2021', 'East', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
           ['2021', 'East', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
           ['2021', 'East', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
           ['2021', 'North', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
           ['2021', 'North', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
           ['2021', 'North', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
           ['2021', 'North', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
           ['2021', 'East', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
           ['2021', 'East', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
           ['2021', 'East', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
           ['2021', 'East', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
           ['2021', 'East', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
           ['2021', 'North', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
           ['2021', 'North', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
           ['2021', 'North', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
           ['2021', 'North', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
           ['2021', 'East', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
           ['2021', 'East', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
           ['2021', 'East', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
           ['2021', 'East', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
           ['2021', 'East', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
           ['2021', 'North', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
           ['2021', 'North', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
           ['2021', 'North', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
           ['2021', 'North', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
           ['2021', 'East', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
           ['2021', 'East', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
           ['2021', 'East', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
           ['2021', 'East', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
           ['2021', 'East', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
           ['2021', 'North', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
           ['2021', 'North', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
           ['2021', 'North', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
           ['2021', 'North', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
       ];
       const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
       return dataManager.addTable('Sales', {
           data: records.map((x) => {
               const record = {};
               columns.forEach((c, i) => record[c] = x[i]);
               return record;
           })
       });
   }

6. Create a Data Chart using the sheet.dataCharts.add() method with specified coordinates.

   const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);

7. Use the setChartConfig() method to configure the Data Chart with specific settings. In this example, type and encodings with values, category, and color are applied.

   However, a Data Chart has several elements that can be customized while adding. To learn more, refer to Data Chart Elements.

   dataChart.setChartConfig({
       tableName: 'Sales',
       config: {
           header: {
               title: "Bar Chart"
           }
       },
       plots: [
           {
               type: GC.Spread.Sheets.DataCharts.DataChartType.bar,
               encodings: {
                   values: [
                       {
                           field: "Sales",
                           aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                       }
                   ],
                   category: {
                       field: "Product"
                   },
                   color: {
                       field: "Product"
                   }
               },
   
           }
       ]
   });