I am generating line graphs of meteorological data using Dygraphs, and would like to implement a date range picker so that users can input a specific date or range of dates and see the data represented in said graph. I have scoured various websites and JSFiddle examples for other charting libraries which have not worked correctly (or in some cases at all).
Here is a Fiddle of my current graph. I have found the following code for creating the datepicker. Now I just need to implement it.
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
Can someone point me in the right direction? Many thanks.
Related
How can I generate a map like this using OSM? I want the map to highlight single country and fade others. Also, if the country is small I want to show it on the globe in a small thumbnail.
Oke let’s using JavaScript, because I think there is the biggest variety of libraries. Here I will explain a few approaches creating an interactive webmap.
1) The first approach is using plain svg:
You can download or draw with your vector software of choice the base map as svg. Then you could assign every country polygon a unique ID, and inside JS you can access the SVG with a mouseevent like click or mouseover. All the information of the country could be stored outside JS in a .json (easier) or .xml file. With the ID you getting from the SVG event you can get the fitting information from your .json. Maybe that reinvent the wheel, but it’s highly adjustable. But I think if you only want a static maps its simpler if you are using a more complex library.
2) The second approach is using a library for svg interaction:
The very popular D3.js or Raphael.js
3) The third approach is using a thematic webmapping library based on svg:
Use JQVMAP (former vectormap.js) or the very new austrian project mapmap.js
4) Use a topographic webmapping library
Here you can use the open libraries leaflet.js or openlayers.js. With these, the best approach will be, that you add your countries as a .geojson. Geojson is a very nice format that allows you interacting with your countries with the most geographical softwares.
5) Create und use your own tiles
This approach is the most performant solution but not the simplest to implement.
Here is a very nice tutorial explaining five approaches. But I think the simplest is using TileMill.
6) Using a mapserver
If you are not familiar with mapservers, this should only be considered when you are going to implement an extensive application. Nice Mapservers are Deegree and the popular Geoserver.
All of these approaches have their pros und cons but I think one of these solutions will fit your needs and I wish you the best successes!
You can use google Geo Chart. You can highlight any country you wanted.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
For more info here is the link
https://developers.google.com/chart/interactive/docs/gallery/geomap?csw=1
I need reject for sap.m.Input control any input except integer values. So in input may be inputted only 0-9, without any sign symbol(+-) or any decimal separators. I Can't find good solution. View declared in XML format, and preferable way is just change this XML with additional parameters, if it possible.
Possible solutions:
The first one - write custom formatter.
The second one - try to find some standard solution with types. I found internal data types and they settings, but it seems that they not working well.
A custom formatter won't help you in this case as its only used oneway (model->view).
But data types are your friend here. I would suggest sap.ui.model.type.Integer with a minimum constraint of 0.
<Input value="{path: '/value', type: 'sap.ui.model.type.Integer', constraints:{minimum:0}}" />
However this does have two prerequisites:
You need to enable complex databinding. This can be done in the bootstrap tag in index.html with the data-sap-ui-compatVersion attribute. Version 1.26 is needed at least. You can use the value edge to specify the newest version:
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge">
Alternatively you can use data-sap-ui-bindingSyntax="complex".
If the user enters invalid data the datatype throws a ValidationException. The error will be silently ignored but the model won't be updated. To get some feedback for the user you can register the control or the whole view at the MessageManager:
sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);
You can also enable handleValidation in the Component or when instantiating the component.
Example on JSBin.
Regex is your friend here.
Here is a pretty simple jsbin I re-used from someone validating text only and modified the regex to accept numbers only.
You could wire the validation into the change event so it would fire and set the state to error if text entered.
Let us know how this works out.
Cheers,
Nigel
Given the pop-up example at http://plnkr.co/edit/idrirF9zxvCMCQWTk8nr?p=preview how do I actually get the date if the user changes it?
I am guessing that I should do it in $scope.open = function($event) but I just don't know how. I have searched this site & googled extensively. What did I miss? Thanks.
you plunk link is not working.
I don't know what exactly happen in your code.
I think maybe your miss ng-model,
ng-model is the way to do two-way data binding in angular .
for example
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")
you can get data by $scope.dt
if you want to watch the date change
you can do
$scope.$watch('dt',function(val){
//to do
console.log(val)
})
Hi we use a simple kendo datepicker for our web application.
$("#DateInput").kendoDatePicker({
format: "dd/MM/yyyy",
culture: "en-GB",
max: new Date()
});
Now when we try to get the datepicker value in Javascript my browser gives me date format dd/MM/yyyy but my colleague's browser gives him MM/dd/yyyy. We have tried to use same culture as you can see in kendo and as well as in our web.config we have put the globalization settings as follows.
<system.web>
<globalization uiCulture="en-GB" culture="en-GB" />
</system.web>
My computer's date format and settings are as follows;
Region & Language format: English(United Kinddom)
Keyboard Layout: English(United Kingdom)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+6
My colleague's date format and settings are;
Region & Language format: English(Australia)
Keyboard Layout: English(Australia)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+8
Last bit of information, we are using Chrome for testing on both places. It is probably the UTC problem. I want the date format in "dd/MM/yyyy" for both occasion. Any workable solution will be highly appreciated. Thanks.
Try to add this code at top of your page before you gonna render any kendo widget:
kendo.culture("en-GB");
It should forced kendo widgets to work in all location using en-GB culture.
If you're using ASP.MVC I recommend add it in "_Layout.cshtml" like:
<head>
...
<script src="#Url.Content("~/Scripts/jquery/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.all.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.pl-PL.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.de-DE.min.js")"></script>
<script type="text/javascript">
kendo.culture("en-GB");
</script>
//widgets create scripts for your views if you write it here
</head>
Detail on globalization can be found on this link:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/globalization
If your intention is to convert the date into your desired format "dd/MM/yyyy" and if your kendo grid is not providing you the correct result in different places, create your own. Some thing like this.
In Json:
var FixedDateFormat = "PlodDate: '" + (Date.getUTCDate() + 1) + "/" + (Date.getUTCMonth() + 1) + "/" + Date.getUTCFullYear() + " 00:00:00";
Here I have added 1 on Date and Month cause getUTCDate/Month starts from 0. As you have said in comments you are accepting the date as string and then converting that back to DateTime so I've added the time " 00:00:00".
In MVC: You probably need to do something like following to convert;
DateTime X = Convert.ToDateTime(PlodDate);
UPDATE
I've got a better solution for you on JS. You are reading datepicker value with something like this, right??
$("#YourDatePickerName").data("kendoDatePicker").value()
Here you can tell your browser what local you want to use like the following
$("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-GB");
Which will generate exact same result for every culture.
Further Update
If you want to do it Kendo's way then you can use kendo.toString(). You can check it here.
Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>