Is it possible to remove certain days in highcharts? I have a chart that only get data intervals from Monday to Friday. The problem Is that Saturday and Sunday is auto added to the graph even when there is no data for these days. I cant find anything that helps on api.highcharts.com they usually have solutions to all graph related problems but I cant seem to find anything about my problem. It's probably some easy option in the chart but I cant find anything that works.
You have two options, use highcharts and breaks.
An array defining breaks in the axis, the sections defined will be left out and all the points shifted closer to each other.
Requires that the broken-axis.js module is loaded.
It would look something like this, in a datetime axis:
xAxis: {
tickInterval: 1,
breaks: [{
from: 1537567200000,
to: 1537740000000,
breakSize: 1
}]
}
Working example: http://jsfiddle.net/ewolden/L3ykegzq/
Or switch to highstock where you can have an ordinal axis (ordinal is used by default):
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
Working example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/ordinal-true/
This is a line chart of DateTime type and when I decrease the size of the browser the tick on the x-axis changes.
What I would like is to keep the end date fixed with the current date, even if the size of the browser page changes.
Can anyone let me know how will that work?
tickPositioner callback function gives you an access to tick generated by Highcharts. This code removes the last tick and inserts a custom one:
tickPositioner: function() {
this.tickPositions.pop();
this.tickPositions.push(Date.UTC(1971, 5, 23));
}
Live demo: http://jsfiddle.net/kkulig/h6ttu3v8/
This causes that the last tick will always fall on 23 June. Also make sure that extremes on your axis have proper values so that the last tick is visible.
API reference: https://api.highcharts.com/highstock/xAxis.tickPositioner
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
http://jsfiddle.net/jlbriggs/b3t7ueam/
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
http://jsfiddle.net/jlbriggs/v76u9w2L/
]]
I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.
There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:
<script src="https://code.highcharts.com/modules/data.js"></script>
and
data: {
csv: csvData
}
The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.
I am loading around 14 days of data using highcharts js, there is a problem in the X-axis whenever the dataset loaded with respect to dropdowns is having non-continuous data (i.e for day 1, 2, 3 there is data for 4,5,6 no data for 7,8,9 data present and so on )
For this scenario, the output is showing wrong values in x-axis and are correct only in tool tip.
Also like in the example above the data for days 7,8,9 will show on 4,5,6 on x-axis but show 7,8,9 on the tool tip.
Example 2: Data for 15th july(tooltip) shown in 13th july (x-axis)
However, in another tab this does not happen and for non-continuous data also everything is shown properly, for missing data, 0 value is shown there and continued thereafter.
I have checked and rechecked the codes and they are exactly the same. Is this a bug ? I don't understand why this is happening.
Code snippets:
xAxis: {
type : 'datetime',
min : Date.UTC(new Date(processed_json[0][0]).getYear(),new Date(processed_json[0][0]).getMonth(),new Date(processed_json[0][0]).getDate()),
max : Date.UTC(new Date(processed_json[processed_json.length - 1][0]).getYear(),new Date(processed_json[processed_json.length - 1][0]).getMonth(),new Date(processed_json[processed_json.length - 1][0]).getDate())
}
All approaches/suggestions are most welcome
I have been playing with Cubism for a few days now. After successfully visualizing real time data, now I'm trying to visualize historical data.
Here is my scenario:
I want to make a history page for each user with each horizon bar showing for each day of the week. Since I have data for every 10 mins the .size would be 144. So the axis should also show 12 AM to 11:59 PM. This would show data for the last week, a day at a time.
Some problems I faced:
I couldn't get the axis to show only time, it shows day and date as well. Even if it is some other day it won't matter much since I can change the start and stop within the metric definition. How can I change the axis to only show time of day in 144px?
Is it possible to do this using Cubism?
Change cubism_axisFormatDays on line 1061 on cubism.js like this and tell me if it works:
cubism_axisFormatDays = d3.time.format("%I:%M %p");
Changing the .step should actually help you to author the axis, you can also play with the .serverDelay which will also author the axis itself:
var context = cubism.context() // set the cubism context
//.serverDelay(0) // No server delay
//.clientDelay(0) // No client delay
.step((1 * (1000*60*60))) // step once ever second
.size(1440) // and make the horizon div 1440 px wide.
.stop(); //to stop the cubism from flowing like a real time cubism
//1e3 or 1 seconds
//1e4 or 10 seconds
//6e4 or 1 minute
//3e5 or 5 minutes
//36e5 or 1 hour
//864e5 or 1 day
You can also check out this post for more detail regarding .serverDelay().
Change scale default in cubism.js