Full example:
https://jsfiddle.net/gbeatty/4byg0p2t/
data: {
table: 'datatable',
startRow: 0,
endRow: 6,
startColumn: 0,
endColumn: 3,
parsed: function (columns) {
columns.forEach(column => {
column.splice(1, 2);
});
}
},
What I'd like the chart to reference is only column 0 "Year" and column 3 "Group C" while keeping the entire table displayed below. Challenge is disregarding the 2 columns in the middle.
I am trying the parsed option but it seems the rows and columns are mixed up. I even tried setting the switchRowsAndColumns value to true. (https://api.highcharts.com/highcharts/data.seriesMapping)
You can also use complete function to modify your data.
Example code based on your config:
complete: function(options) {
let series = [];
series.push(options.series[2]);
options.series = series;
}
Demo:
https://jsfiddle.net/BlackLabel/tfs4ubcL/
API Reference:
https://api.highcharts.com/highcharts/data.complete
Related
I am able to create a table using the Google Docs Api. By default, each column is of equal width.
How is it possible to adjust the width of the columns using the Google Docs API?
I can see the updateTextStyle and updateParagraphStyle request types (batchUpdate methods) but there's currently no updateTable method, or any similar method that looks like it could do this. I'm using the reference documentation, here:
https://developers.google.com/docs/api/reference/rest/v1/documents/request
I'm using NodeJS / Javascript to interact with the API currently.
This is possible, in fact all the table operation that you can do on UI are possible.
1) Create table with following request:
def create_loc_table(doc_id, r, c, idx):
"""
r = number of rows,
c = number of columns,
idx = Start index where table needs to be created.
"""
request = [{
'insertTable': {
'rows': r,
'columns': c,
'location': {
'segmentId':'',
'index': idx
}
},
}
]
result = self.docs_service.documents().batchUpdate(documentId=doc_id, body={'requests': request}).execute()
print('Result {0}'.format(json.dumps(result, indent=4)))
2) Modify/update the table:
def modify_table(self, t_idx):
"""
t_idx = Table start index.
"""
request = [{
'updateTableColumnProperties': {
'tableStartLocation': {'index': t_idx},
'columnIndices': [0],
'tableColumnProperties': {
'widthType': 'FIXED_WIDTH',
'width': {
'magnitude': 100,
'unit': 'PT'
}
},
'fields': '*'
}
}
]
result = self.docs_service.documents().batchUpdate(documentId=doc_id, body={'requests': request}).execute()
print('Result {0}'.format(json.dumps(result, indent=4)))
3) Output would be
I'm using chartkick gem to render a Google timeline graph. While this works very nicely out of the box, I read on the Google documentation, that I'm also able to include a bar label:
https://developers.google.com/chart/interactive/docs/gallery/timeline#labeling-the-bars
Is there an option to add that extra column to the datatable with the help of Chartkick?
I basically need this to be invoked before the Timeline is rendered:
dataTable.addColumn({ type: 'string', id: 'Name' });
Thanks
Code sample:
<%= timeline [
["Washington", "1789-04-29", "1797-03-03"],
["Adams", "1797-03-03", "1801-03-03"],
["Jefferson", "1801-03-03", "1809-03-03"]
] %>
This requires a change in the source, chartkick.js:
First, you need to add a line describing the new data column to the beginning of "this.renderTimeline" (i've called it Label):
...
var data = new google.visualization.DataTable();
data.addColumn({type: "string", id: "Label"});
data.addColumn({type: "string", id: "Name"});
data.addColumn({type: "date", id: "Start"});
data.addColumn({type: "date", id: "End"});
data.addRows(chart.data);
Second, you need to update the "processTime" function, by adding 1 to the array values (since we've increased the array size by 1):
function processTime(chart)
{
var i, data = chart.rawData;
for (i = 0; i < data.length; i++) {
data[i][2] = toDate(data[i][2]); // from data[i][1]
data[i][3] = toDate(data[i][3]); // from data[i][2]
}
return data;
}
What I'm trying to do in Angular ui-grid seems pretty common, but I'm having trouble finding anything that describes a solution.
I have a table. Like many tables the first row is really a "row header".
Now what specifically do I mean by that:
Like column headers, the values are always the same. They are not "data"
Like column headers, they are styled differently than non-header data cells to indicate that they are not "data".
You should not be able to "sort" nor "remove" the header row
Ideally, the column for the row headers is "frozen" in that it doesn't scroll
It perhaps is worth mentioning that the row header labels COME from the data as in:
{
rowHeader : "Fixed Rate",
TenYear: .02,
TwentyYear: .03
},
{
rowHeader : "Variable Rate",
TenYear: .04,
TwentyYear: .05
}
So what I'm looking for in the above example, is a table where the first column has row headers of "Fixed Rate" and "Variable Rate". The styling of that column should "look like" a header cell rather than a data cell.
Now I know that some of these things like "frezeing" and turning off sorting are available via columnDefs in gridOptions. But what I'm unclear of is if there's a way to just declare that the first column is a header, and I just get all of these things.
This seems to be a common table paradigm.
This is pretty easy with row header template. You can define your own template like below
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.columns = [{ field: 'TenYear' }, { field: 'TwentyYear' }];
var data = [{
rowHeader : "Fixed Rate",
TenYear: .02,
TwentyYear: .03
},
{
rowHeader : "Variable Rate",
TenYear: .04,
TwentyYear: .05
}]
$scope.gridOptions = {
data : data,
enableSorting: true,
columnDefs: $scope.columns,
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
var cellTemplate = 'ui-grid/selectionRowHeader'; // you could use your own template here
$scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['rowHeader']}}</div></div>"} );
}
};
}]);
Working plnkr http://plnkr.co/edit/9jZYgS3Ygaj2vhOnd2vh?p=preview
I receive data which I would like to chart. Unfortunately, it consist of records like
{
abcisse: 5,
ordonnee: 9
}
which I would like to feed into data.
The record above corresponds, in highcharts nomenclature, to
{
x: 5,
y: 9
}
Is it possible to inform highcharts that he should be looking for values of x in abcisse and for values of y in ordonnee? Or do I have to postprocess the data and create x and y entries?
You can use an array map function to convert your records to the format need my highcharts. For example, if your data is in an array called myData then you could feed your data to the series.data option using...
$('#container').highcharts({
....
series: [{
data: myData.map(function (item) {return { x: item.abcisse, y: item.ordonnee}; })
}]
...
});
I'm trying to specify column charts with objects for points. The reason for this is that I don't have to then split up the array of objects into separate arrays of categories and values.
I have tried the following, but neither works. (I'm interested in both specifying the category for columns, and specifying datetimes for x values.)
var data_1 = [
{x:new Date('2013-01-03'),y:2},
{x:new Date("2013-01-02"),y:6},
{x:new Date("2013-01-01"),y:4},
];
var data_2 = [
{category: "a", y: 3},
{category: "b", y: 3},
{category: "c", y: 4}
];
var create_chart = function(el, data){
var init_obj = {
chart: {
type: 'column'
},
series: [{
name: 'a',
data: data
}]
};
el.highcharts(init_obj);
};
create_chart($('#chart1'), data_1);
create_chart($('#chart2'), data_2);
In highcharts configuration you can set onyl one type of one xAxis. If xAxis has datetime type, you cannot use categoires. Only wayt o common both types is use two xAxis with different types.