Sample Code

Generate column / bar chart



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.

NameProperty ExampleDescription
File namefileName fileName: 'Example Sheet' Define the file name for this sheet file.
Sheet objectsheets sheets: [{},{}] Set defined sheet tabs information for this file.
Floating objectfloatings floatings: [{},{}] Set defined floatings information for this sheet file.
Cell objectcells 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 
      }
  }  

 

 


Copyright © FeyaSoft Inc. All rights reserved.