I have this interactive chart here. As its data change depending on selected time period I wish to set the date range from Nov-10 to Jul-14, no matter the data. I know that I must use overrideMax on x axis, but I can't make it to work. I guess it's a matter of date formatting. Every single combination I've tried gives the following as result.
What is the right formatting? Thanks a lot.
EDIT: Thank you very much on your quick response, John. Now it is working. I'm loving Dimple more and more!
I have another question regarding this chart. Is there any way to arrange drawing order of series? I would like 'Previsión' to be sent to back. Now it is drawn depending on time period.
EDIT 2: Based on this other question I think I figured out a solution. With a 50ms delay after the chart is drawn I simple erase the circles and paths I wish to be at the front and then append them to the chart svg object.
setTimeout(function () {
var datoCircles = svg.selectAll('circle[id*=Dato]:not([id*=futuro])');
var prevCircles = svg.selectAll('circle[id*=Prev]');
var prevPaths = svg.selectAll('path[class*=Prev]');
datoCircles.remove();
prevCircles.remove();
prevPaths.remove();
// Convertimos la seleción d3 a objetos jQuery
$(svg.selectAll('svg > g')[0])
.append($(prevPaths[0]))
.append($(prevCircles[0]))
.append($(datoCircles[0]));
}, 50);
They need to be set with JavaScript date objects, as native date parsing in JavaScript causes cross browser problems, I recommend using the d3 method:
x.overrideMax = d3.time.format("%Y-%m-%d").parse("2014-05-09");
With this approach you can use whichever date format suits you.
Related
I'm trying to input a date string formatted mm/dd/yyyy into a Kendo React DatePicker control using nightwatch setValue. It seems that no matter what approach I take to select the control it always sets the cursor on the year portion first and typing then only fills in those four characters.
(For example if I provide '05/06/2016', all I see typed into the input is 'mm/dd/0016' and month and day never update.)
The control seems to work fine in a normal scenario if I click with the mouse on the month field, the cursor will display there and if I type 2 characters, a / 2 more characters another / and then the last 4 the control is working properly. It just seems to be an issue with selenium selecting the control and DatePickers default behavior.
I've tried using browser.Key.LEFT_ARROW to see if I could move the cursor left twice first since the accessibility handling allows for it. I also tried calling clearValue() on the input first then typing from scratch but no success on either case.
I would rather not have select the date using the calendar control if I can avoid it.
Here's what my code looks like currently:
const consumerInfo = {
birthMonth: "05",
birthDay: "06",
birthYear: "2016",
birthDate: "05/06/2016",
};
const datePickerSelector = '.myDatePicker';
const datePickerInputSelector = '.myDatePicker .k-input';
browser.waitForElementVisible(datePickerSelector, DEFAULT_WAIT_TIME)
.waitForElementVisible(datePickerInputSelector, DEFAULT_WAIT_TIME)
.setValue('.myDatePicker .k-input, [
consumerInfo.birthYear,
browser.Keys.LEFT_ARROW,
consumerInfo.birthDay,
browser.Keys.LEFT_ARROW,
consumerInfo.birthMonth,
])
.assert.value(
datePickerInputSelector,
consumerInfo.birthDate,
`Birthdate is set to ${consumerInfo.birthDate}`
);
Any suggestions are appreciated.
While not perfect I came up with a solution so hopefully it helps some others should this come up.
The approach ended up being roughly similar to what I proposed above but allowing more time between each operation. I added it into a util function that accepts the selector to target the input control with along with the month/day/year to fill in the control with. It's possible the time intervals can be reduced in places to less than 500ms but without more exhausted testing that was better than 1000ms (which worked) and 100ms (which inconsistently worked).
See below:
const toDatePickerInsertion = (browser, pickerInputSelector) => ({
month,
day,
year,
}) => {
return browser
.click(pickerInputSelector)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(month)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(day)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(year);
};
My colleague and I am designing a survey using Qualtrics. On one page respondents must move a series of sliders.
We need to display the output of a function of the values of the sliders on the same page, ideally also in the form of another slider.
All of this must be done while the respondent moves the sliders.
Concretely, suppose the following:
value of slider 1 = 30;
value of slider 2 = 10;
value of slider 3 = 0
Output to be displayed = 30 x 20 + 10 x 5 + 0 x 15 = 650
where the 20, 5 and 15 are just arbitrary constants in the background.
If the user were to move slider 1 to 31, the displayed output should automatically update in real time to 670.
Any tip on how this is done? We're newbies to qualtrics and completely inexperienced with Java, so we'd be very grateful to anyone willing to provide us with working code. Thanks!
An update on my question, and a clarification after a comment received.
We were of course not asking for someone else to do our job. Just for a pointer in the right direction.
Based on an answer to a different question, I've managed to put this javascript together. It works, which is encouraging..
Code follows.
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var that=this.questionId;
jQuery("<p style='width:100%'><br><strong> Output <span id='OUT'>0</span></strong>").insertAfter("table.sliderGrid");
jQuery(document).on('change', function(){
var firstslider=parseInt(jQuery("[id='"+that+"~1~result']").val());
var secondslider=parseInt(jQuery("[id='"+that+"~2~result']").val());
var N=firstlider+secondslider*2;
jQuery("#OUT").text(N);
});
Does anyone have any experience with using a url to target a specific slide in a Soliloquy slider? I am using multiple sliders that I need to link to specific slides of from external pages/sites. The Soliloquy Docs provide this info (soliloquywp.com/docs/dynamically-set-the-starting-slide/) as closest to the solution but, for a php noob like me, the explanation is a bit terse and lacking, my fault, not theirs.
The example given in the docs seems to be a custom filter for a specific slide in a specific slider. I need to target slides in multiple sliders with urls. I guess I need help understanding the filter's function. I have commented out what I think each part does. Maybe someone could show me where I'm wrong?
//OP: I don't understand, what ids/slides are represented by the 10 and 2 values in these parameters. Where do I find these?
add_filter( 'soliloquy_pre_data', 'tgm_soliloquy_dynamic_starting_slide', 10, 2 );
function tgm_soliloquy_dynamic_starting_slide( $data, $slider_id ) {
// If the proper $_GET parameter is not set or is not the proper slider ID, do nothing.
//OP: Is the 'sol_slide' parameter for ALL soliloquy sliders in my site or is it the name in the Dashboard given when constructing the slider?
if ( empty( $_GET['sol_slide'] ) ) {
return $data;
}
// Change this if you want to target a specific slider ID, or remove altogether if you want this for all sliders.
//OP: I believe to target ALL sliders in my site I should comment this out. Right?
if ( 51064 !== $slider_id ) {
return $data;
}
// Set the slide number as a config property. Also preventing randomizing slides.
$data['config']['start'] = absint( $_GET['sol_slide'] );
$data['config']['random'] = 0;
// Optionally prevent autostarting the slider. Uncomment if you want that.
//$data['config']['auto'] = 0;
return $data;
}
Basically, I guess I am asking for a little help with implementing this filter to target any slide in any slider with a url. Slim odds, but I'm dead in the water! Big thanks to anyone who can shed some light on this for me.
Complete, correctly functioning answer is here provided the plugin author, of course, duh: http://soliloquywp.com/support/topic/a-way-to-link-directly-to-a-specific-slide/
The value "sol_slide" is generic to any slider created with the plugin. Just put the custom filter provided in the example into your, hopefully, child-theme's functions.php, and construct your urls targeting specific slides like so: http://mywebsite.com/specific-product-page-with-slider/?sol_slide=3. Slide numbering is based on zero so 1 = 2 etc. Works like a charm.
Good Day To All
I'm new to pCharts, works great!
I'm trying to create a bar chart with 2 thresholds and display different bar colors. Setting the thresholds is done and works well. Now I would like to set the standard palette to a set color and only the bars that exceed the specified second threshold should be a different color.
My data consists of times file were imported
So in theory, if possible, all bars exceeding the 2nd limit should be red or pink or whatever.
Is this possible? If so, where do I start fiddling?
I have tried OverideColors with an if statement but it seems not to work so well.
Any info would be very helpful.
Thanks
Ok, so here is the code. I know there might be better or cleaner ways of doing it but this works:
/*Palette per Bar*/
$thold = strtotime("09:30:00");
foreach ($lastdate as $over) {
if ($over < $thold) {
$color = array("R"=>0,"G"=>204,"B"=>204);
$Palette[] = $color;
}
else {
$color2 = array("R"=>224,"G"=>46,"B"=>117);
$Palette[] = $color2;
}
}
Hope this helps
Having trouble spider charting with only one series.
I tried working off this example:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_spidersingle.html
And set that up here:
http://jsfiddle.net/mstefanko/FHnwd/72/
Firebug is throwing:
Unexpected value NaN parsing cy attribute.
I'm completely new to the dojo toolkit. I know I need to addAxis, but it doesn't look like the code from the top URL is working. The axis is starting and ending at the same number despite my trying to set min/max.
Any help is appreciated!
Problem has to do with spider charts figuring out the min/max of the axis on it's own. Even when I was using:
chart1.addAxis("Answer 3", { type: "Base", min: 0, max: 250 });
to set the min and max, the spider chart still bombed with only one series.
After playing around with the information in this ticket:
http://bugs.dojotoolkit.org/ticket/14583
I still wasn't able to get this working, I stumbled onto an answer here that basically said as a workaround add series for min and max then remove them after render. So thats exactly what I ended up doing.
chart.render();
chart.removeSeries("min");
chart.removeSeries("max");
Demonstrated here:
http://jsfiddle.net/FHnwd/90/