Related
I have a datepicker input and a timepicker input that I'd like to use to schedule a person for appointments.
When the user clicks on the input to open the datepicker menu, I'd like to grey out specific datetimes. I've got a php function that returns this array of datetimes in in 'Y-m-d H:i:s' string format. But I dont' know how to use that function's return value to give the javascript function what it needs to disable a range of dates in datepicker.
In the onSelect event of my datepicker, I want it to enable/disable time options in my timepicker according to which timeslots are booked for that day. But I don't know how.
Datepicker uses beforeshowDay: to disable booked dates
user selects date from datepicker
Datepicker enables/disables times in the timepicker
I did find out how to disable timeranges in the timepicker Here. the code example is this:
$('input.timepicker').timepicker({
'disableTimeRanges': [
['1am', '2am'],
['3am', '4:01am']
]
});
But that's how I'd disable the time ranges from within the scope of the timepicker. I don't know how to disable them from BeforeShowDay in datepicker?
<script type="text/javascript">
$(document).ready(function(){
$( "#datepickerListAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{ // need to disable days other than tuesday and wednesday too.
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
},
onSelect : function(){
should disable/enable timepicker times from here?
}
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
This is the function that gives the datetimes, in case it helps to know.
function get_next_open_appointments($numAppointments, $timeSlotToExclude = "")
{
global $db;
$whereCondition = "WHERE FirstName = :null ";
if ($timeSlotToExclude != "")
{
$whereCondition .= "AND AppointmentTime != '$timeSlotToExclude' ";
}
$query = "SELECT DISTINCT AppointmentTime FROM appointments
$whereCondition
ORDER BY AppointmentTime ASC LIMIT $numAppointments";
$statement = $db->prepare($query);
$statement->bindValue(':null', "");
$statement->execute();
$datesArray = array();
while ($row = $statement->fetch())
{
array_push($datesArray, $row['AppointmentTime']);
}
$statement->closeCursor();
return $datesArray;
}
UPDATE:
Hugo De Carmo pointed me in the right direction and I got the dates to disable/enable appropriately. However, I don't know how to use the datetimes that I pulled in code below to disable/enable times in the timepicker.
Here is the new code:
<script type="text/javascript">
$(document).ready(function(){
// uses php to get open appointments, and put them in a javascript array
<?php $datetime_openings = get_next_open_appointments(200);
$date_openings = array();
foreach ($datetime_openings as $dt)
{
array_push($date_openings, substr($dt,0,10)); // just the date part
}
$json_date_openings = json_encode($date_openings);
echo "var arr_Openings = ". $json_date_openings . ";\n";
?>
$( "#datepickerOpenAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{
var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
var bFound = (arr_Openings.indexOf(string) != -1);
return [ bFound ];
},
onSelect : function(){
// Should disable/enable time ranges here?
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
Try this,
sorry i didn't use beforeshowDay
select date 2017-7-14 and 2017-7-17 and see
var disabledDateTime = {
'2017-7-14':[
['2:30am','3:00am'],
['6:30am','9:00am']
],
'2017-7-17':[
['1:00am','3:00am'],
['5:30am','7:00am'],
['11:30am','2:00pm']
]
};
$(function() {
$('#pickTime').timepicker();
$('#pickDate').datepicker({
'format': 'yyyy-m-d',
'autoclose': true
}).on('changeDate',function(e){
var ts = new Date(e.date);
var m = ts.getMonth()+1;
var dt = ts.getFullYear() + '-' + m + '-' + ts.getDate();
var opt = {'disableTimeRanges': []}
if(typeof(disabledDateTime[dt])!='undefined'){
$('#pickTime').timepicker('setTime', '');
opt = {'disableTimeRanges': disabledDateTime[dt]}
}
$('#pickTime').timepicker('option',opt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<input id="pickDate" type="text" class="date" />
<input id="pickTime" type="text" class="time" />
Someone already answered this question here.
Anyway, the following code should give you an insight on how to solve the problem.
// supose your script return a json similar to the following
{
"data": [
// ...
"17-07-11"
]
}
$(function() {
$.getJSON("/path/to/script", function(response){
$('#datepickerListAppointments').datepicker({
beforeShowDay: function(dt) {
var config = [];
config[1] = 'class';
if ((dt.getDay() === 2) || (dt.getDay() === 3)) {
config[0] = false;
return config;
}
var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
config[0] = (response.data.indexOf(string) === -1);
return config;
}
});
});
});
I've assumed that you're exchanging data with the server using some kind of API, hence the use of getJSON, if you want to handle server errors then I suggest you to use ajax combining with Promise.
Edit 1
You can extract everything from your date using the class DateTime, here is a snippet:
$openings = array();
$date = DateTime::createFromFormat("y/m/d H:i", "17/07/15 08:30");
if (!isset($openings[$date->format("y-m-d")])) {
$openings[$date->format("y-m-d")] = array();
}
$openings[$date->format("y-m-d")][] = array(
"hour" => $date->format("Ha"),
"minute" => $date->format("i")
);
/* result
array(1) {
["17-07-15"]=>
array(1) {
[0]=>
array(2) {
["hour"]=>
string(4) "08am"
["minute"]=>
string(2) "30"
}
}
}
*/
Then you can disable the time in timepicker based on date, you'll probably need to register a callback function in your datepicker to update the timepicker based on the chosen date or you'll have to override the timepicker with new settings.
Yes, you can dinamically update timepicker disableTimeRanges inside the onSelect function using the option method of the timepicker component.
I'm supposing that:
You are using jQuery UI datepicker (since you didn't tag your question with twitter-bootstrap and bootstrap-datepicker has no minDate option)
You are using the first version of get_next_open_appointments that returns an array of datetimes (like ['2017-07-25 09:30:00', ...] see fakeDisabledTimes in the snippet)
I'm using momentjs in order to simplify dates managment. In the following code, I've used moment parsing functions (moment(String) and moment(String, String)), isSame, add and format. Note that moment tokens are different from PHP tokens.
Here a complete working sample:
var fakeDisabledTimes = [
'2017-07-25 09:30:00', '2017-07-26 10:00:00',
'2017-08-01 09:00:00', '2017-08-02 09:30:00',
'2017-08-08 10:30:00', '2017-08-09 10:00:00',
'2017-07-15 09:30:00', '2017-07-16 10:00:00'
];
$(document).ready(function(){
$( "#datepickerListAppointments" ).datepicker({
minDate:'0',
beforeShowDay:
function(dt){
// need to disable days other than tuesday and wednesday too.
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
},
onSelect : function(dateText){
//should disable/enable timepicker times from here!
// parse selected date into moment object
var selDate = moment(dateText, 'MM/DD/YYYY');
// init array of disabled times
var disabledTimes = [];
// for each appoinment returned by the server
for(var i=0; i<fakeDisabledTimes.length; i++){
// parse appoinment datetime into moment object
var m = moment(fakeDisabledTimes[i]);
// check if appointment is in the selected day
if( selDate.isSame(m, 'day') ){
// create a 30 minutes range of disabled time
var entry = [
m.format('h:mm a'),
m.clone().add(30, 'm').format('h:mm a')
];
// add the range to disabled times array
disabledTimes.push(entry);
}
}
// dinamically update disableTimeRanges option
$('input.timepicker').timepicker('option', 'disableTimeRanges', disabledTimes);
}
});
$('input.timepicker').timepicker({
timeFormat: 'h:i a',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css" rel="stylesheet"/>
<input id="datepickerListAppointments" type="text">
<input class="timepicker" type="text">
I am looking for a solution to group data into weeks / months without external library. I have seen the D3.js nest() option here: how can i group JSON data into the weeks according to calender?
Here another way using npm: https://www.npmjs.com/package/group-by-time
Maybe I am crazy having grown up in the age of dialup, but I still like to keep how many things I load on a page down to what is actually needed instead of loading everything possible, just in case I want to use it, even though the user "might" already have a cached copy from a CDN.
I am currently using Chart.js to display data, also available are Bootstrap and jQuery. I would love to be able to switch the chart between day, week month, using only javascript or jQuery, which seems like it should be a fairly common thing, but I don't see any examples without going for a bigger library like I mentioned above.
var chart={
dates: ['2015-09-01', '2015-09-02', '2015-09-03', '2015-09-04', '2015-09-05', '2015-09-06', '2015-09-07', '2015-09-08', '2015-09-09', '2015-09-10', '2015-09-11', '2015-09-12', '2015-09-13', '2015-09-14', '2015-09-15', '2015-09-16', '2015-09-17', '2015-09-18', '2015-09-19', '2015-09-20', '2015-09-21', '2015-09-22', '2015-09-23', '2015-09-24', '2015-09-25', '2015-09-26', '2015-09-27', '2015-09-28', '2015-09-29', '2015-09-30', '2015-10-01', '2015-10-02', '2015-10-03', '2015-10-04', '2015-10-05', '2015-10-06', '2015-10-07', '2015-10-08', '2015-10-09', '2015-10-10', '2015-10-11', '2015-10-12', '2015-10-13', '2015-10-14', '2015-10-15', '2015-10-16', '2015-10-17', '2015-10-18', '2015-10-19', '2015-10-20', '2015-10-21', '2015-10-22', '2015-10-23', '2015-10-24', '2015-10-25', '2015-10-26', '2015-10-27', '2015-10-28', '2015-10-29', '2015-10-30', '2015-10-31', '2015-11-01', '2015-11-02', '2015-11-03', '2015-11-04', '2015-11-05', '2015-11-06', '2015-11-07', '2015-11-08', '2015-11-09', '2015-11-10', '2015-11-11', '2015-11-12', '2015-11-13', '2015-11-14', '2015-11-15', '2015-11-16', '2015-11-17', '2015-11-18', '2015-11-19', '2015-11-20', '2015-11-21', '2015-11-22', '2015-11-23', '2015-11-24', '2015-11-25', '2015-11-26', '2015-11-27', '2015-11-28', '2015-11-29', '2015-11-30', '2015-12-01', '2015-12-02', '2015-12-03', '2015-12-04', '2015-12-05', '2015-12-06', '2015-12-07', '2015-12-08', '2015-12-09', '2015-12-10', '2015-12-11', '2015-12-12', '2015-12-13', '2015-12-14', '2015-12-15', '2015-12-16', '2015-12-17', '2015-12-18', '2015-12-19', '2015-12-20', '2015-12-21', '2015-12-22', '2015-12-23', '2015-12-24', '2015-12-25', '2015-12-26', '2015-12-27', '2015-12-28', '2015-12-29', '2015-12-30', '2015-12-31', '2016-01-01', '2016-01-02', '2016-01-03', '2016-01-04', '2016-01-05', '2016-01-06', '2016-01-07', '2016-01-08', '2016-01-09', '2016-01-10', '2016-01-11', '2016-01-12', '2016-01-13', '2016-01-14', '2016-01-15', '2016-01-16', '2016-01-17', '2016-01-18', '2016-01-19', '2016-01-20', '2016-01-21', '2016-01-22', '2016-01-23', '2016-01-24', '2016-01-25', '2016-01-26', '2016-01-27', '2016-01-28', '2016-01-29', '2016-01-30', '2016-01-31', '2016-02-01', '2016-02-02', '2016-02-03', '2016-02-04', '2016-02-05', '2016-02-06', '2016-02-07', '2016-02-08', '2016-02-09', '2016-02-10', '2016-02-11', '2016-02-12', '2016-02-13', '2016-02-14', '2016-02-15', '2016-02-16', '2016-02-17', '2016-02-18', '2016-02-19', '2016-02-20', '2016-02-21', '2016-02-22', '2016-02-23', '2016-02-24', '2016-02-25', '2016-02-26', '2016-02-27', '2016-02-28', '2016-02-29'],
data: [77.02, 63.80, 21.64, 86.60, 65.40, 46.25, 27.38, 66.65, 67.25, 65.59, 64.80, 01.00, 32.75, 04.30, 51.92, 02.75, 40.20, 72.30, 62.90, 83.60, 66.66, 37.30, 93.90, 01.50, 55.77, 50.00, 73.20, 30.03, 07.95, 21.65, 07.93, 66.94, 11.72, 33.75, 22.80, 14.55, 68.78, 66.78, 52.35, 06.24, 64.78, 22.21, 19.08, 23.69, 54.40, 39.55, 28.76, 22.25, 09.85, 07.50, 22.47, 75.94, 93.34, 16.29, 28.98, 64.40, 78.68, 30.65, 96.65, 99.35, 77.50, 75.30, 89.85, 97.50, 53.90, 97.55, 28.98, 75.08, 25.66, 41.00, 73.72, 68.50, 95.40, 49.50, 32.50, 86.00, 05.43, 88.19, 50.39, 03.90, 82.90, 53.78, 94.20, 82.40, 12.63, 78.80, 07.50, 66.50, 41.75, 91.25, 34.50, 22.50, 85.50, 80.00, 33.75, 59.50, 52.50, 73.25, 76.50, 38.75, 11.00, 55.00, 37.25, 92.50, 74.75, 55.75, 37.25, 61.01, 90.95, 87.65, 99.08, 84.49, 47.00, 72.20, 45.95, 44.35, 10.90, 27.05, 63.10, 63.50, 66.48, 97.25, 39.85, 81.50, 57.90, 02.78, 72.95, 41.55, 39.44, 15.85, 06.60, 13.60, 87.10, 86.40, 90.75, 48.30, 29.75, 16.25, 20.51, 45.40, 51.10, 82.00, 24.24, 92.88, 81.75, 18.50, 89.15, 55.75, 53.50, 74.90, 41.35, 61.40, 07.80, 56.80, 33.75, 75.02, 78.50, 46.10, 39.25, 95.00, 22.85, 36.00, 43.53, 63.80, 32.85, 88.30, 89.69, 05.75, 16.15, 15.25, 20.55, 44.50, 46.28, 71.75, 19.45, 41.75, 25.75, 09.05, 58.77, 76.20, 30.45, 71.75]
};
I'm assuming that date format is YYYY-MM-DD as in sample and for convenience I'm saving both dates and data in different arrays.
var dates = chart.dates;
var data = chart.data;
Keeping above assumptions in mind, you can easily group data by months.
var groupByMonth = {};
dates.forEach(function (d, i) {
var v = data[i];
var monthYear = d.slice(0, 7);
if (groupByMonth.hasOwnProperty(monthYear)) {
groupByMonth[monthYear].push(v);
} else {
groupByMonth[monthYear] = [v];
}
});
console.log(groupByMonth)
However to group by week, you need to find week number. Here is a extension method to do that so:
Date.prototype.getWeekNumber = function(){
var d = new Date(+this);
d.setHours(0,0,0);
d.setDate(d.getDate()+4-(d.getDay()||7));
return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};
Using above extension method you can easily group data by week number too. Week number repeats in each year so, I'm using combination of week and year to uniqly identify any week.
var groupByWeek = {};
dates.forEach(function (d, i) {
var v = data[i];
var weekYear = d.slice(0, 4) + '-' + new Date(d).getWeekNumber();
if (groupByWeek.hasOwnProperty(weekYear)) {
groupByWeek[weekYear].push(v);
} else {
groupByWeek[weekYear] = [v];
}
});
console.log(groupByWeek)
#Adnan Umer´s solution is probably better for your case since you already have the dates as strings, but here is a more general method in case you had the date instead of string:
function roundDate(date,type){
var d = new Date(date) // so as to not override
var types = ["day","week","month"]
var idx = types.indexOf(type)
if(idx > -1){ // remove all less than day
d.setMilliseconds(0)
d.setSeconds(0)
d.setMinutes(0)
d.setHours(0)
if(idx > 0){ //remove day of the week
d.setDate(d.getDate() - d.getDay()) // make it a sunday
if(idx > 1){ //remove day of month
d.setDate(1)
}
}
}
return d;
}
function parseDate(str){ // in your case, we need to keep the date disregarding the locale offset
return new Date(new Date(str).getTime() + new Date().getTimezoneOffset()*60*1000)
}
var lastDate = null
var grouping = "month"
var datesGrouped = []
var dataGrouped = []
function addToLast(arr,val){return arr[arr.length-1]+=val}
//I am assumming your dates are already sorted
chart.dates.map(function(date,index){
data = chart.data[index] // get corresponding data point
var group = roundDate(parseDate(date),grouping).getTime()
if(group == lastDate){
addToLast(dataGrouped, data)
}else{
datesGrouped.push(group)
dataGrouped.push(data)
lastDate = group
}
})
console.log(datesGrouped, dataGrouped)
I use D3.js and upon loading data from csv file the page isn't rendering when I remove the alert() statements. I;'m not a js specialist and I know it's something to do with asynchronous modes of operation but I don't know what to change.
when alert("AAAAAAAA"); is removed it works I appreciate this is a bespoke
issue so the other posts on the subject were not easily understood.
Many Thanks
Andy
</style>
<div id='dashboard2' align="center"></div>
<div id='dashboard' align="center"></div>
<script src="/xxxxxxxx/templates/uber/js/d3.min.js"></script>
<script type="text/javascript">
var climate_csv = function()
{
d3.csv("/xxxxxxxx/templates/uber/js/theclimate.csv", function(climate_statistics)
{
//prices is an array of json objects containing the data in from the csv
console.log("climate_statistics:", climate_statistics)
climate_data = climate_statistics.map(function(d)
{
//each d is one line of the csv file represented as a json object
console.log("d", d)
month = d.month;
console.log("month:", d.month, month)
low = +d.low;
console.log("low:", d.low, low)
high = +d.high;
console.log("high:", d.high, high)
rainfall = +d.rainfall;
console.log("rainfall:", d.rainfall, rainfall)
sunshine = +d.sunshine;
console.log("sunshine:", d.sunshine, sunshine)
nighttime = +d.nighttime;
console.log("nighttime:", d.nighttime, nighttime);
return {"Month": month, "cStats": {"low": low , "high": high} , "rainfall": rainfall , "sun":{"Sunshine": sunshine , "Nighttime": nighttime}}
})
})
}
</script>
<script type="text/javascript">
var climateStats2=[
{TempRange:'Low',cStats:{low:0}}
];
var climateStats3=[
{TempRange3:'High',cStats:{high:0}}
];
var climateStats4=[
{TempRange4:'Rainfall',cStats:{rainfall:0}}
];
var climateStats5=[
{TempRange4:'Rainfall',cStats5:{lower5:0, upper5:0}}
];
climate_csv();
alert("AAAAAAAA");
dashboard('#dashboard',climate_data,climateStats2,climateStats3,climateStats4,climateStats5);
Seems like your data is not fully loaded, when you call dashboard. It works with the alert because while the alert is open, your script is paused. Another thing is, that you are using global variables here. Let's avoid this using callbacks.
D3's csv function uses a callback and calls it, when the data is ready.
d3.csv("/xxxxxxxx/templates/uber/js/theclimate.csv", function(climate_statistics) {
/* ... */
});
You can now either call the dashboard function inside the callback, or add a callback to your function. Let's do the latter here:
var climate_csv = function( callback ) {
d3.csv(
"/xxxxxxxx/templates/uber/js/theclimate.csv",
function( climate_statistics ) {
var climate_data = climate_statistics.map(function( d ) {
month = d.month;
low = +d.low;
high = +d.high;
rainfall = +d.rainfall;
sunshine = +d.sunshine;
nighttime = +d.nighttime;
return {
"Month": month,
"cStats": {
"low": low,
"high": high
},
"rainfall": rainfall,
"sun": {
"Sunshine": sunshine,
"Nighttime": nighttime
}
};
});
// we are done with mapping our data
// let's call the callback with the data
callback(climate_data);
});
};
/* ... */
climate_csv(function( climate_data ) {
dashboard('#dashboard', climate_data, climateStats2, climateStats3,
climateStats4, climateStats5);
});
Put the function that is not working when you remove the alert inside the success callback, that will make the trick.
.csv works async, so when you put the alert, the request is completed on the background, when you remove it no "wait time" is added (as it should be) and that's why it's not working.
Not using d3.js, but this doc could help:
https://github.com/mbostock/d3/wiki/CSV
d3.csv("path/to/file.csv")
.row(function(d) { return {key: d.key, value: +d.value}; })
.get(function(error, rows) { console.log(rows); });
Hope it helps.
I'm trying to draw a chart in an application where I show data month on month, and would like to add labels to the x-axis to signify the years, but when I try to add a label it automatically adds the year and month cluttering up the look of the application.
var e=new google.visualization.arrayToDataTable([
["Year",county_1,county_2,"National"],
["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3],
["Feb-10",med_feb_10_1,med_feb_10_2,med_feb_10_3],
["Mar-10",med_mar_10_1,med_mar_10_2,med_mar_10_3],
["Apr-10",med_apr_10_1,med_apr_10_2,med_apr_10_3],
["May-10",med_may_10_1,med_may_10_2,med_may_10_3],
["Jun-10",med_jun_10_1,med_jun_10_2,med_jun_10_3],
["Jul-10",med_jul_10_1,med_jul_10_2,med_jul_10_3],
["Aug-10",med_aug_10_1,med_aug_10_2,med_aug_10_3],
["Sept-10",med_sep_10_1,med_sep_10_2,med_sep_10_3],
["Oct-10",med_oct_10_1,med_oct_10_2,med_oct_10_3],
["Nov-10",med_nov_10_1,med_nov_10_2,med_nov_10_3],
["Dec-10",med_dec_10_1,med_dec_10_2,med_dec_10_3],
["Jan-11",med_jan_11_1,med_jan_11_2,med_jan_11_3],
["Feb-11",med_feb_11_1,med_feb_11_2,med_feb_11_3],
["Mar-11",med_mar_11_1,med_mar_11_2,med_mar_11_3],
["Apr-11",med_apr_11_1,med_apr_11_2,med_apr_11_3],
["May-11",med_may_11_1,med_may_11_2,med_may_11_3],
["Jun-11",med_jun_11_1,med_jun_11_2,med_jun_11_3],
["Jul-11",med_jul_11_1,med_jul_11_2,med_jul_11_3],
["Aug-11",med_aug_11_1,med_aug_11_2,med_aug_11_3],
["Sept-11",med_sep_11_1,med_sep_11_2,med_sep_11_3],
["Oct-11",med_oct_11_1,med_oct_11_2,med_oct_11_3],
["Nov-11",med_nov_11_1,med_nov_11_2,med_nov_11_3],
["Dec-11",med_dec_11_1,med_dec_11_2,med_dec_11_3],
["Jan-12",med_jan_12_1,med_jan_12_2,med_jan_12_3],
["Feb-12",med_feb_12_1,med_feb_12_2,med_feb_12_3],
["Mar-12",med_mar_12_1,med_mar_12_2,med_mar_12_3],
["Apr-12",med_apr_12_1,med_apr_12_2,med_apr_12_3],
["May-12",med_may_12_1,med_may_12_2,med_may_12_3],
["Jun-12",med_jun_12_1,med_jun_12_2,med_jun_12_3],
["Jul-12",med_jul_12_1,med_jul_12_2,med_jul_12_3],
["Aug-12",med_aug_12_1,med_aug_12_2,med_aug_12_3],
["Sept-12",med_sep_12_1,med_sep_12_2,med_sep_12_3],
["Oct-12",med_oct_12_1,med_oct_12_2,med_oct_12_3],
["Nov-12",med_nov_12_1,med_nov_12_2,med_nov_12_3],
["Dec-12",med_dec_12_1,med_dec_12_2,med_dec_12_3],
["Jan-13",med_jan_13_1,med_jan_13_2,med_jan_13_3],
["Feb-13",med_feb_13_1,med_feb_13_2,med_feb_13_3],
["Mar-13",med_mar_13_1,med_mar_13_2,med_mar_13_3],
["Apr-13",med_apr_13_1,med_apr_13_2,med_apr_13_3],
["May-13",med_may_13_1,med_may_13_2,med_may_13_3],
["Jun-13",med_jun_13_1,med_jun_13_2,med_jun_13_3],
["Jul-13",med_jul_13_1,med_jul_13_2,med_jul_13_3],
["Aug-13",med_aug_13_1,med_aug_13_2,med_aug_13_3],
["Sept-13",med_sep_13_1,med_sep_13_2,med_sep_13_3],
["Oct-13",med_oct_13_1,med_oct_13_2,med_oct_13_3],
["Nov-13",med_nov_13_1,med_nov_13_2,med_nov_13_3],
["Dec-13",med_dec_13_1,med_dec_13_2,med_dec_13_3],
["Jan-14",med_jan_14_1,med_jan_14_2,med_jan_14_3],
["Feb-14",med_feb_14_1,med_feb_14_2,med_feb_14_3],
["Mar-14",med_mar_14_1,med_mar_14_2,med_mar_14_3],
["Apr-14",med_apr_14_1,med_apr_14_2,med_apr_14_3],
["May-14",med_may_14_1,med_may_14_2,med_may_14_3],
["Jun-14",med_jun_14_1,med_jun_14_2,med_jun_14_3],
["Jul-14",med_jul_14_1,med_jul_14_2,med_jul_14_3],
["Aug-14",med_aug_14_1,med_aug_14_2,med_aug_14_3],
["Sept-14",med_sep_14_1,med_sep_14_2,med_sep_14_3],
]);
var b={
title:"House Price Index by County:",
curveType:"function",
is3D:true,
legend:"top",
width:600,
height:250,
hAxis: {textPosition: 'none' }};
var d=new google.visualization.LineChart(document.getElementById("chart_div"));
d.draw(e,b)
}
Can anyone suggest a way to just have the labels of the years (2010:2014) on the graphs?
You will likely need to loop through the data to change it as you see fit:
var exampleData = ["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3];
for (var i = 0; i < exampleData.length; i++) {
var date = exampleData[i][0];
var year = '20' + date.split('-')[1];
exampleData[i][0] = year;
}
I want to change the value of a global jquery variable within the foreach loop every time there is a new model item. I want to add new dates to the calendar but cant do that until I can access these functions from foreach loop.
*edit***
I over simplified my example for the question which was answered correctly by vov v. The actual code will do a lot more than add a value as it will add data to a calendar. I've added more code to show what it will do a little better
jquery:
<div id="calendar" style="width: 500px;" />
<script type="text/javascript">
$(document).ready(function () {
var calendar = $('#calendar').glDatePicker(
{
showAlways: true,
borderSize: 0,
dowOffset: 1,
selectableDOW: [1, 2, 3, 4, 5],
selectableYears: [2012, 2013, 2014, 2015],
specialDates: [
{
date: new Date(2013, 0, 8),
data: { message: 'Meeting every day 8 of the month' },
repeatMonth: true
},
{
date: new Date(2013, 5, 7),
data: { message: 'Meeting every day 8 of the month' }
},
],
onClick: function (target, cell, date, data) {
target.val(date.getFullYear() + ' - ' +
date.getMonth() + ' - ' +
date.getDate());
if (data != null) {
alert(data.message + '\n' + date);
}
}
}).glDatePicker(true);
$('#visible').change(function () {
var showAlways = eval($(this).val());
calendar.options.showAlways = showAlways;
if (!showAlways) {
calendar.hide();
}
else {
calendar.show();
}
});
});
var value = 0;
$('#total').click(function () {
alert(value);
});
function add() {
// will eventually add new specialDates to the calendar taken from model items
//test lines
//value = value + 1;
//return value;
}
</script>
razor view:
<input type="button" id="total" />
#foreach (var item in Model){
if (item.AppointmentStatus == "active")
{
// item display code
#: <script type="text/javascript"> add();</script>
}
if (item.AppointmentStatus == "history")
{
// item display code
}
}
I run this and get error below as it doesnt see the other code
'0x800a1391 - JavaScript runtime error: 'add' is undefined'
If you just want to capture "a count" that you want to send down to your client then you can simply do it like this:
<script>
var value = '#Model.Count';
// the rest of you script goes here
$(document).ready(function () {
$('#total').click(function () {
alert(value);
}
});
</script>
So say you have 7 items in your model, then the html that will be generated is this:
var value = 7;
and when you click on that total element it will give you an alert with the text 7.
Try moving your add function and variable declaration outside of doc ready. The functions in doc ready are not available until your razor has executed.