I'm having a chart build with ChartJS. On click, I need to update value and increase certain value and modify displayed colors. What I get in the console is - value gets updated, but It doesn't change color and value in tooltip doesn't change?
tooltipTemplate: '<span class="val"><%= value %>%</span> <span class="desc"><%= label %></span>'
Here's an inline link to jsfiddle
And after the third click, everything fails.
Related
I am using QTreeWidget. Each QTreeWidgetItem in this QTreeWidget has its own status, I wanted to display this status by adding to all items second column with symbol ⬤, and after that, just change the text color for this column for particular element, when its status will change. But in my QTreeWidget, items are selectable. When QTreeWidgetItem is selected, it changes background color as specified in my stylesheet: QTreeWidget::item:selected { background-color: red; }. But this is also changing the text color of the selected item. This seems strange because by default selected items changes only it's background color, but when you provide background-color with stylesheet it also changes text color.
Is it possible to leave the text color unchanged in this situation?
I have discovered that this behavior was caused by QPalette. It has QPalette::HightlightedText color which is set, when QTreeWidgetItem is selected.
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);
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.
Is it possible to make a bar chart a double y-axis?
I have a bar chart with 4 bars, generated by the query, returning 4 rows.
Is there a way for me to make each bar a different color and on the right-hand side, instead of series name, specify colors along with labels for each bar?
Click on one of the chart series and look for the 'Assign to Y-Axis' attribute
Not how this is next to a 'Color' attribute. You can source this colour from your SQL, substituting your value using the using &COLUMN_ALIAS. syntax.
An example from the sample charts application in the linked form post shows how colour can be row based (with column alias adjusted to match my screenshot)
select a.product_name,
b.quantity,
b.customer,
-- This is the column you're looking for
case when b.quantity > 50 then 'gold'
when b.quantity <= 30 then 'red'
when b.quantity > 30 then 'green'
else 'blue'
end as colour
from eba_demo_chart_products a, eba_demo_chart_orders b
where a.product_id = b.product_id
and customer = 'Store A'
I have a table component, which receives a model what i call content.
{{my-table content=model }}
This model get sorted into a computed property (CP).
multiSort: Ember.computed.sort('content','sortProperitsWithOrders')
I loop through the multiSort and pass each row to the a row component
{{#each row in multiSort}}
{{my-table-row row=row columns=columns}}
{{/each}}
In each row I have a checkbox component. If it changes, an action is sent up to its parent component (the row component). From the row I send the action further to the table component (action up), where I toggle the row's active property.
The problem: after I use sort, the row lose its active property, and the checkbox is unchecked. Check a checkbox then hit the header of a column.
I would think Ember.compute.sort takes the content and rearrange it based on sortProperitsWithOrders. So if I set the active property on one of the content's item, then I will have it in the multiSort CP. From multiSort it will pass down to the row component, and from the row to the checkbox (data down).
JsBin: http://jsbin.com/mojuquhawo/1/edit?html,js,output
You will find that a new instance of MyTableRowComponent is created for each row each time you sort. When this happens the active property (which originates from MyTableRowComponent) is set to its initial value of false.
See example JSBin showing a new component being created on each sort - look at the console logging.
You need somewhere to store the active property where it persists - the Customer model seems like the most appropriate place.
Also I notice that MyCheckboxComponent is not extending from Ember.Checkbox - instead it's using an Ember.Component - this will likely cause issues as well.