I'm using a lineChart to show created date (one field in my data), it works fine and I can select, but I need a more precise filter: only for items created today, this week, last week, this month, last month
Is there already an example of how it's done? I'm struggling on how to apply a daterange filter
Since this question comes up now and then and it would be nice to have a decent example, I went back to NorthSide's question from a while back and fixed up the fiddle.
dc.js - add drop down to select date range
We'll define a second time dimension so that the charts are affected by it.
In this example we set the number of days as the option value, and then use that to calculate the date:
<select id="myDropDown">
<option value="Infinity">All</option>
<option value='30'>30 days</option>
<option value='7'>7 days</option>
<option value="2">Top 2 day</option>
<option value="5">Top 5 day</option>
</select>
d3.select('#myDropDown').on('change', function(){
var nd = new Date(now);
nd.setDate(nd.getDate() - +this.value);
filterDimension.filterRange([nd, now]);
dc.redrawAll();
});
http://jsfiddle.net/gordonwoodhull/400wd2nd/16/
There are more intelligent ways to calculate a month back and so on, but hopefully this is enough to get you started.
I added a feature to be able to select the current day, current week or
current month:
d3.select('#date_select').on('change', function(){
var nd = new Date(), now = new Date();
switch (this.value) {
case "today":
nd = d3.time.day(now);
break;
case "week":
nd = d3.time.monday(now);
break;
case "month":
nd = d3.time.month(now);
break;
default:
nd.setDate(nd.getDate() - +this.value);
}
dim.filterAll();
dim.filterRange([nd, now]);
//did not work graph.replaceFilter(dc.RangedFilter(nd, now));
graph.redrawGroup();
});
and the html being:
<select id="date_select">
<option value="Infinity">All</option>
<option value="today">Today</option>
<option value='1'>last 24 hours</option>
<option value="week">This week</option>
<option value="month">This month</option>
<option value='30'>last 30 days</option>
<option value='90'>last 90 days</option>
</select>
Related
I have two select option fields--one with the ID of determined and the other vehicle_type. Determined has 4 options--2 of which should disable the options in the vehicle_type select field. In the console, I see the disabled attribute being added, but because of Livewire, is immediately removed. Any way of persisting my changes and force Livewire not to send updates to the server?
<select wire:model="determined" id="determined"
name="determined">
<option selected value>Please Select</option>
<option value="0">Published HP Figure (DIN)</option>
<option value="1">Measured with Dynojet+Dyno</option>
<option value="2">Measured with Mustang Dyno</option>
<option value="3">Measured with Engine Dynamometer Cell</option>
</select>
<select wire:model="vehicle_type" id="vehicle_type"
name="vehicle_type">
<option selected value>Please Select</option>
<option value="0">Stick shift and 2WD vehicle</option>
<option value="1">Automatic or 4WD Drive</option>
</select>
#push('scripts')
$(document).ready(function() {
$('#determined').on("change", function() {
const dis = $(this).val() == 0 || $(this).val() == 3;
$("#vehicle_type option").prop("disabled",dis)
});
});
#endpush
Use .defer on the wire:model to prevent Livewire from making an ajax request immediately and re-render the component.
<select wire:model.defer="determined" id="determined" name="determined">
<option selected value>Please Select</option>
<option value="0">Published HP Figure (DIN)</option>
<option value="1">Measured with Dynojet+Dyno</option>
<option value="2">Measured with Mustang Dyno</option>
<option value="3">Measured with Engine Dynamometer Cell</option>
</select>
Is it possible to send value from options on example like this where x need to be value from option. This select im using on partial and ajax works with manualy added value as x. THX!
<select data-request-data = "id: x " class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
Just give your select a name, an unique name.
name="some_unique_name"
<select name="my_super_special_name_for_select" class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
Then when you change the value the value of the field is sent along in post
The result of:
public function onChangeValue()
{
traceLog(post());
}
In the log you will see then a result corresponding to
["my_super_special_name_for_select" => 5 ]
So you can fetch it with post('my_super_special_name_for_select') or whatever name you have given the select element to get the value.
public function onChangeValue()
{
$id = post('my_super_special_name_for_select');
}
Yes you can send value from select. But for this you will need to put it inside a form and then call data request on it. Value will be sent as part of post(). It can't be sent dynamically like the way you are using. if you can elaborate your external conditions more I can suggest other solutions too.
Is there a way to use a where statement in a view?
In the second select input, I want to list all the makes of vehicles in the previously selected year.
<select data-placeholder=" Year" class="chzn-select year" style="width:70px;" tabindex="1" id="year">
<option value=""></option>
#foreach($data['vehicle_years'] as $vehicle)
<option value="{{ $vehicle->year }}">{{ $vehicle->year }}</option>
#endforeach
</select>
<select data-placeholder=" Year" class="chzn-select year" style="width:70px;" tabindex="1" id="year">
<option value=""></option>
#foreach($data['vehicle_makes'] as $vehicle)
<option value="{{ $vehicle->make }}">{{ $vehicle->make }}</option>
#endforeach
</select>
So maybe something along the lines of:
{{ $vehicle->make->where(...) }}
Yes, you can use where() anywhere in a blade in this way:
{{ $vehicle->where('make', $make)->get() }}
But, if you come up with using eloquent in a view, it means there is something wrong in code design. Here are some suggestions:
After the first select is selected by the user, you need to reload the page with selected make, then, you can use it in where() statement in the code design you have now. If there will be no reload, you cannot state what to put in where(). If you will reload the page, then, actually you do not need to use where() in blade..
If you are panning to use the where() in a loop in view, it is better to load all "vehicles and makes" in the controller (if number of items is not too big), and use them (you may need some js)
Alternatively, you may use AJAX to get list of "make" after the vehicle is selected, as it is mentioned in comments.
!!You should not have both selects as the same ID!!
Remember that PHP code is being generated on the backend before it is sent to the client, so it's not possible to use blade to supply a dynamic list unless you are using AJAX to call a new list based on the year and replace the old one. This is heavy lifting though. If you don't have large amounts of data, I'd suggest using regular jQuery to show/hide those that don't match the correct year (maybe by the year being a class). Even better would be to use Vue.js and use v-if to check if the option matches the year selected above.
See Laracasts - Learn Vue 2 (Episode 6) for more details on that.
Here is a quick version of the jQuery answer:
<select data-placeholder=" Year" class="chzn-select year" style="width:70px;" tabindex="1" id="year">
<option value=""></option>
#foreach($data['vehicle_years'] as $vehicle)
<option value="{{ $vehicle->year }}">{{ $vehicle->year }}</option>
#endforeach
</select>
<select data-placeholder=" Year" class="chzn-select year" style="width:70px;" tabindex="1" id="make">
<option value=""></option>
#foreach($data['vehicle_makes'] as $vehicle)
<option class="{{ $vehicle->year }}" value="{{ $vehicle->make }}">{{ $vehicle->make }}</option>
#endforeach
</select>
<script>
$(function() {
var year = $('select#year');
year.change(function() {
var makes = $('select#make > option');
makes.show(); // shows all
// hides all that don't have the selected year as class
makes.each(function( index ) {
if ( !$(this).hasClass( year.val() ) ) $(this).hide();
});
});
});
</script>
I have three dropdowns with same class name:
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to change any of these dropdown values based on any other dropdrop selected. If I select option two from second dropdown - I want 1st and 3rd dropdown values to be two. All these dropdown should change values no matter which one I select.
Thanks.
You will need JavaScript to do this. Here is an code example using jQuery:
$('.MyClass').on('change',function(){
$('.MyClass').val( $(this).val() );
});
This will add an EventListeneer for the change Element and update all DropDowns to the value of the changed one.
http://jsfiddle.net/CWP7Q/
you can use jQuery or normal JS, but my example contains Jquery, which will give you an idea. Please check the example in Jsfiddle.
The example binds a change event to the class name of the three selectors:
$(".MyClass").change(function(){
$(".MyClass").val($(this).val());
});
and Voila, every selector gets changed.
Somehting like (with jQuery)
$('.MyClass').change(function() {
$('.MyClass').val($(this).val());
});
Sorry guys, I should have posted the script directly without cleaning it. Please check the updated script, it should now clear things up. Thanks!
Consider the following JavaScript :
var selected = 0;
var options = 0;
$('.newListSelected').each(function() {
selected = $(this).children('.selectedTxt');
selected = selected.text();
/* Everything before this line works completely fine */
options = $(this).prev();
options.find('option[value=' +selected+ ']').attr('selected', 'selected');
}).remove();
And HTML :
<select name="type[]" style="display: none;">
<optgroup>
<option value="none">Select</option>
</optgroup>
<optgroup label="First Group">
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
<optgroup label="Second Group">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</optgroup>
</select>
<div class="newListSelected">
<div class="selectedTxt">20</div>
<ul class="newList">
<!-- Other stuff here -->
</ul>
</div>
What I'm trying to do actually is adding the selected attribute to the corresponding select option that has the same value as the text in .selectedTxt. In the code above, it should add selected="selected" to <option value="20">Twenty</option>.
However its not performing as expected, I also tried adding alert(option); below prev(); but it didn't output anything useful.
Thanks.
The Javascript works fine, as can be seen here: http://jsfiddle.net/4HsXp/
If you need to be able to select multiple items in a select element, you need to set the multiple and size attribute, like this:
<select multiple="multiple" size="2">
<option>1</option>
<option>2</option>
</select>
See: http://reference.sitepoint.com/html/select
Edit:
Attaching console.log statements to the new code still does not any problem. Running it on jsfiddle gave me the correct output:
jQuery(select)
Original Value: none
New Value: 20
I'm not sure what you are trying to do, but why couldn't you just select all option elements with proper selectors? If you want to select only some options, then you have to add extra selector attrbiutes.
$('select option').each(function() {
$(this).attr('selected', 'selected');
});