My requirement is to show an event with time interval. When I try to use this code it seems not working properly. May be I am wrong at timezone selection but not getting exactly what need to do. Please help.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-02-12',
defaultView: 'agendaWeek',
editable: false,
eventLimit: true, // allow "more" link when too many events
timeFormat: 'h:mm a',
//timezone: "local",
events: [
{
title: 'Meeting',
start: '2016-02-09T13:00:00-00:00',
end: '2016-02-09T14:00:00-00:00'
}
]
});
Related
this may seem a noob's question but when I try to use setExtremes or showResetZoom on my xAxis, I get this in the console:
Uncaught TypeError: copt.xAxis.setExtremes is not a function
However my xAxis is correctly defined and works perfectly on plenty of other functions. I've copy-pasted code from several jsfiddler examples, but no way...
Here is my code:
Abs_ChartOptions= {
chart: {
zoomType: 'xy',
resetZoomButton: {
position: {
verticalAlign: 'top',
y: -50
},
}
},
title: { text: ''},
xAxis:{
type: 'datetime',
labels: { format: '{value: %d/%m/%Y}'},
tickInterval: 24*36e5, //24h
title:{ text: 'Date'},
crosshair: true,
},
yAxis: [{
title: { text: ''},
alternateGridColor: '#FDFFD5',
crosshair: true
}],
series: []
}
And on call site, after defining the series and the xMin/xMax values(which are correctly set on their way):
copt= clone(Abs_ChartOptions);
copt.xAxis.setExtremes(xMin,xMax);
copt.showResetZoom();
I've tried using directly Abs_ChartOptions instead of a clone, same issue.
NB: Using copt.xAxis.min= xMin; copt.xAxis.max= xMax; works fine for zooming, but I don't get the "reset zoom" buttton.
What did I miss? Is there some extra module needed or whatever ?
Thx in advance
You need to call both methods on a chart instance, not on the options configuration object.
const Abs_ChartOptions = {
...
};
const chart = Highcharts.chart('container', Abs_ChartOptions);
chart.xAxis[0].setExtremes(1, 3);
chart.showResetZoom();
Live demo: http://jsfiddle.net/BlackLabel/e81nj64v/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart
I went through devExtreme documentation and examples but I can't find a solution for this...
In a Razor view I am loading a dxScheduler as follows (it's bound to a db object where "orders" and "resources" are defined):
<div id="scheduler"></div>
and
<script>
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%"
})
});
</script>
It works fine. However, while keeping cellDuration = 15 mins:
I would like the scheduler to be centered around the current time indicator (i.e. the vertical line that represents datetime.now...)
At the same time "startDayHour" has to be "0" and "endDayHour" has to be "24", as they are now.
Any suggestion would be appreciated. Thanks.
It turned out that I was looking at the "Configuration" section only. But there are "Methods" too...
The answer is to use the "scrollToTime" method.
Reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.
Updated working example (it's straightforward then to set the argument of "scrollToTime" dynamic).
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%",
onContentReady: function (e) {
e.component.scrollToTime(5, 30, new Date());
}
})
});
I have a page with a variety of select menus. The select options are used in an ajax call to build a Highcharts bar graph. Every time a filter changes, the graph gets recreated. I did this instead of updating the series data, because in the past I have noticed that destroying and recreating was more efficient than updating.
I want images to show on the x-axis, so I used a nice little trick of creating two x axes, used formatter to return an image on the first axis, and linked the second axis to the first. This works on first refresh. However, every time the chart gets recreated thereafter, the image disappears. I checked my console and I don't see any errors.
And idea of what's going on here?
/**
* Whenselection changes
*/
$(document).on('change', '.filter', function(){
getChartData($params)
})
});
/**
* API call to get data that will populate charts.
* #param {obj} params
*/
function getChartData(params)
{
//Get chart data
$.ajax({
url: apiURL + '/chartdata/',
data: params,
dataType: 'json',
cache: false,
success: function(data) {
initChart(data[0]);
}
});
function initChart(chartData)
{
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor: 'transparent', //#E8EAF6',
height: '23%',
marginLeft: 35
},
title: {
text: null
},
xAxis: {
categories: [category1, category2],
lineColor: 'transparent',
min: 0,
tickColor: 'transparent',
title: {
text: null
},
labels: {
x: -35,
useHTML: true,
overflow: 'allow',
formatter: function () {
if(this.isFirst == true)
return '<img src="../assets/img/nat-jr-grad-gold.png"><br/>';
else
return '<img src="../assets/img/nat-jr-grad-purple.png"><br/>';
}
}
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: null
},
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
},
legend: {
enabled: false
},
series: [{
name: category1,
data: [{name: category1, y:Math.round(chartData.p_grad_nongap * 100), {y: null}],
}, {
name: category2,
data: [null, {name: category2, y: Math.round(chartData.p_grad_gap * 100)}]
}]
});
}
I reproduced your problem on a simplified example: http://jsfiddle.net/BlackLabel/sm2r684n/
For the first time, the image is loaded asynchronously and the chart does not take it into account when calculating the margins. Every next time the result is different, so you should wait until the picture is loaded:
var img = new Image();
img.onload = function() {
initChart();
}
img.src = "https://www.highcharts.com/samples/graphics/sun.png";
Live demo: http://jsfiddle.net/BlackLabel/m09ok2cg/
I think ppotaczek had the cortrect root cause of the problem; the image is loaded asynchronously and the chart does not take it into account when calculating the margins. His suggestion used setTimeout function to continuously redraw the graph, which is rather inefficient. My work-around for this was to just add the images as avg elements using chart.renderer after the chart was created.
/* Render X-Axis images */
chart.renderer.image('../assets/img/img1.png', 0, 40, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
chart.renderer.image('../assets/img/img2.png', 0, 130, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
When you add the Twitter Search Widget to your website, you see that the widget starts with only 1 tweet right after the page is loaded.
Is it possible to get the widget populated with more tweets on pageload?
It also seems that the interval can't be lowered due it's '30000' microseconds minimum. I tried to lower the interval in the code but it doesn't work. Is it possible to create a workaround for that?
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#myhash',
interval: 5000,
title: '',
subject: '',
width: 'auto',
height: 294,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
</script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 240,
height: 300,
features: {
hashtags: false,
timestamp: false,
avatars: false,
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('USERNAME&exclude_replies=true').start();
</script>
rpp being the number of tweets to show: Change the number to what ever you like. Also - I added &exclude_replies=true to turn off replies in my feed.
I've been using similar code to the following to get list of recent tweets on a website. There is one problem however which I'd like to have solved. I have to put this code exactly in the place where I want the tweets to be rendered and I'd like to move it to a separate file to keep HTML clean. However I can't really find a way to do it.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'list',
rpp: 5,
interval: 6000,
title: '#palafo',
subject: 'Linkers',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().start();
</script>
Source code for the library is available here
Put this in your separate JS file:
twitterWidget = new TWTR.Widget({
version: 2,
type: 'list',
rpp: 5,
interval: 6000,
title: '#palafo',
subject: 'Linkers',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}));
and then, at the point in your document where you're ready to load the widget, put
<script type="text/javascript>
twitterWidget.render().start();
</script>
Simon is right however has forgotten to include the src. When your ready to load the document, type -
<script type="text/javascript src="path/to/.js/file">
twitterWidget.render().start();
</script>