I have a HighStock chart (type column) that contains a value for each day. What I would like to do looks very simple, however I cannot manage to achieve it. I would like my data to appear day by day when we display one month and month by month when we display more than one month. I have 3 buttons for range selector :
buttons: [{
type: 'month',
count: 1,
text: 'Vue par mois'
}, {
type: 'year',
count: 1,
text: 'Annee'
}, {
type: 'all',
text: 'Tout'
}]
I tried to play with de datagrouping options but the problem is that the default value group my data by week instead of month. I tried many solutions but nothing works :
units:
[[
'month',
[1]
],
[
'day',
[1]
]
]
The solution above for example group the data by month, even if we display for one month, resulting in a big column block on the graph.
I feel like I'm missing something but what ? I hope my explanations are understandable. Any help would really be appreciated.
Thanks in advance !
Milene
Related
I am using Highchart to show the data on spline chart. Here I have two date range from 2021-09-12T18:30:00.000Z to 2021-09-18T18:29:59.999Z which will change according to date range selection.
Issue: The spline chart x-axis range tick starts with the date 11 and my graph starts from second tick that is 12. I want the x-axis tick should start from 12 and end with 18 like the above date range and the data given below. I am adding JS fiddle link for the reference.Spline Chart Thank you.
[
{
name: 'Allowed Request',
data: [
[Date.UTC(2021,8,12), 2202],
[Date.UTC(2021,8,13), 1234],
[Date.UTC(2021,8,14), 1245],
[Date.UTC(2021,8,15), 3000],
[Date.UTC(2021,8,16), 2345],
[Date.UTC(2021,8,17), 2505],
[Date.UTC(2021,8,18), 4933],
]
},
{
name: 'Denied Request',
data: [
[Date.UTC(2021,8,12), 1234],
[Date.UTC(2021,8,13), 2202],
[Date.UTC(2021,8,14), 3000],
[Date.UTC(2021,8,15), 3000],
[Date.UTC(2021,8,16), 2345],
[Date.UTC(2021,8,17), 3000],
[Date.UTC(2021,8,18), 2505],
]
}
]
In your config, there is a startOnTick option which is set as true. Change it to false solve the issue.
However, if you want to keep this space which is added by startOnTick option, you can leave it as a true, but you need to add showFirstLabel property set a false.
Demo: https://jsfiddle.net/BlackLabel/qnfe7w05/
There are 52 weeks in a year, If i manually group 13 weeks into one quarter, it will give me a wrong result in high charts. Sometimes 13th week will be in 2nd quarter,so is there any function which will group weeks into quarter ?
Iam gettting data in following format:
Response is an object,consists of quarterNumber, actual production and planned production and weekwisedata, which is a list consists of weeknumber and weekly planned production and weekly actual production.
{"response":[{"quarterNumber":"1","actualQuarterProduction":"1.5","plannedQuarterProduction":"13.49","weekwisedata":[{"quarterNumber":1,"weekNumber":"1","weeklyPlannedProduction":"0","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"2","weeklyPlannedProduction":"13.49","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"3","weeklyPlannedProduction":"0","weeklyActualProduction":"0"},
{"quarterNumber":"2","actualQuarterProduction":"211.18","plannedQuarterProduction":"850",
"weekwisedata":[{"quarterNumber":2,"weekNumber":"14","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"15","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"16","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"17","weeklyPlannedProduction":"53.96","weeklActualProduction":"0"},{"quarterNumber":2,"weekNumber":"18","weeklyPlannedProduction":"67.45","weeklyActualProduction":"46.45"}]}
In Highchart iam displayng the data manually as shown below:
function(dataVal){
drilldown: {
series: [{
id: 'Quarter1a',
name: 'Actual Quality ',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyActualProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyActualProduction)
}
]
},
{
id: 'Quarter1p',
name: 'Planned Quantity',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyPlannedProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyPlannedProduction)
},
{
name: 'Week3',
y:parseFloat(dataVal.response[0].weekwisedata[2].weeklyPlannedProduction)
}
]
} ]
}
As you can see the above code,manually iam setting week number and values. iam grouping 13 weeks into quarter. can it be automated based on year?
In my hits, i have a prop that contains added .. and when i try to make a filter on date added, list of common date appears. How can I make a filter that says.. 1 day ago, 2 days ago, 1 week ago etc.. then filter the results.
so instead of showing full list of dates as filter, i can just personalize it depending on what i want.
Script:
//Algolia Widget for Date Added.
search.addWidget(
instantsearch.widgets.menu({
container: '#added-menu',
attributeName: 'added',
limit: 10,
templates: {
header: 'Added'
}
})
);
//Date added will display the whole list of common dates.
Update : I was able to find solution for handling the relative date and it is by the use filter named numericSelector found in algolia documentation. the situation is, i just need to copy the relative dates we have in our old App.
here are the constraints :
Use a relative time/date filter.
Do not display the common dates in the hits.
Use a dropdown.
search.addWidget(
instantsearch.widgets.numericSelector({
container: '#added-menu',
attributeName: 'added',
templates: {
header: 'Added'
},
operator: '>=',
options: [
{label: 'Anytime', value: 0 },
{label: 'Today', value: daysBefore(1) },
{label: 'Within 3 Days', value: daysBefore(3)},
{label: 'Within 1 week', value: daysBefore(7)},
{label: 'Within 2 weeks', value: daysBefore(14)},
{label: 'Within 1 Month', value: daysBefore(30)},
{label: 'Within 3 Months', value: daysBefore(90)},
{label: 'Within 6 Months', value: daysBefore(183)}
]
})
);
daysBefore()
is a function that returns the current date minus
the number of days and then converted to a linux timestamp.
I am new to amCharts. Does anyone know how to add period selector in AmSerialChart.
I have tried this:
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.position = "left";
periodSelector.periods = [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
It doesn't create any change.
Period Selector is an exclusive feature of the JavaScript Stock Chart, and is not available in regular serial charts.
There are two ways to go about it:
1) Implement your own external HTML controls to select periods. Then use chart's zoomToDates() method to set specific time range.
OR
2) Switch to Stock Chart and get Period Selector out-of-the-box. Stock Chart can be configured to look exactly like Serial chart. The biggest difference is that you will need to define panels (in your case just one) as well as data sets (again just one).
If you could update your question with the code and data you have so far, I could update mine with a similar Stock Chart.
Depending on the value of the highcharts range selector, I would like to change the data grouping. In my column chart, if one week is selected, there should be 7 bars, if one day is selected, there should be 24 bars, if one month is selected, there should be a bar for each day of the month.
There doesnt seem to be any way to supply a function inside the highchart configs to accomplish this, but I may be missing something.
My current plan was to handle a click event on the range selector to update the series data to contain the correct amount of points. But there may be a better way.
Thanks
There certainly are a bunch of options available in highstock for data grouping.
The primary one that you should look at is units. Here you can specify what kind of groups are allowed.
Top this up with groupPixelWidth and you have what you need, this width defines how small can a point in your chart be, if the number of points on the chart goes higher, the width per point decreases, once it goes below this threshold highcharts would force grouping. Keep this large enough to force grouping of next level, given you want not more than ~30 points on the screen.
dataGrouping: {
units: [
['hour', [1]],
['day', [1]],
['month', [1]],
['year', null]
],
groupPixelWidth: 100
}
#jsFiddle
Instead of using events you can combine range selector buttons with data grouping.
See: "Data grouping by buttons" in the API https://api.highcharts.com/highstock/rangeSelector.buttons
Example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/datagrouping/
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}]
},
We tried a Hack around this, where we used Highstock's (Splinechart) RangeSelector, Event and DataGrouping. On click of weekly rangeselectorButton we catch this event through setExtremes. Post catching the event approximate it to "sum". If you are using two series than iterate the object.
events: {
setExtremes: function (e) {
if (e.rangeSelectorButton != undefined) {
var triger = e.rangeSelectorButton;
if (triger.type == 'week') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['week', [1]];
});
} else if (triger.type == 'day') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['day', [1]];
});
}
}
}
},
#fiddle