In range-selector, I have many options to select from (in reality) and in given demo, I initially load last 2 hours data.
In this scenario, last 1 hour option is enabled but other options are disabled.
I really don't know what is wrong. The requirement is to load last 2 hour data first and then from dropdown, you can select other options (eg. last 6 hours) and accordingly data will be loaded.
How to enable other options in range-selector ?
I tried setting
minRange:1
but I have no clue how to fix it.
DEMO : https://stackblitz.com/edit/js-2eyktg?file=index.js,chartOptions.js,mock-data%2Fi.js
Updates:
I tried using
allButtonsEnabled: true,
It enables all options but when I click on 3 hours, 6 hours options, it doesn't make any BE call. I believed that it should automatically call afterSetExtremes functions with min & max value, fetch data from BE and update the chart but it doesn't happen.
DEMO : https://stackblitz.com/edit/js-jsxchg?file=index.js,chartOptions.js,backend.js
You can:
a) Set min property for an x-axis in a navigator:
navigator: {
xAxis: {
min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
},
// adaptToUpdatedData: false,
...
}
Live example: https://stackblitz.com/edit/js-m38td3?file=index.js
API Reference: https://api.highcharts.com/highstock/navigator.xAxis
b) Enable rangeSelector.allButtonsEnabled property and use afterBtnClick Highcharts event. The event afterSetExtremes is not called if the extremes are the same as the current one (they are because of initial min and max restriction).
chart: {
zoomType: 'x',
events: {
load: function() {
Highcharts.addEvent(
this.rangeSelector,
'afterBtnClick',
function() {
const button = this.buttonOptions[this.selected];
const chart = this.chart;
afterSetExtremes({
target: {
chart
},
min: chart.xAxis[0].dataMax - button._range,
max: chart.xAxis[0].dataMax
});
});
}
}
}
Live demo: https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js,index.js,index.html
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I am trying to build chart like expertoption.com and iqoption.com using highchart. I have no experience in the chart. Can anyone tell how to build a chart like expert option live chart?
please check the code below:
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
The issue is that I want the time axis to extend more than the current time.
I am trying to edit this realtime chart.
Below is the reference, I want to build this type of chart: expert option chart
To show more than the current time you can set xAxis.overscroll in Highstock like that:
xAxis: {
overscroll: 10 * 1000 // 10 seconds
}
Demo:
https://jsfiddle.net/BlackLabel/t43qfxh7/1/
I have a chart which ultimately I'd like to apply timezone offsets to from a dropdown list of timezones. The incoming times from json will all be UTC.
Is there a way to let highcharts handle the offset with the global timezoneOffset property, something along the lines of this when a button is clicked or dropdown selected:
Highcharts.setOptions({
global : {
timezoneOffset : 300
}
});
Maybe I also need to redraw the chart after doing this?
Example here: https://plnkr.co/edit/oqOAmUnH2LZzAX3a7vpV
The global.timezoneOffset option is deprecated so I suggest using time.timezoneOffset instead for a chart. With the chart-sentric option you can do a normal chart update to set a new timezoneOffset.
For example (JSFiddle demo):
let chart = Highcharts.chart('container', {
time: {
timezoneOffset: -120
}
// ...
});
And upon doing a dropdown selection:
chart.update({
time: {
timezoneOffset: 0
}
});
I am using Data-Grid for listing of my grid data. However, I have to say maximum item per page from the grid. I have gone through the Data-Grid library function and changed the parameters from there to select the customize / selact my default value. But, I am failed. It's appearing here in some way
Here the problem is it's not selecting the default page size when loading. So I have done so to select the default page size in this way
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
itemsPerPage:5,
};
However it's still not working. But, once, when I select any item from the dropdown like 5/10 then the pagination appears and obey by the the item per pages this way.
So, now, my question is how can I start from this way which will select a default pagesize rather than coming with a empty value with all items. Thank you.
Ohh, I got the solution by myself. I have added the default itemsPerPage in the wrong way. it will be this way.
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
pagination: {
itemsPerPage: '10'
}
};
Here the pagination support is coming from the another angular module as there are 2 js file(datagrid, and pagination). Source file
I am using Angular Timer http://siddii.github.io/angular-timer/examples.html#/angularjs-single-timer
But I can't update the countdown variable. I see that I'm not the only one having this issue. I tried some "solutions" but this didn't work. What is the best way to make it work? Don't want to make a new countdown because this timer directive has a lot of features that I need. It's just that I can't update the countdown from a controller.
I have a select updating content which works perfect, except for the timer, I've added different time values
$scope.typeWods = [
{ label: 'EMOM', value: 1, time: 500 },
{ label: 'TABATA', value: 2, time: 900 },
{ label: 'POR VUELTAS', value: 3, time: 800 },
{ label: 'AMRAP', value: 4, time: 1200 },
{ label: '21-15-9', value: 5, time: 700 }
];
The variable is updated, but the countdown property is not. Any good solution out there? Don't know what else to try.
angular-timer requires momentjs and humanize-duration libraries.
This is mentioned at - https://github.com/siddii/angular-timer#requirements
Updated plnkr: http://plnkr.co/edit/OkqS8fyZCiegsUjIW13L?p=preview
So i resolved this with Vinay K answer but instead of using timer-set-countdown i used timer-set-countdown-seconds to update the countdown and work perfect!
$scope.$broadcast('timer-set-countdown-seconds', $scope.variable);
$scope.$on('timer-set-countdown-seconds', function (e, seconds) {
console.log(seconds);
});
In my ExtJS 4.2 Application I have the requirement to show from 1 to 12 months calendar depending on the Holiday calendar from a selected employee.
I need to show something like this:
So from the above approach I think this can be done by using DatePicker components (as many as needed)
I also found this sample of how to show a complete year info:
From the above sample I think the approach would be creating a dynamic grid with custom columns and rows.
Anyone has done something similar so can give me an idea of the best way to achieve this?
Appreciate in advance.
I used Extensible.calendar
Ext.define('App.view.calendar.calendar_v', {
extend: 'Extensible.calendar.CalendarPanel',
requires: ['Ext.panel.*',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.tip.QuickTipManager',
'Ext.form.field.ComboBox',
'Ext.layout.container.Table'],
controllers: ['Main'],
eventStore: eventStore,
xtype: 'calendar',
title: 'Custom Views',
width: 800,
height: 700,
activeItem: 3,
// These show by default, turn them off
showDayView: true,
showMonthView: true,
// Defaults to 3 days. You could also set the dayCount config
// inside multiDayViewCfg to change that.
showMultiDayView: true,
// Used with the custom week view configured below
weekText: 'Week',
weekViewCfg: {
// These settings create a fixed weekday view.
// This view will only show Mon-Fri.
dayCount: 5,
// Always start the view on Monday
startDay: 1,
startDayIsStatic: true,
// NOTE: the configs below apply to any DayView or WeekView. If you wanted all day
// and week views to share these same settings, you could simply pass these configs
// in the general viewCfg. Any views that do not use them will ignore them. They are
// only on this view in this sample to demonstrate how they can be easily customized per view.
// Hide the half-hour marker line
showHourSeparator: false,
// Start the view at 6:00
viewStartHour: 6,
// End the view at 8:00pm / 20:00
viewEndHour: 20,
// Default the scroll position on load to 8:00 if the body is overflowed
scrollStartHour: 8,
// Customize the hour (and event) heights. See the docs for details on setting this.
// This example will be double-height (the default is 42)
hourHeight: 84,
// Allow drag-drop, drag-create and resize of events in 10-minute increments
ddIncrement: 10,
// Since the hour blocks are double-height, we can shorten the minimum event display
// height to match the ddIncrement
minEventDisplayMinutes: 10
}
});
And then I load in events from a store
var x = 1;
var u = Ext.data.StoreManager.lookup('calendar.calendar_s');
u.load({
callback: function () {
Ext.each(Ext.data.StoreManager.lookup('calendar.calendar_s').data.items, function (value) {
eventStore.add({
CalendarId: (x + 1),
EndDate: value.data.date,
IsAllDay: true,
Location: "",
Notes: notes,
RecurRule: "",
Reminder: "",
StartDate: value.data.date,
Title: "",
Url: "sumpnsumpn"
})
});
}
});