jQDateRangeSlider shows the wrong dates - javascript

I'm trying to integrate jQDateRangeSlider into my page.
The settings are as follows:
$("#slider").dateRangeSlider({
defaultValues:{
min: new Date(2014, 12, 5),
max: new Date(2015, 1, 26)
},
bounds: {
min: new Date(2014, 12, 5),
max: new Date(2015, 1, 26)
}
});
But it doesn't work: http://jsfiddle.net/oe8yk19n/
The dates shown are 2015-01-05 ~ 2015-02-26, which are completely different from those that I've actually entered... so weird.
Its not that the slider can't span that far, because the defaults span 2 years.
Super strange - any ideas?


$("#slider").dateRangeSlider({
bounds: {
min: new Date(2014, 11, 5),
max: new Date(2015, 0, 26)
},
defaultValues:{
min: new Date(2014, 11, 5),
max: new Date(2015, 0, 26)
}
});
Apparently it is because month counting starts at zero in javascript. Wat.

Related

i have faced the issue while creating triple y-axis

i have faced the problem while creating triple y-axis in google charts .
The problem is space between right side axis. could you please help me.
i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2},
3: {targetAxisIndex: 3}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'},
2: {title: 'third'},
3: {title: 'foruth'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div"></div>

i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this
if you must have three, try textPosition
have one 'in' and the other 'out'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
chartArea: {
width: '50%'
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2}
},
vAxes: {
0: {
textPosition: 'out',
title: 'Temps (Celsius)'
},
1: {
textPosition: 'in',
title: 'Daylight',
viewWindow: {
max: 30
}
},
2: {
textPosition: 'out',
title: 'third',
viewWindow: {
max: 40
}
}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google bar chart display day issue

My fiddle : https://jsfiddle.net/vbdy7fLe/1/
I'm trying to use google column chart and display multiple fields of data and by date. But I'm not sure why it doesn't display 02 Jan 2015 and 04 Jan 2015.
The data is there and here is my js code :
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date', 'person A', 'person B'],
[new Date(2015, 0, 1), 1, 4, ],
[new Date(2015, 0, 2), 1, 4, ],
[new Date(2015, 0, 3), 6, 11, ],
[new Date(2015, 0, 4), 10, 5, ],
[new Date(2015, 0, 5), 10, 5, ]
]);
var options = {
chart: {
title: 'Meeting by weeks'
},
bars: 'vertical',
height: 400,
colors: ['#3498db', '#9b59b6', '#16a085'],
hAxis: {
format: 'dd MMM yyyy'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}

It's not showing because googles function to draw the chart has decided that there is not enough space to write text on every single column.
Either try the setting for hAxis.slantedTextor try making your chart wider.

Change in Highcharts values of x-axis with event onClick()

i would like a suggest...
i have Time series charts (without event to zoom it), my data is this:
data: [
[Date.UTC(2013, 5, 14), 0.7695],
[Date.UTC(2013, 5, 21), 0.7574],
[Date.UTC(2013, 5, 28), 0.7480],
[Date.UTC(2013, 6, 5), 0.7685],
[Date.UTC(2013, 6, 12), 0.7744],
[Date.UTC(2013, 6, 19), 0.7652],
[Date.UTC(2013, 6, 26), 0.7609],
[Date.UTC(2013, 7, 2), 0.7526],
[Date.UTC(2013, 7, 9), 0.7542],
[Date.UTC(2013, 7, 16), 0.7540],
[Date.UTC(2013, 7, 23), 0.7487],
[Date.UTC(2013, 7, 30), 0.7562],
[Date.UTC(2013, 8, 6), 0.7591],
[Date.UTC(2013, 8, 13), 0.7486],
[Date.UTC(2013, 8, 20), 0.7411],
[Date.UTC(2013, 8, 27), 0.7393]
]
These are the starts of weeks.
i enabled scrollbar of x-axis in my chart and i set range:
xAxis: {
type: 'datetime',
range: 28 * (24 * 3600000) // 4 weeks
},
in this way when the chart is ready, it show me last 4 week (and if i want to see other data, i will use the scrollbar)...
The problem is that the values of x-axis aren't my data :/
How i can to do ?
http://jsfiddle.net/k4ayprz4/
Besides i will insert a button under the chart with event onclick() that will reload the chart but with a new range
xAxis: {
type: 'datetime',
range: 3*(30 * (24 * 3600000)) // 3 months
},
the problem is that the values of x-axis in this case they should be names of months :/
Exist a way to do this ?
Thanks!
EDIT: I corrected the link jsfiddle and the array

Make Specific Time Period X-Axis Flot Jquery

I want to make a chart that showing data with 4 month interval (3 period/year).
and i want the x-axis label showing the year and the period like image below:
http://i.stack.imgur.com/eerSy.png
what i've done so far :
var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
var tahunsekarang=new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: { mode: "time",tickSize: [4, "month"] , timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
yaxis: {panRange: [0, 1500] },
pan: { interactive: true},
series: {lines: {show: true},points: {show: true}},
});
but since I made it pan: { interactive: true} so when i drag the chart, the tickline is always change value, it made the chartline not fit in the tick line

