I would like to show classic grid data in a form way. So for instance:
From (layout A):
Col A Col B Col C
Value 1 Value 2 Value 3
To (layout B):
Col A: Value 1
Col B: Value 2
Col C: Value 3
I'm developing an asp.net application with jquery mobile and i know i can create a grid with class table-stroke that automatically reflow my grid as shown in layout B.
What i'm trying to do is to 'alternate' color background for each row. But it seems it not works as i want.
When reflowed, it colorize:
Col A:... <- background White
Col B:... <- Background Gray
Col C:... <- background White
Instead, i want "Record 1" (all columns A,B,C..) color White, then, "Record 2" (all columns) color Gray..
I've used this:
/* Add alternating row stripes */
.table-stroke tbody tr:nth-child(odd) td,
.table-stroke tbody tr:nth-child(odd) th {
background-color: #F7F7F7;
}
Anyway, is there any better solutions to show data for small screen from a grid to a form style ?
Thanks
Related
I'm looking to produce a chart like this with data here
I'm trying to play with this chart on codepen
The attached data file has the following values -
1) Date
2) Open, High, Low, AdjustedClose - Plot Candlestick
3) Volume - Plot Volume
4) EMA1 & EMA2 - Plot moving averages on candlestick chart
5) macd_1, macds_1 & macdh_1 - Plot first set of MACD
6) macd_2, macds_2 & macdh_2 - Plot second set of MACD
7) macd_3, macds_3 & macdh_3 - Plot third set of MACD
The moving averages & MACD need not be calculated via javascript. It's already in the JSON data.
Need an export menu on the chart & smoothed plot of the EMA
There are 3 sets of MACD with macd, macds & macdh (histtogram) values all of which need to be on their own panels & have different positive & negative zone colours
The chart title needs to be of some colour centred at the top of chart. when we move mouseover the chart, the OHLC values & date need to be displayed
There is another field in the data called "Entry_type". When the value is "B" (Buy) a green balloon needs to be displayed below the candle & when it is "S" (Sell), a red colour needs to be display above the candle
All the plots need to be on movable panels (movable so to speak in HTML terms). The idea here is if needed then I would need to be able to keep say 2 MACD panels one below the other on left-hand side & move the third one to the right-hand side so that the actual price chart has good amount of vertical space on the page to show data clearly.
Need to set "groupData" to true, which means MACD, EMA & Volume will also need to adjust to that.
I am new to javascript charting which is making my life really hard to get all of this working. Could I please request some help to implement these features?
All you need to do is to prepare the correct data format for each series and create a separate y-axis for each pane. I have prepared a simple example with your data here:
for (i; i < dataLength; i += 1) {
date = new Date(data[i].Date).getTime();
ohlc.push([
date, // the date
data[i].Open, // open
data[i].High, // high
data[i].Low, // low
data[i].Close // close
]);
volume.push([
date, // the date
data[i].Volume // the volume
]);
if (data[i].ema_1) {
ema1.push([date, data[i].ema_1]);
}
}
Live demo: https://codesandbox.io/s/highcharts-react-d-zn9oj?file=/demo.jsx
I was hoping to be able to change the SPARKLINE colour that would go in Cell D2, depending on the values on the right-hand side.
I would also want the bar to show a relative position depending on the personal best in the range.
So for example, the person best for Scn1 is 925. This is past the Gold rank, but now quite at the diamond, therefore I would want the bar to display a gold colour. If the score was between another bracket, I would want it to display the colour of the rank that has been surpassed.
ON top of this, I would love for the bar to show a relative position depending on the person's score in a bracket. For example, if the personal best was 925, that would make the bar a Gold colour AND have the Bar cover 50% of the cell (because 925 is halfway between 900 and 950(Gold and Diamond ranks)).
Basically, the position of the bar would reset back to the left side relative to the percentage the personal best was through a rank.
Would this be possible?
cheers!
This should do it:
=SPARKLINE(
IF(C2,
IF(C2>=I2,
I2,
IFERROR(
1/(1/(C2-INDEX(
({0,E2:I2}),
MATCH(
C2,
({0,E2:I2}),
1
)
)
)),
INDEX(({0,E2:I2}),MATCH(C2,({0,E2:I2}),1)+1)-
INDEX(({0,E2:I2}),MATCH(C2,({0,E2:I2}),1))
)
),
0
),
{
"charttype","bar";
"max",IF(
C2>=I2,
I2,
INDEX(({0,E2:I2}),MATCH(C2,({0,E2:I2}),1)+1)-
INDEX(({0,E2:I2}),MATCH(C2,({0,E2:I2}),1))
);
"color1",IF(
C2>=I2,
"Green",
IF(C2<E2,"black",
INDEX(
{"Brown","Gray","Gold","Cyan","Green"},
IFNA(
MATCH(C2,E2:I2,0),
MATCH(C2,({0,E2:I2}),1)-1
)
)
)
)
})
You'll have to edit the color scheme yourself, unless you want to have another range to define the colors you want to use.
Behavior:
On boundaries, it displays 100% of the rank attained in that color.
When over max value, it saturates at 100%, and displays a saturation color.
When below min value, it displays black.
Error at <0.
I am using grid that has inside a listbox and 3 buttons below the listbox. When I maximize the window, they stay the same, while I need them to expand. I would not like to substitute grid with pack, as I am going to make layoung more complicated, which is simpler with grid. Is it somehow possible to expand a grid or make a grid work together with a pack? Thanks.
You need to do two things to have a gridded widget expand as the parent resizes. The widget should use the sticky option to specify which sides of the parent container it should adhere to. You also need to tell the parent how it should distribute space as it changes size using the grid_columnconfigure and grid_rowconfigure methods.
Here is an example of a gridded listbox. You should experiment with changing the sticky options to an empty string and to various other combinations of north, east, south and west to see what happens. Also try commenting out the grid_rowconfigure and grid_columnconfigure to see how that affects things.
import tkinter as tk
def main():
root = tk.Tk()
listbox = tk.Listbox(root)
listbox.grid(sticky='NEWS')
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
root.mainloop()
if __name__ == '__main__':
main()
To illustrate how this can work with some extra widgets, here is another sample with buttons on the top right. The listbox now spans 3 rows and the third row (row 2) is set to get the additional space on resizing so that the buttons do not spread out.
import tkinter as tk
import tkinter.ttk as ttk
def main():
root = tk.Tk()
listbox = tk.Listbox(root)
listbox.grid(column=0, row=0, rowspan=3, sticky='NEWS')
buttonOne = ttk.Button(root, text="One")
buttonOne.grid(column=1, row=0, sticky='NE')
buttonTwo = ttk.Button(root, text="Two")
buttonTwo.grid(column=1, row=1, sticky='NE')
root.grid_rowconfigure(2, weight=1)
root.grid_columnconfigure(0, weight=1)
root.mainloop()
if __name__ == '__main__':
main()
When having problems with widgets not growing or shrinking properly with grid, it's usually because of one or both of the following factors:
the widget hasn't been told to "stick" to the sides of the space given to it
the master hasn't been told how to allocate extra space
The first problem can be solved with using the sticky option to grid. For example:
grid .listbox -row 0 -column 0 -sticky nsew
The second problem has to do with how grid allocates extra space. By default it will leave extra space unused. It does this by allocating extra space based on a row or columns weight, which defaults to 0 (zero).
By giving a row or column a positive weight, you are asking tk to give extra space to that row and/or that column. The amount it gets is proportional to its weight. For example, if one row has a weight of one and another has a weight of two, the one with a weight of two will get twice as much of the extra space as the other row.
As a rule of thumb when using grid, always give at least one row and one column a non-zero weight so that any extra space will get used.
Here's a complete example. Run the code and resize the window to see how everything grows and shrinks. Next, comment out the final four lines and run it again to see the effect that weight has. You might also want to experiment with setting the weight on only the middle column.
package require Tk
listbox .lb
button .b1 -text "Button 1"
button .b2 -text "Button 1"
button .b3 -text "Button 1"
grid .lb -row 0 -column 0 -columnspan 3 -sticky nsew
grid .b1 -row 1 -column 0
grid .b2 -row 1 -column 1
grid .b3 -row 1 -column 2
grid rowconfigure . 0 -weight 1
grid columnconfigure . 0 -weight 1
grid columnconfigure . 1 -weight 1
grid columnconfigure . 2 -weight 1
This is an angular2 app (2.4.8), webpack using highcharts.
I am updating the chart with minute bars from the database. I make timed calls to the database, then with the array returned (it maybe just 1 row, it maybe more, depending if data is keeping up). Below, 'x' is the array returned.
for (let i of x) {
let point = [new Date(i.DateTime).valueOf(), i.OpeningPrice,
i.HighPrice, i.LowPrice, i.ClosingPrice];
this.chart.get('sA0').addPoint(point, true);
}
The problem of a single bar indicating both up and down trend, as seen in my screenshot, the one bar has green on top & red below.
I'm trying to create a row editor.
When using the default example code for the grid link, when I'm styling my element im not able to do width: 100% the td the element is appended onto has the correct colspan in my case 6 but the width of the element is no where near the width of the 6 columns. The width feels more like one column.
Can you set display: flex for the row details for it to take full space? You can find an example here: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/other.html