DataCharts allow you to bind charts directly to the Data Manager data, eliminating the need to store data within the SpreadJS workbook. The below demo shows how to create a DataChart and edit all of the different options within the UI.
For our ReportSheets Add-On users, the DataCharts Add-On is included and seamlessly integrates with the same Data Manager, enabling you to enhance your reports with dynamic charts effortlessly. If you wish to utilize the DataCharts Add-On outside the ReportSheets Add-On within your spreadsheets, a separate DataCharts Add-On license is required.
To use the DataCharts feature, add the SpreadJS DataCharts JS file link into the document's head section:
<head>
...
<script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
<script src='.../spreadjs/plugins/gc.spread.sheets.shapes.x.x.x.min.js' type='text/javascript'></script>
<script src='.../spreadjs/plugins/gc.spread.sheets.datacharts.x.x.x.min.js' type='text/javascript'></script>
</head>
You can create a DataChart with the sheet.dataCharts.add method, as shown below:
const dataManager = spread.dataManager();
const salesTable = createSalesTable(dataManager);
await salesTable.fetch();
const sheet = spread.getActiveSheet();
const dataChart = sheet.dataCharts.add('data-chart-1', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
tableName: 'Sales',
config: {
bar: {
// category width
width: 0.6,
},
header: {
// title settings
title: 'Column Chart',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
style: {
fill: {
type: 'CssColor',
color: 'rgba(242, 242, 242, 1)',
}
},
textStyle: {
color: 'rgba(51, 51, 51, 1)',
fontSize: 18,
fontFamily: 'Calibri',
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
fontWeight: 'Bold',
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
}
},
// set padding for the chart
plotAreas: [{
padding: {
left: 20,
right: 20,
top: 20,
bottom: 20,
}
}]
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' },
}
}
]
});
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;
})
});
}
Submit and view feedback for