I am trying to create a combo chart in sheet embedded script.
The problem is that the build doesn't match the settings.
For example, I specify the type "area", and "bars" are built
How to build a diagram according to the settings?
My current code and the result are given below:
https://docs.google.com/spreadsheets/d/1F7-pugxgWhfEhPouqkLA5kp-Sfv4KXUHmaBbeEcbAEw/edit#gid=0
function myTest() {
var sheet = SpreadsheetApp.openById("1F7-pugxgWhfEhPouqkLA5kp-Sfv4KXUHmaBbeEcbAEw").getSheetByName('Лист1');
var chart = sheet.newChart()
.setOption('useFirstColumnAsDomain', true)
.setChartType(Charts.ChartType.COMBO)
.addRange(sheet.getRange('A2:D5'))
.setOption('series', {
0:{type: "area"},
1:{type: "bars"},
2:{type: "line"}
})
.setPosition(7, 2, 0, 0)
.build();
sheet.insertChart(chart);
}
enter image description here
I also have a working code that allows you to build a combo chart, but in a different method:
function myTest() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "month")
.addColumn(Charts.ColumnType.NUMBER, "A")
.addColumn(Charts.ColumnType.NUMBER, "B")
.addColumn(Charts.ColumnType.NUMBER, "C")
.addRow(["Feb", 10, 5,100])
.addRow(["Mar", 300, 3,200])
.addRow(["Apr", 100, 5,150])
.build();
var chart = Charts.newColumnChart()
.setDataTable(data)
.setOption('series', {
0: {type: 'area', dataLabel: 'value'},
1: {type: 'bars',dataLabel: 'value'},
2: {type: 'line',dataLabel: 'value', dataLabel: 'value', curveType: 'function'},
})
.setRange(0, 100)
.setTitle('Название таблицы '+d)
.build();
}
Result:
enter image description here
What am I doing wrong in the first case?
Related
I have using couple of Highcharts as given below -
Now, when I click Female/Male on the gender chart, I would like to recreate the 'By Department' chart based on the gender selected.
Should I re-create the 'By Department' chart brand new or should I change the drilldown series of 'By department' chart'
Here is the gender chart code
populate_gender_chart = () => {
const filter_data = this.filter_data;
const setfilterstate = this.setfilterstate;
const populate_drilldown_data = this.populate_drilldown_data;
var options = {
chart: {
type: "pie",
events:{
drilldown: function(e){
var filter_by_value = (e.point.name === 'Female') ? 'F': 'M'
var series = populate_drilldown_data(e)
this.addSeriesAsDrilldown(e.point, series[0]);
},
},
},
populate_department_name_chart = (data) => {
const filter_data = this.filter_data;
const setfilterstate = this.setfilterstate;
var options = {
chart: {
type: "pie",
events:{
drilldown: function(e){
console.log('department drilldown')
Wondering how to get the reference of the second chart when I drill down the first chart.
You can use drilldown feature of Highchart.
For a basic setup, the drilldownseries are defined in a separate array under the drilldownconfiguration. Each series configuration is given an id, which is used for the drilldownparent point to identify its series.
API Reference:
https://www.highcharts.com/docs/chart-concepts/drilldown
https://www.highcharts.com/demo/pie-drilldown
React Example of drilldown: https://codesandbox.io/s/highcharts-react-demo-ynf9i
I am trying to create AG-grid (NOT UI Grid)where the column headers have to be loaded dynamically from the JSON response. I have tried many ways but I could not accomplish so any help is very much appreciable.
Grid – The format which I am expecting (Image attached)
In the grid, the first two columns Part No and Part Name are fixed. The remaining columns are dynamic where the column header is not decided before initializing the grid.
I’m ready to change the JSON format to make the grid format
JSON Format
[
{
"partNo":"P00001",
"partName":"AAAAA",
"periodList":[
{
"period":"Jan-15",
"periodValue":"267"
},
{
"period":"Feb-15",
"periodValue":"347"
}
]
},
]
AG GRID Sample Format
My understanding of angular is limited, but I am will attempt to help (disclaimer:) Though, I am sure there is an easier method, I hope this one helps
//For convenience, lets call your dataset partSales.
//1st get dynamic columns
var myDynamicColumns = getMyDynamicColumns(partsales);
//2nd format data to make period data have a unique name.
//Note the periodValue will be assigned to its period e.g. 'Jan-15':'267'
//This should match the columnDefs field value. e.g. field: 'Jan-15'
var myData = myDataFormatter(partsales);
//fixed columns
var gridOColDefs = [
{
field: 'partNo',
enableCellEdit: false,
headerName: 'Part No',
},
{
field: 'partName',
enableCellEdit: false,
headerName: 'Part Name',
cellClass: 'text-right',
width: 45,
headerGroup: 'Farm'
}].concat(myDynamicColumns);
];
//Define you grid options
var gridOptimizerOptions = {
pinnedColumnCount:2,
columnDefs: myDynamicColumns,
rowData: myData
};
//Returns an list of dynamic column definitions
function getMyDynamicColumns(partsales){
var columnFields = [];
//loop though parts
_.each(partSales, function(singlePartSale){
//loop through periods
_.each(singlePartSale.periodList, function(period){
var periodTitle = period.period;
//Do something to make sure the column definition has not already been added. The conditional syntax below is not valid.
if(periodTitle is not in columnFields){
columnFields.push(
{
//You will have to flush this out. You may need to loop through you data and give each period an unique name.
field: [periodTitle],
headerName: [periodTitle],
width: 50
});
} //end condition
}); //periods loop
});//end parts loop
//Return new column defs so they can be concattinated to the fixed column Definitions
return columnFields;
}
function myDataFormatter(partSales){
var newDataList = [];
_.each(partSales, function(partSale){
var newData = {
partNo = partSale.partNo,
partName = partSale.partName
}
_.each(partSale.periodList, function(singlePeriod){
var newField = singlePeriod.period;
newData.push([newField] = singlePeriod.periodValue);
});
newDataList.push(newData);
})
return newDataList;
})
// so your data should look like this from the data formatter function.
[{
'partNo':"P00001",
'partName':'AAAAA',
'Jan-15':"267",
'Feb-15':"347",
...and so on.
},
{
'partNo':"P00002",
'partName':'AAAB',
'Jan-15':"421",
'Feb-15':"2",
...and so on.
}]
I'm using the grid from http://ui-grid.info/ in a project. I've created a hierarchical grid, which works nicely, but when I do an export, it only exports the data from the top-level grid.
This is by design and is standard functionality for the grid, so there's no point in me putting up any example code. Any example from http://ui-grid.info/docs/#/tutorial will do.
Is there a way to export the subgrid (preferably both the main grid AND the subgrid together as they appear in the grid)?
Sadly the answer is no.
As you can see here the function getData iterates through all rows and then through all columns, adding to an array of extractedFields the columns to be extracted and aggregating those in an array of extractedRows.
This means that no data, other than what's defined in gridOptions' columnDef will be read, converted and extracted.
By design, subgrid information are stored inside a property of any row entity's subGridOptions but this property is never accessed inside of the exporter feature.
The motivation behind this behaviour is that expandable grid feature is still at an alpha stage, so, supporting this in other features is not a compelling priority.
Furthermore, adding subgrid to a CSV could be quite hard to design, if we wanted to provide a general solution (for example I don't even think it would be compliant to CSV standard if you had different number of columns in the main grid and in subgrids).
That said, ui-grid is an open source project, so, if you have a working design in mind, feel free to open a discussion about it on the project gitHub page or, even better, if you can design a working (and tested) solution and create a pull request, even better!
I managed to get it working, although if I had the time I would do it a bit better than what I've done by actually creating a branch of the code and doing it properly, but given time constraints, what I've got is working nicely.
FYI, here's the way I ended up getting it to do what I wanted:
In my grid options, I turned off the CSV export options in the grid menu (because I've only implemented the changes for PDF).
I made a copy of exporter.js, named it custom.exporter.js and changed my reference to point to the new file.
In custom.exporter.js, I made a copy of the getData function and named it getGridRows. getGridRows is the same as getData, except it just returns the rows object without all the stuff that gets the columns and so on. For now, I'm coding it to work with a known set of columns, so I don't need all that.
I modified the pdfExport function to be as follows:
pdfExport: function (grid, rowTypes, colTypes) {
var self = this;
var exportData = self.getGridRows(grid, rowTypes, colTypes);
var docContent = [];
$(exportData).each(function () {
docContent.push(
{
table: {
headerRows: 1,
widths: [70, 80, 150, 180],
body: [
[{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }],
[formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle],
]
}
});
var subGridContentBody = [];
subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]);
$(this.entity.Defects).each(function () {
subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']);
});
docContent.push({
table: {
headerRows: 1,
widths: [159, 150, 50, 121],
body: subGridContentBody
}
});
docContent.push({ text: '', margin: 15 });
});
var docDefinition = {
content: docContent
}
if (self.isIE()) {
self.downloadPDF(grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
No, there is no direct way to export subgrid. rather you can create youur own json data to generate csv file.
Please check the below code
function jsonToCsvConvertor(JSONData, reportTitle) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData,
csv = '',
row,
key1,
i,
subGridData;
//Set Report title in first row or line
csv += reportTitle + '\r\n\n';
row = '';
for (key1 in arrData[0]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += key1 + ',';
}
}
csv += row + '\r\n';
for (i = 0; i < arrData.length; i++) {
row = '';
subGridData = '';
for (key1 in arrData[i]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += '"' + arrData[i][key1] + '",';
}
else if(key1 === 'subGridOptions'){
//csv += row + '\r\n';
subGridData = writeSubGridData(arrData[i][key1].data);
}
}
csv += row + '\r\n';
csv = subGridData ? csv + subGridData + '\r\n' : csv;
}
if (csv === '') {
console.log('Invalid data');
}
return csv;
}
//Generates subgrid Data to exportable form
function writeSubGridData(subgridData){
var j,
key2,
csv = '',
row = '';
for (key2 in subgridData[0]){
if(key2 !== '$$hashKey'){
row += key2 + ',';
}
}
csv = row + '\r\n';
for (j=0; j < subgridData.length ; j++){
row = '';
for(key2 in subgridData[j]){
if(key2 !== '$$hashKey'){
row += '"' + subgridData[j][key2]+ '",';
}
}
csv += row + '\r\n';
}
return csv;
}
jsonToCsvConvertor(exportData, 'New-Report');
I am using Ext JS 3.2. I have a grid. Now I want to customize my existing grid. I want to add hardcoded value as row0, But its not working
Below is my code
My store
var store = new Ext.data.Store({
id : 'user',
proxy : proxy,
reader : reader,
writer : writer, // <-- plug a DataWriter into the store
url: 'cat/view.action?catid='+catid_para+'&teaid='+teaid_para+'&flag='+0,
remoteSort: true,
remoteSort: true,
autoSave : false,
// <-- false would delay executing create, update, destroy
// requests until specifically told to do so with some [save]
// buton.
});
var record = new SiteUtility({
id:'0',
fname:'4',
lname:'3444',
attandance: 'G',
});
var parent_grid=Ext.getCmp('org_grid');
parent_grid.getStore().insert(0,record);
// store.save();
//parent_grid.getView().refresh();
store.load({params:{start:0, limit:10}});
Thanks
try this:
store.load({params:{start:0, limit:10}, callback: function(){
var record = new SiteUtility({
id:'0',
fname:'4',
lname:'3444',
attandance: 'G'
});
store.insert(0,record);
}});
Here you can see how to do that. You need to get the recordType first and create new Record:
var recordType = store.recordType;
var nullRecord = new recordType({
id: '1',
name: "4",
lname: "4",
age: "2",
remarks:"Remarks"
}, null);
store.insert(0, nullRecord);
You can take a look at the Ext Docs.
I am having a button on page on the click of the button i need to add rows inside extjs grid.
The row will contain the controls like textbox, combobox, datefields etc.
I have added dynamic rows to the store like this -
var r = Ext.create('Model', {
name: 'XYZ',
email: 'abc#abc.com',
start: new Date(),
salary: 50000,
active: true
});
var i = 0;
page.store.insert(i, r);
But this way i can add records only. and i want to add controls to the grid. Please suggest.
Thanks,
I have used the grid row editing plugin for the issue.
Here i am adding the row to the store and opening it in edit mode via edit plugin.
Sample code is here.
tbar: [
{
text: 'Add Row',
iconCls: 'employee-add',
handler: function () {
//var Date = new Date();
//var Time = new Date().getTime() / 1000;
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('TagAdjustment', {
startDate: Ext.Date.clearTime(new Date()),
startTime: 10,
stopDate: Ext.Date.clearTime(new Date()),
stopTime: 10,
rampStart: 10,
rampStop: 10,
gen: 10
});
var selectedRecord = grid.getSelectionModel().getSelection()[0];
var row = grid.store.indexOf(selectedRecord);
store.insert(row + 1, r);
rowEditing.startEdit(row + 1, 0);
}
},