I have a page with a couple of Shield UI Charts, showing different cross currencies forex rates. The type of the charts is line, in case that would make any difference. When I click on a chart’s legend and hide the series it works. However on the next refresh the chart’s data pops up again and the series I just turned off are on again. Is there a workaround this behavior?
One easy way I can think of is to add a checkbox in each of the charts containers let’s say an initially non checked checkbox element. Something like that:
<input type=checkbox id="Chart_A">Hide Chart</input>
Than, when the refresh function is called simply check whether the checkbox is on or off and show the chart accordingly.
Related
I want to implement a function by React Material UI Autocomplete.
This is the document I have checked: https://mui.com/material-ui/react-autocomplete/
The function I am trying to develop is that a user can select multiple values from the autocomplete list, which are displayed as chips just like the example in the document above.
The advanced part is, for example, a chip can be displayed in red color as default, and when a user clicks the chip, it can become blue color. That is, A User can control every chip's state by clicking on those chips to achieve toggling function.
For example, a user selects "Tea", "Baseball", and "Pencil" from the Multiple values autocomplete list, then "Tea", "Baseball" and "Pencil" are displayed red color initially. When the user clicks on the "Tea" chip, it can become blue color while "Baseball" and "Pencil" remain red. Next, when the user clicks on the "Tea" chip again, it can become back to red color again while "Baseball" and "Pencil" remain red. Moreover, I want to get every chips' current color state also.
I read the document for quite a long time, but still have no idea how to implement stateful multiple values autocomplete component.
Thanks for the help from all of you.
Managing colors in itself isn't complex. But the functionality you want regarding maintaining which chips are selected after user enters in drop down isn't provided by this component. What you want is a list to be populated based on the values user enters in the dropdown. They should show up as chips in red and only once user clicks on them they should be turned to blue (hence finally selected). If you will look closely at that component, this feature isn't there.
You need some other alternative or you would need to make a custom component. You can check this component and try for a custom implementation. https://mui.com/material-ui/react-chip/
I want to basically know if I am having rows selected to activate an input, the thing is
"selectionChange" event is not capturing when the selection is being changed I have a small example.
https://codesandbox.io/s/ag-grid-react-redux-events-forked-459v6?file=/index.js
What id expect to happen is to get the alert to show when something is selected on this example.
Turns out in React this property is onSelectionChange, following react pattern
I have a times series graph in Google with drill down options for the date fields as well as two custom fields. When I go into view or edit mode and hover over my graph to select custom metrics, they are not showing up.
My time series graph
Settings for my graph
Some of my other times series and graphs on the same page have optional metrics that show up when I hover over them. All the other graphs in my report don't have this problem.
Things I have tried.
Refreshing Data Source
Refreshing the page
Enabling and re enabling the custom metrics
I'm not sure what else to do as I am still somewhat new to using this tool. Any hints would be much appreciated!
A couple of reasons:
1) Text Box
One possibility is that the Text Box may be ordered ahead of the Time Series Chart, thus blocking the top of the chart (Right click on the Text Box and set the Order to Send to back), however, when the chart is selected, it should show, thus #2 should do the trick:
2) Chart Header
It may be currently set to Do not show; it can be changed by heading to the Style Tab of the respective chart, scrolling down till the Chart Header section and selecting Show on hover from the drop-down.
Google Data Studio Report and a GIF to elaborate:
Is it possible to download chart with additional data?
For example add labels when chart.download() method is called, I want these labels to be visible on download result (.png image), but not in rendered view.
I have label described in chart component, with property: hidden:true.
I've dived deep in Ext.draw.Container source code, but still have no clue about how to resolve the mentioned case.
Yes, but you will have to render two charts: Visible and "Invisible". In the following example I have two charts, the first one is visible, the second one is located below (You cannot see it because the scrolling is off). On clicking the Prevoew or Download button the "invisible" chart's .preview() and .download() methods are called.
FIDDLE
P.S.
Code is not clean, it is just the proof of concept.
I got two questions about ShieldUI grid component.
Q1. when editing is enabled, you need to click cell to toggle edit/display mode. Is it possible to make it always showing editor component?
Q2. When I attach ShieldUI components like numeric text box or date picker to ColumnTemplate, no matter how I change the value in custom UI component. It doesn't sync the value showing in the component back to data source in the Grid. Do you know the solution for my above issues?
Thanks.