fiddle of where I'm at so far
I'm using chart.js, and I'm trying to create a legend that is inside the chart, and not a separate piece of html. I see a lot of posts about legendCallback, but that seems like it only works if you want the legend to be in an html block, and not a part of your canvas that chart.js renders on.
I need this to be all on the canvas, underneath the "Title" that I've place on the chart myself. The dates are my chart labels, the "Title" is a dataset where only the middle piece of data is set to visible, and the dashed line is my fifth dataset.
I'm preventing the title and dashed line datasets from showing up in the legend with this
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('hide');
}
}
}
Further, I'd like my legends to look more like their lines:
If it's not possible to make custom shapes like that, is there any way to fill the rectangles in the legends, without changing the fill of my data points?
Edit: Sorry for the wonky variable declaration at the top, it's because this script get's transformed into a scirban template.
Related
I am trying to create a clustered bar chart in PowerBI Desktop, where only the N "tallest" bars are displayed.
My dataset consists of a small number of rows but a large number of columns.
I have tried the following:
Transform the table in absolute values (since I am interested in bar height, not negative/postive strictly)
Try to apply the "top N" filter on the axis datafield
However, nothing happens. The chart currently looks like this (without applying the transformation of the absolute value): Clustered bar chart
I basically want the same chart, but only display the N tallest bars.
You might have to pivot your table, so you have a "column name" field and a "value" field.
Then you need to use the TOP N on the Legend field, like this:
Filters:
Result:
I am using Oracle APEX 19.1.0.00.15 and I have a question regarding tooltips for a stacked bar chart. I have created a stacked bar chart that consists of three series, but I would only like for the tooltip to be rendered for two of the series. I see that there is an option in the chart's Attributes section to hide or show the tooltip for the chart as a whole, but not for individual series within the chart. I have tried to find the relevant JavaScript for the tooltip in the Oracle JavaScript Extension Toolkit API Reference http://https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html but I was not able to find anything useful. Does anyone have any advice for how to achieve this?
Thank you.
You need to set shortDesc attribute for each item of the series to an empty string.
You can do that in initialization phase using the following code:
function( options ){
options.dataFilter = function( data ) {
var l_items = data.series[ 0 ].items
for (var i=0; i<l_items.length; i++) {
l_items[i].shortDesc = "";
}
return data;
};
return options;
}
The above code will disable tooltip for the items of the first series.
I have a horizontal bar chart that is too tall for the page (i.e. the user has to scroll down to see the full chart) and there is only 4 bars on the chart.
I can reduce the widths of the bars successfully, by using either barThickness or category and bar percentage. The problem is this does not reduce the overall height of the chart, as it just creates more space between each bar.
How do I reduce the width of the bar AND the overall chart, so the user does not have to scroll?
Thanks
Set the height of the chart canvas element, either by specifying it directly in the canvas tag or by specifying max-height in CSS.
Relevant links:
https://www.chartjs.org/docs/latest/#creating-a-chart
Setting width and height
I managed to fix it, using a suggestion from another post. In the following code snippet, I added the line that set the canvas height:-
$("#dvChart5").html("");
var canvas = document.createElement('canvas');
canvas.height = 100;
$("#dvChart5")[0].appendChild(canvas);
I have a interactive grid, made from a full join on the title from the table wwv_flow_qb_saved_query and apex_collection. The result looks like this:
The first three columns are the queries built with the query builder from the wwv_flow_qb_saved_query. The last three columns are from an uploaded query to the apex_collections. The column "qb_sql" is a clob filled with the whole sql statement from the query, which looks in the single row view like this:
Now the end user should be able to see the differences in the column group "imported queries" => "qb_sql" with different colors. So that the part, that is different in the second qb_sql is for example red.
Is there any possibility to achieve this?
Thanks..
In grid view you can give all the cells in a column a special class using the declarative attribute Appearance: CSS Classes. But this does not apply to single row view.
The attribute Advanced: CSS Classes applies just to the editable field. Which is the same in both grid and single row view.
There is an advanced column option property, fieldCssClasses, that applies to the field in single row view. So for each of the fields/columns you want to look different add this to the Advanced: JavaScript Code attribute:
function(config) {
config.defaultGridColumnOptions = {
fieldCssClasses: "special"
}
return config;
}
Then add a CSS rule for .special to the page attribute CSS: Inline or add the rule to your application css file if you have one. For example:
.special {
font-weight: bold;
color: green;
}
Use whatever name you like for the css class; "special" is just an example.
I have a GridView that displays data in up to 30 columns. Sometimes this has the effect that the gridview expand to a width that requre a horizontal scrollbar but not always. The length of the data in the columns also vary and I don't want to set a specific width, it's nice that the grid is small if half of the columns are empty.
The problem is when I enter edit mode, labels gets replaced by textboxes and those take up more width and the whole table resizes itself.
Is there any way I can keep the item template and it's labels without a fixed size but at the same time always make sure the edit template will have the same size.
I was thinking about something like this:
On "enter edit mode event"
EditTemplateTextBox.Width = CurrentItemTemplate.Width;
I was able to keep my GridView from resizing when switched to edit mode (except for the new "Update" and "Cancel" columns that get added) using this CSS:
table input
{
width: 95%;
}
You can use 100% if you want, but 95% gave a little bit of spacing between the cells.
Also, if you have other tables on the page that you don't want to be affected by this, give your GridView a CssClass and replace 'table' with the name of your css class like so:
<asp:GridView ... CssClass="myGridView">
.myGridView input
{
width: 95%;
}