I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?
Related
This is a somewhat simplified version of a chart I built recently. When I select the Extended time rage checkbox, more data points will show and the X axis will adjust accordingly.
When I clear the checkbox the additional data points will disappear (OK) but the X axis will not go back to the previous state (bug?).
Oddly enough if I change the time unit back and forth (for example monthly -> weekly -> monthly) then the X axis will eventually redraw correctly.
Why does this happen an how could I work-around the issue?
Also note that Y axis seem to update fine every time the checkbox toggles.
Chart renders with expected x-axis (when clicking checkbox) if xscale "domain" is changed from
"domain": {
"signal": "timeSequence(tbin_delivered.unit, tbin_delivered.start, tbin_delivered.stop)"
}
to
"domain": {"data": "deliveries", "field": "unit0", "sort": true}
Note: An issue with this workaround is that only time units with data are shown in the x-axis. For example, selecting time unit "daily" in the dropdown shows chart with no gaps for Saturday and Sunday when there were no deliveries.
Vega docs for ordinal scale and sort parameter:
https://vega.github.io/vega/docs/scales/#ordinal
https://vega.github.io/vega/docs/scales/#sort
View chart in Vega online editor
It looks like signal tbin_delivered is not updated when the time range shrinks. This is an edited chart; the only difference is in the tooltip (which will now show the value of tbin_delivered.start).
I wonder if this behavior is correct? tbin_delivered is calculated in the deliveries data stream, which is derived from stream fruit, which depends on the extendedtime signal, which does change.
Posting it as an answer because the link won't fit in a comment.
The issue appears to be the values of signal tbin_delivered.start and tbin_delivered.stop are not updated when dataset deliveries values are changed.
The workaround in this solution is to use Vega transform extent to obtain minimun and maximum values of the dataset after data have changed. The function timeSequence in xscale will then show the updated domain correctly.
Added Vega transform:
{
"type": "extent",
"field": "unit0",
"signal": "signal_delivered_extent"
}
Vega scale:
"scales": [
{
"name": "xscale",
"type": "band",
"range": "width",
"padding": 0.05,
"round": true,
"domain": {
"signal": "timeSequence(tbin_delivered.unit, signal_delivered_extent[0], signal_delivered_extent[1] + 1)"
}
Note that Vega expression function timeSequence: "Returns an array of Date instances from start (inclusive) to stop (exclusive)...". For the rendered x-axis domain to include the maximum value, the argument for stop in timeSequence function has to be higher than the maximum value in signal_delivered_extent.
View in Vega online editor
I'm trying to show only a certain amount of yAxis Lines in my Apache ECharts Chart.
I tried the following:
yAxis: [
{
type: 'value',
min:0,
max:6000
}
],
yAxis: [
{
type: 'value',
scale:true,
splitNumber:4,
}
],
I need to dislpay it like this:
For your information: I need this to work on every Chart-Type, Line Chart, Bar Chart etc.
Thanks in advance :)
So, as I have not got any answer. I wanted to share with anyone who might need it in the future, how I solved it.
I looked and got the highest number of the data for the current Chart and looked if it is near 1000 I rounded it up to 1000, if it is over 1000 I rounded it up to the nearest 200.
For example a number 1059 becomes => 1200 or the number 1215 becomes 1400.
Than simply get this Number and divide it by 4(to have 4 Lines).
And give this number to the yAxis max. For the min set 0.
I am creating a simple time-based data plot using amcharts with has 5 values, its working great but every time there is 2 or more readings with the same value it stack up and only 1 bullet is visible, i tried to create a custom bullet but still no luck.
Is there a way to separate the bullets individually just to make it presentable.
Below is my code.
{
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#2980b9",
"bulletSize": 19,
"customBulletField": "bullet",
"id": "reading_4",
"lineThickness": 0,
"title": "reading_4",
"showHandOnHover": true,
"valueField": "column-8",
"balloonText": "<div style='margin:5px; font-size:12px;'>Reading 4: <b>[[value]]</b></div>",
"visibleInLegend": false,
},
Is there away to make it like below
I am a beginner for highcharts. I was trying something and got stuck. My x axis has values repeated multiple times. Tooltip values should contain date and time as shown. but the thing i want to change is the x axis values. same value must be shown only once and not repeated everywhere where there is data.
X axis format must be DD-MMM and tooltip should be DD-MM-YY HH am/pm .
is this possible?
Here is my trial code
http://jsfiddle.net/j6oqcgp2/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
labels: {
formatter: function () {
y=(this.value).substring(1,6);
return y;
}
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function () {
y=(this.x).substring(0,15);
return y;
},
shared:false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [5,10,19,10,4,6,8]
}]
});
and this is how i want it to be
If your x-axis categories are going to be a predictable set of values (for example, four readings on each day), then you simply can add the tickInterval attribute to show a new axis label on when the day changes (see http://api.highcharts.com/highcharts/xAxis.tickInterval).
So, if you had four readings per day, you would add tickInterval: 4 to your x-axis options. This would show an axis label at every fourth reading, or, in this example, once per day.
If, however, your x-axis categories are not predictable (for example, any number of readings per day), you may want to look at this Highcharts demo, which shows a chart with irregular time periods: http://www.highcharts.com/demo/spline-irregular-time. In this demo, you'll see regular, non-repeating axis labels for whatever unit you're measuring (hours, days, etc.) and the data being plotted as frequently as it's recorded in the data.
I hope these examples and resources are helpful for you.
I am using jqplot through Primefaces and Have input to Bar Chart like this:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: {"03-05-2015": 10, "06-05-2015": 3}
When I pass this data as BarChartModel, I got data wrongly drawn on the chart.
The data follows the first series, as the Series 2 is drawn after the Series 1 dates. I've to convert the data to be as follows in order to get the chart drawn fine:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, *"03-05-2015": 0*, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: { *"01-05-2015": 0* , "03-05-2015": 10, "06-05-2015": 3}
Notice the data items between * and *.
Any advice here? (if using DateAxis helps?)
I had the same problem with LinearChartModel when I has not using DateAxis.
As a workaround, I filled my series with all possible data and then reordered the list. Urg!
Should work with BarChartModel too.
Using DateAxis you just need to add your date axis with the timestamp, like this:
serie.set(new Date().getTime(), new Double(123));
or this
serie.set("2015-09-08", new Double(123));
Put the DateAxis in your LineChartModel like this:
DateAxis axis = new DateAxis("Data da inspeção");
linearModel.setZoom(true);
linearModel.getAxes().put(AxisType.X, axis);
linearModel.setExtender("linhaSetor");
And format your date in the extender.js:
function linhaSetor() {
this.cfg.axes.xaxis.tickOptions = {
show : true,
angle : 45,
formatString : '%d/%m/%y %Hh'
};
}
You don't even need to put the data in order.