Related
I'm getting an unexpected result using the python-dateutil rrule module and I'm wondering if this is WAI.
I'm dynamically creating the rrule using:
dtstart = datetime.date(2019, 1, 7)
until = datetime.date(2029, 11, 29)
freq = MONTHLY
byweekday=MO(2)
interval = 4
This results in the following rrule
DTSTART:20190107T000000
RRULE:FREQ=MONTHLY;INTERVAL=4;UNTIL=20291129T000000;BYDAY=+2MO
However, when generating the dates (looping on the rrule for this python module), I get the following dates:
[datetime.datetime(2019, 1, 14, 0, 0),
datetime.datetime(2019, 5, 13, 0, 0),
datetime.datetime(2019, 9, 9, 0, 0),
datetime.datetime(2020, 1, 13, 0, 0),
datetime.datetime(2020, 5, 11, 0, 0),
datetime.datetime(2020, 9, 14, 0, 0),
datetime.datetime(2021, 1, 11, 0, 0),
datetime.datetime(2021, 5, 10, 0, 0),
datetime.datetime(2021, 9, 13, 0, 0),
datetime.datetime(2022, 1, 10, 0, 0),
datetime.datetime(2022, 5, 9, 0, 0),
datetime.datetime(2022, 9, 12, 0, 0),
datetime.datetime(2023, 1, 9, 0, 0),
datetime.datetime(2023, 5, 8, 0, 0),
datetime.datetime(2023, 9, 11, 0, 0),
datetime.datetime(2024, 1, 8, 0, 0),
datetime.datetime(2024, 5, 13, 0, 0),
datetime.datetime(2024, 9, 9, 0, 0),
datetime.datetime(2025, 1, 13, 0, 0),
datetime.datetime(2025, 5, 12, 0, 0),
datetime.datetime(2025, 9, 8, 0, 0),
datetime.datetime(2026, 1, 12, 0, 0),
datetime.datetime(2026, 5, 11, 0, 0),
datetime.datetime(2026, 9, 14, 0, 0),
datetime.datetime(2027, 1, 11, 0, 0),
datetime.datetime(2027, 5, 10, 0, 0),
datetime.datetime(2027, 9, 13, 0, 0),
datetime.datetime(2028, 1, 10, 0, 0),
datetime.datetime(2028, 5, 8, 0, 0),
datetime.datetime(2028, 9, 11, 0, 0),
datetime.datetime(2029, 1, 8, 0, 0),
datetime.datetime(2029, 5, 14, 0, 0),
datetime.datetime(2029, 9, 10, 0, 0)]
Notice that the first date is offset by a week! Why is this the case? And is this a bug in the library?
Thanks,
David
It's not a bug in the library. 2019-01-14 is the first date which matches your rule (it's the 2nd Monday of January 2019). Apparently python-dateutil has chosen to not include the start date you provide, which is completely legit.
RRULE is specified in RFC 5545, which states in Section 3.8.5.3 (under "Description"):
The recurrence set generated with a "DTSTART" property
value not synchronized with the recurrence rule is undefined.
Which essentially means there is no right or wrong interpretation because the input data is "broken" if the start date doesn't match the rule.
Note, many other implementations would probably return both, your start date 2019-01-07 and the result 2019-01-14. I don't think any implementation would omit 2019-01-14, simply because it is the first date which matches the rule. It's debatable whether the start date 2019-01-07 should be in the results or not, but 2019-01-14 should definitely be in there.
In Python by_weekly code could be implemented like this.
from calendar import isleap
from datetime import datetime
from dateutil.rrule import rrule, DAILY, WEEKLY, MONTHLY
def bi_weekly(start_date=datetime.now(),count=53,interval=2):
"""
dateTImeSart = bi_weekly(datetime.strptime('2021-01-01', '%Y-%m-%d'),53)
print(dateTImeSart[0].strftime("%Y-%m-%d"))
print(dateTImeSart[1].strftime("%Y-%m-%d"))
print(dateTImeSart[50].strftime("%Y-%m-%d"))
print(dateTImeSart[51].strftime("%Y-%m-%d"))
print(dateTImeSart[52].strftime("%Y-%m-%d"))
2021-01-01
2021-01-15
2022-12-02
2022-12-16
2022-12-30
"""
# returns the datetime for an year and calculates them for 1 By weekly
return list(rrule(WEEKLY, count=count,interval=interval, dtstart=start_date))
I'm using Google Chart's stacked column chart, what i wanna achieve is to display the total on top of each column and i'm using annotation for this. As you look at the image, somehow only the annotation on the 5th column (1,307.20) is working as expected.
As i investigate , this seem like a bug of Google Chart , this bug can be explained like below
[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],
With the above data, the annotation for Feb 2015 is the only which is displayed correctly , the other 2 do not since the last value of then is 0 , when I change the last value to 1 for June and March , the annotation is displayed correctly.
Then I think of a work around is to always display the "non-zero" data on top , and here's the result:
The annotations are moved on top properly , but as you can see, it's located within the column and what i want to achieve is to move it on top of the column .
I'm stuck with this for a while , Google Documentation doesn't help much with this case. Any help would be highly appreciated
I had the same problem, some of my series had 0 as my last value so the label would show on the X Axis instead of at the top. With dynamic data it would be a real challenge to ensure the last value was never 0. #dlaliberte gave me a hint where to start with this comment:
"As a workaround, you might consider using a ComboChart with an extra
series to draw a point at the top of each column stack. You'll have to
compute the total of the other series yourself to know where to put
each point."
I found a combo chart from google's gallery and opened jsfiddle to see what I could do. I left the data mostly, but changed the series name labels and made the numbers a little simpler. Don't get caught up on the purpose of the graph the data is regardless, I just wanted to figure out how to get my annotation to the top of the graph even when the last column was 0 (https://jsfiddle.net/L5wc8rcp/1/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
That produced this graph, which is a great start:
As you can see since series 5 (our Total of the other series) is a type: 'line', so it will always point to the top of the stack. Now, I didn't necessarily want the line in my chart, since it was not used to compare continuous horizontal totals, so I updated series 5 with lineWidth: 0, and then made the title of that category '' so that it wouldn't be included in the legend as a stack (https://jsfiddle.net/Lpgty7rq/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line', lineWidth: 0}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
And Voila!
Use alwaysOutside: true.
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
}
You will want to use the annotations.alwaysOutside option:
annotations.alwaysOutside -- In Bar and Column charts, if set to true,
draws all annotations outside of the Bar/Column.
See https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
However, with a stacked chart, the annotations are currently always forced to be inside the columns. This will be fixed in the next major release.
As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point. Then make the pointSize 0, and add the annotation column after this series.
I would like to ask if I can have two independent jssor sliders in a single page. What I want to do is create 2 sliders which will act as a separate part of the page. That means that I want the animations of the 2 sliders start simultaneously.
I would appreciate any help
Thanks!
<div id="slider1_container" ...>
...
</div>
<div id="slider2_container" ...>
...
</div>
<script>
jQuery(document).ready(function ($) {
var options1 = {...};
var jssor_slider1 = new $JssorSlider$("slider1_container", options1);
var options2 = {...};
var jssor_slider2 = new $JssorSlider$("slider2_container", options2);
});
</script>
Thanks a lot for the answer.
Can I import caption transitions in the nested-slider.source.html file of the jssor pack? I build my own sliders in this file but when I add the array for the caption transitions nothing happened. What should I do in order to make slides with images and captions animations?
Have a look of my code if you want. I don't know if all of this code is necessary for me..Here is the jquery:
jQuery(document).ready(function ($) {
var nestedSliders = [];
$.each(["sliderh1_container", "sliderh2_container"], function (index, containerId) {
var nestedSliderOptions = {
$AutoPlay:true,
$PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$SlideDuration: 1000, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 200, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
}
};
nestedSliders.push(new $JssorSlider$(containerId, nestedSliderOptions));
});
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
_CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 300, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 80, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 0, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0),
$CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
$Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
$CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
$PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
$Rows: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$Cols: 3, //[Optional] Number of pieces to display, default value is 1
$Align: 0, //[Optional] The offset position to park thumbnail
$Orientation: 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
$DisableDrag: false //[Optional] Disable drag or not, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function OnMainSliderPark(currentIndex, fromIndex) {
$.each(nestedSliders, function (index, nestedSlider) {
nestedSlider.$Pause();
});
setTimeout(function () {
nestedSliders[currentIndex].$Play();
}, 2000);
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark);
OnMainSliderPark(0, 0);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 600));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
And the HTML code is here:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1280px; height: 720px; overflow: hidden; ">
<div id="slider2">
<div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 764px;
height: 720px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 764px; height: 720px;
overflow: hidden;">
<div>
<div><img u="image" src="images/logo.png" /></div>
<div u="caption" t="CLIP|LR" t2="ZML|R">test</div>
</div>
<div><img u="image" src="images/address.png" /></div>
<div><img u="image" src="images/logo.png" /></div>
<div><img u="image" src="images/address.png" /></div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
I need to generate a chart like this one:
Specifically, I want to show both a positive value and a negative value for a time period (could be an hour, minute, etc.) and display it like this.
I could have sworn I saw something like this on the Google Visualization API Gallery the other day, but I can't find it now, and am not even sure what this kind of chart is called.
First, do you know what this kind of chart is called so I can possibly find documentation? Second, is there any way to implement such a chart with the Google Visualization API? If not, is there another common charting solution for web that I can achieve this with?
Thank you for your time.
This is called a "Stacked Bar Chart", and can indeed be created with the Google Visualisation API.
Simply use the "isStacked" property (described here; http://code.google.com/apis/visualization/documentation/gallery/barchart.html).
Here's some sample code (based off the default bar chart example provided by Google and updated to show the use of isStacked and some sample data from your example);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number');
data.addColumn('number');
data.addRows(12);
data.setCell(0, 0, 'January');
data.setCell(1, 0, 'February');
data.setCell(2, 0, 'March');
data.setCell(3, 0, 'April');
data.setCell(4, 0, 'May');
data.setCell(5, 0, 'June');
data.setCell(6, 0, 'July');
data.setCell(7, 0, 'August');
data.setCell(8, 0, 'September');
data.setCell(9, 0, 'October');
data.setCell(10, 0, 'November');
data.setCell(11, 0, 'December');
data.setCell(0, 1, 19);
data.setCell(1, 1, 18);
data.setCell(2, 1, 20);
data.setCell(3, 1, 19);
data.setCell(4, 1, 18);
data.setCell(5, 1, 20);
data.setCell(6, 1, 19);
data.setCell(7, 1, 18);
data.setCell(8, 1, 20);
data.setCell(9, 1, 19);
data.setCell(10, 1, 18);
data.setCell(11, 1, 20);
data.setCell(0, 2, -12);
data.setCell(1, 2, -13);
data.setCell(2, 2, -11);
data.setCell(3, 2, -12);
data.setCell(4, 2, -13);
data.setCell(5, 2, -11);
data.setCell(6, 2, -12);
data.setCell(7, 2, -13);
data.setCell(8, 2, -11);
data.setCell(9, 2, -12);
data.setCell(10, 2, -13);
data.setCell(11, 2, -11);
data.setCell(0, 2, -12);
data.setCell(1, 2, -13);
data.setCell(2, 2, -11);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"S&P 500 Up/Down Performance Since 1980",
width:600, height:400,
isStacked:"true",
legend:"none" }
);
}
And the results...
Use ColumnChart instead of BarChart:
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
https://jsfiddle.net/0rrar9oq/16
I am creating a flex table dynamically with the following code.
for (int CurrentRow=1;CurrentRow<2;CurrentRow++)
{
Label lblGettingName = new Label("Getting Name...");
View.getMainFlex().setWidget(CurrentRow, 0, lblGettingName);
Button btnViewDetails = new Button("View Details");
View.getMainFlex().setWidget(CurrentRow, 1, btnViewDetails);
Label lblGettingBid = new Label("Getting Bid...");
View.getMainFlex().setWidget(CurrentRow, 2, lblGettingBid);
View.getMainFlex().getFlexCellFormatter().setStyleName(CurrentRow, 2, "BackNormalNotBold");
Label lblGettingBidDesription = new Label("Getting Bid Desription...");
lblGettingBidDesription.setStyleName("BidDesc");
View.getMainFlex().setWidget(CurrentRow, 3, lblGettingBidDesription);
View.getMainFlex().getCellFormatter().setWidth(CurrentRow, 3, "40");
View.getMainFlex().getFlexCellFormatter().setStylePrimaryName(CurrentRow, 3, ".BidDesc");
Label lblCalculating = new Label("Calculating..");
Label lblCalculatingTime = new Label("Calculating Time...");
View.getMainFlex().setWidget(CurrentRow, 4, lblCalculatingTime);
View.getMainFlex().getFlexCellFormatter().setStyleName(1,4, "BackNormalNotBold");
TextBox textBox = new TextBox();
View.getMainFlex().setWidget(CurrentRow+1, 3, textBox);
View.getMainFlex().getCellFormatter().setWidth(CurrentRow+1, 3, "40");
View.getMainFlex().getFlexCellFormatter().setStyleName(CurrentRow, 0, "BackNormalNotBold");
View.getMainFlex().getFlexCellFormatter().setStyleName(CurrentRow, 1, "BackNormalNotBold");
View.getMainFlex().getFlexCellFormatter().setStyleName(CurrentRow, 2, "BackNormalNotBold");
View.getMainFlex().getFlexCellFormatter().setStyleName(CurrentRow+1, 3, "BackNormalNotBold");
View.getMainFlex().getFlexCellFormatter().setRowSpan(CurrentRow, 4, 3);
View.getMainFlex().getFlexCellFormatter().setRowSpan(CurrentRow, 2, 3);
View.getMainFlex().getFlexCellFormatter().setRowSpan(CurrentRow, 1, 3);
View.getMainFlex().getFlexCellFormatter().setRowSpan(CurrentRow, 0, 3);
View.getMainFlex().getFlexCellFormatter().setColSpan(CurrentRow+1, 3, 2);
View.getMainFlex().getFlexCellFormatter().setColSpan(CurrentRow, 3, 2);
View.getMainFlex().getFlexCellFormatter().setColSpan(CurrentRow-1, 3, 2);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow, 1, HasHorizontalAlignment.ALIGN_CENTER);
View.getMainFlex().getCellFormatter().setVerticalAlignment(CurrentRow, 1, HasVerticalAlignment.ALIGN_MIDDLE);
View.getMainFlex().getCellFormatter().setVerticalAlignment(CurrentRow, 0, HasVerticalAlignment.ALIGN_MIDDLE);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow, 0, HasHorizontalAlignment.ALIGN_CENTER);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow, 2, HasHorizontalAlignment.ALIGN_CENTER);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow+1, 3, HasHorizontalAlignment.ALIGN_CENTER);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow, 3, HasHorizontalAlignment.ALIGN_CENTER);
Button btnPlaceBid = new Button("Bid!");
View.getMainFlex().setWidget(CurrentRow+2, 3, btnPlaceBid);
View.getMainFlex().getCellFormatter().setWidth(CurrentRow+2, 3, "20");
btnPlaceBid.setSize("66px", "26px");
ToggleButton tglbtnAutomate = new ToggleButton("Automate");
View.getMainFlex().setWidget(3, 4, tglbtnAutomate);
View.getMainFlex().getCellFormatter().setWidth(3, 4, "20");
tglbtnAutomate.getDownHoveringFace().setText("TurnOFF");
tglbtnAutomate.getUpHoveringFace().setText("TurnON");
tglbtnAutomate.getDownDisabledFace().setText("Enable");
tglbtnAutomate.setHTML("Auto:OFF");
tglbtnAutomate.getUpFace().setHTML("Auto:OFF");
tglbtnAutomate.getDownFace().setHTML("Auto:ON");
tglbtnAutomate.setSize("54px", "18px");
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow+2, 3, HasHorizontalAlignment.ALIGN_RIGHT);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow-1, 4, HasHorizontalAlignment.ALIGN_CENTER);
View.getMainFlex().getCellFormatter().setHorizontalAlignment(CurrentRow, 4, HasHorizontalAlignment.ALIGN_CENTER);
}
FlexTableHelper.fixRowSpan(View.getMainFlex());
When the loop executes only once, the correct layout is generated but when i try to create more than 1 row, the layout degerate
Most likely problems with flextable are caused by setRowSpan/setColSpan methods which can easily wreak havoc in layout. Instead of using those methods you can create composite widget/Html and place it in cells so Flextable will have less amount of rows/columns.
FlexTable uses old element attributes of td like width, height, align etc.
It is not yet adapted to use CSS instead even in the newest release. IE11 does no longer support <td align="..."> at all, for example.