In the method loadData of SheetAPI, it allows user add column / bar chart to the sheet.
Here comes the code example
var chartFloatings = [{
sheet: 1,
name: 'chart12',
ftype: 'floor',
json: '{"seriesPosition":"row","legendPosition":"right","chartType":"column","floorType":"chart","source":{"series":[["",9,6,9,7],["",10,6,10,7],["",11,6,11,7]],"categories":[["",9,5,9,5],["",10,5,10,5],["",11,5,11,5]],"labels":[["",8,6,8,6],["",8,7,8,7]],"usAbs":false,"cacheFields":[{"name":"category"},{"name":"Monday","title":"Monday"},{"name":"Tuesday","title":"Tuesday"},{"name":"Wenseday","title":"Wenseday"}]},"x":695,"y":164,"width":400,"height":300,"id":"chart12","sheetId":1}'
}];
var chartCells = [
{sheet: 1, row: 9, col: 5, json: { data: 'Monday'}},
{sheet: 1, row: 10, col: 5, json: { data: 'Tuesday'}},
{sheet: 1, row: 11, col: 5, json: { data: 'Wednesday'}},
{sheet: 1, row: 9, col: 6, json: { data: 2}},
{sheet: 1, row: 10, col: 6, json: { data: -4}},
{sheet: 1, row: 11, col: 6, json: { data: -16}},
{sheet: 1, row: 9, col: 7, json: { data: 12}},
{sheet: 1, row: 10, col: 7, json: { data: 4}},
{sheet: 1, row: 11, col: 7, json: { data: -4}},
{sheet: 1, row: 8, col: 6, json: { data: '1st item'}},
{sheet: 1, row: 8, col: 7, json: { data: '2nd item'}}
];
var json = {
fileName: 'Chart file',
sheets: [{
name: 'First',
id: 1,
color: 'orange'
}],
floatings: this.chartFloatings(),
cells: chartCells
};
SHEET_API.loadData(SHEET_API_HD, json);
The above code will generate a column chart for a range of cells from E8:G11.
For chart, loadData json object includes at least 4 names: fileName, sheets, floatings and cells.
Name | Property | Example | Description |
---|---|---|---|
File name | fileName | fileName: 'Example Sheet' | Define the file name for this sheet file. |
Sheet object | sheets | sheets: [{},{}] | Set defined sheet tabs information for this file. |
Floating object | floatings | floatings: [{},{}] | Set defined floatings information for this sheet file. |
Cell object | cells | cells: [{},{}] | Set defined cell information for each tab. |
For floating object, the following json object need to be defined.
{
sheet:1, // the sheet id of added chart
name:"chart12", // name should be unique in this floating
ftype:"floor", // define floor type
json: {
"seriesPosition"":"row", // the position of series: row or column
"legendPosition":"right", // where legend should be: right, left, top, bottom
"chartType":"column", // column or bar - for bar chart, this should be defined as "bar"
"xTitle":"X", // OPTION - ignore this if chart does not have X title
"yTitle":"Y", // OPTION - ignore this if chart does not have Y title
"floorType":"chart", // set floorType as chart
"source": {
"series":[["",9,6,9,7],["",10,6,10,7],["",11,6,11,7]], // the data series position
"categories":[["",9,5,9,5],["",10,5,10,5],["",11,5,11,5]], // define the category of data position
"labels":[["",8,6,8,6],["",8,7,8,7]], // define the label of chart data position
"cacheFields":[{"name":"category"},{"name":"Monday","title":"Monday"},{"name":"Tuesday","title":"Tuesday"},{"name":"Wenseday","title":"Wenseday"}]
},
"x":695, // the chart located X position
"y":164, // the chart located Y position
"width":400, // the chart width
"height":300, // the chart height
"id":"chart12", // the chart identify - Need to be same as name
"sheetId":1 // the sheet id of added chart - Need to be same as sheet
}
}