I am using Quasar and Electron and producing PDFs with jsPDF and also using autotable. Love it so far, gives me a lot of control.
I need to place a box inside a cell/row. I can get a box to appear on the PDF but sticking it into the needed cell is eluding me. I've been googling and don't really understand all the details.
As you can see the little black box is on the top left, and I need a box inside each column where I've drawn the little red boxes.
does the data.row.index correspond to the 0 columns? It needs to skip the first few rows that are just rowSpan for the title areas. I do not have column keys defined... is that necessary? I've been looking at the autotable examples and trying to understand the details but the documentation isn't as elaborate as needed by a newbie such as myself.
My data is pulled from an array that's built from a database.
I will continue to Google and see if I can figure it out but would love help. Thanks.
this.doc.autoTable({
head: headers,
body: this.tableRows,
theme: 'plain',
didDrawCell: (data) => {
if (data.row.index === 0 && data.row.section === 'body') {
this.doc.rect(20, 20, 3, 3, 'F') // empty square
}
}
})
Related
I know this can be done in d3 Sankey but I don't need anything that complex. I have my Highcharts sankey complete and all my formatting is done, save one thing.
The chart renders aligned along the centerline. I'd like to set it so that the entire sankey diagram is flat against the top border of the frame.
The first node will be flat against the top, and all other nodes and links will flow down from that point. I've searched here and on the Highcharts support sites, read the APIs, and consulted The Google but I have not turned up anything.
Since this is purely aesthetic it's not a showstopper if I can't do it but since I've now seen it done in d3, I'm hoping there is a Highcharts equivalent.
Thank you
See diagram for reference (ignore colors and link weights of course)see illustration
I've slightly edited the core code and achieved the desired result.
Live working example: http://jsfiddle.net/kkulig/dzdsjwbs/
I've overwritten Highcharts.seriesTypes.sankey.prototype.translate function and commented out two lines in these two code fragments:
1.
fromNodeTop = (
//column.top(factor) +
column.offset(node, factor)
),
2.
toY = (
//toColTop +
(toNode.offset(point, 'linksTo') * factor) +
nodeColumns[toNode.column].offset(
toNode,
factor
)
),
In my application, I'm using ui-grid to display two column: name and description.
Description column can have around 500char. Currently ui-grid is trimming the description text using "ellipse". I want whole description should be displayed in a single line. I dont mind if horizontal scrollbar come. How to do this?
You can add the "width" parameter in your columnDefs.
$scope.myGrid.columnDefs = [
{ name:'name', width: 100},
{ name:'description', width: 1000}
];
http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef#properties_width
EDIT : You can try adding up the "width: '*'" option. I know it didn't work for me, on my side, but I am not using the most up-to-date version of UI-Grid, so it might only work on a more recent version than the one I use.
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
I recently inherited a project that makes extensive use of Kendo charts, with a request to add some information to column labels. The labels currently contain an integer and a percentage, and the revision would add an additional percentage value. Since the labels are getting a little long, they need to be split across multiple lines.
So a column label that currently reads:
3, 0.00%
would now read
3
0.00%
9.99%
The code is arranged MVC style, so the code determining each label looks similar to the following:
.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)
.Template("#= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#"))
.Tooltip(t => t.Template("#=series.name#: #= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#").Visible(true));
It seems like this should be a simple thing, but I can't find the syntax for properly working line breaks into the labels. Kendo does seem to attempt to interpret <br /> entries, but these disrupt the flow of the chart and cause all following label values to be displayed below the entire chart rather than in place just above the column. Some forum posts I have searched assert that this is not currently possible in Kendo, but also mention that it 'will be possible in 2014' (most of these are older posts though, and since I don't know much about kendo, I could be misunderstanding which labels they are referring to).
Can anyone provide me with the proper syntax for inserting a line break into this type of label (from code) or a possible workaround if the functionality is not currently supported?
Thank you!
UPDATE
I have found the <tspan> workaround, which does help a little but still looks pretty bad since my charts are resized dynamically with the page (so, for a stacked bar chart, the widths and starting positions of each column are not static). The <tspan> tag respects the y coordinate of each label but not its x coordinate, so that has to be set individually for each column; if left unset, the labels for all columns will appear at the leftmost side of the chart where the y axis values are. Since the charts are dynamic, there is no "correct" static value to put there and I have been unable to find a way to fetch a column's starting position from within the template code. Is there any way to correct this such that the <tspan> workaround becomes a viable option?
(Workaround found here)
From 2014-Q2 versions, Telerik / KendoUI finaly implemented the \n
See the documentation:
The text can be split into multiple lines by using line feed characters ("\n").
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text
long shot question here!
My chart has 3 views, in one of the views it shows the days of the month (1-31 etc)
My client wants to the highlight the Y-axis gridLines of days that are weekends, to be a darker color.
The other caveat is, I can't specify the stylistically different gridLines when creating the graph, only when I redraw the graph.
(Because this view isn't the initially view and I am redrawing me graph as the user navigates through the views.
ATM between redraws I am removing the old series, adding a new one, changing the chart title etc
Does anyone know how to do this?
While I think that #mg1075's solution of using the plot bands is the best way of doing this, if you wanted to get really crazy you can modify the gridlines through the dom. For example, make every other line red:
$.each($('.highcharts-grid path'),
function(i, elem) {
if (i % 2 != 0)
{
$(elem).attr('stroke','red');
}
});
});
Fiddle here.