1) If you want fixed ticks when you drag the chart you have to give a fixed ticks array instead of the tickSize option.
2) To give the Roman number for the trimester you can use a tickFormatter function instead of the timeformat option.
New options object:
xaxis: {
mode: "time",
ticks: ticks,
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
See the code snippet below (or this fiddle) for a working example:
var data = [
[1262278800000, 87.5],
[1293814800000, 750],
[1325350800000, 100],
[1356973200000, 25],
[1371229200000, 87.5],
[1388422800000, 0],
[1388509200000, 375],
[1402765200000, 100],
[1419958800000, 1000]
];
var ticks = [
new Date(2010, 0, 1).valueOf(),
new Date(2010, 4, 1).valueOf(),
new Date(2010, 8, 1).valueOf(),
new Date(2011, 0, 1).valueOf(),
new Date(2011, 4, 1).valueOf(),
new Date(2011, 8, 1).valueOf(),
new Date(2012, 0, 1).valueOf(),
new Date(2012, 4, 1).valueOf(),
new Date(2012, 8, 1).valueOf(),
new Date(2013, 0, 1).valueOf(),
new Date(2013, 4, 1).valueOf(),
new Date(2013, 8, 1).valueOf(),
new Date(2014, 0, 1).valueOf(),
new Date(2014, 4, 1).valueOf(),
new Date(2014, 8, 1).valueOf(),
new Date(2015, 0, 1).valueOf(),
new Date(2015, 4, 1).valueOf(),
new Date(2015, 8, 1).valueOf(),
];
var tahunsekarang = new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: {
mode: "time",
//tickSize: [4, "month"],
ticks: ticks,
//timeformat: "%Y",
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
yaxis: {
panRange: [0, 1500]
},
pan: {
interactive: true
},
series: {
lines: {
show: true
},
points: {
show: true
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>

fullcalendar javascript issue - its not showing the events in IE?

On my team website: http://www.berzerkers.org, head over to the Schedule. The calendar is supposed to have a few events listed - it works fine in Firefox, Chrome and Safari - but not in IE...what is the issue? I don't know what to do. Any help would be greatly appreciated! :)

Wherever you data is being generated from, there's an empty array element at the end of the events array:
events: [{id: 1, title: "BT Big Game", start: new Date(2009, 7, 8, 8), end: new Date(2009, 7, 8)},{id: 2, title: "Team Meeting # Clubhouse", start: new Date(2009, 7, 2, 20), end: new Date(2009, 7, 2)},{id: 3, title: "Trip to Stingray", start: new Date(2009, 7, 7, 15), end: new Date(2009, 7, 7)},{id: 4, title: "Practice / Eazy's Going Away Party # Cousins SI", start: new Date(2009, 7, 16, 8), end: new Date(2009, 7, 16)},{id: 5, title: "Berzerkers Team Tryouts at NYCPB", start: new Date(2009, 7, 11, 20), end: new Date(2009, 7, 11)},]
Notice the ,] at the end.
This is causing IE to throw an error when it tries to parse it.

Categories