We're using Highcharts to render many different charts in our web application.
We have a single Formatter object which utilizes Globalize.js to format numbers, currencies and dates. Our Formatter object basically wraps Globalize.js and it's set to format based on the users locale configuration.
In order to be consistent, we want to use the same Formatter to format the info in our charts - for example in the chart tooltips, labels, etc.
Up until now, for every chart we created, we added custom formatter functions (on the chart config) for fromatting the tooltips and labels.
Is there any way to define a global custom formatter in Highcharts for all currencies, numbers, dates, etc.?
Of course, use Highcharts.setOptions() for example:
Highcharts.setOptions({
tooltip: {
formatter: function() {
return "One tooltip to rule them all!";
}
}
});
and jsfiddle: http://jsfiddle.net/3bQne/784/
Related
In our API gives data as daily basis(timestamp and value) but we need to display weekly and monthly with rangeselector integration using highcharts not highstock. Please any help me with this.
Highcharts doesn't have implemented the dataGrouping feature. It is available only in Highstock.
However, you can group your data by yourself before chart will be initialized. For example: If you want to process your data to group it, you will need to loop through your daily data, adding each value into a new data array, indexed on month.
To create a custom rangeselector you will need to create two arrays of data - one monthly, second weekly and do an update on particular button.
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
I've been looking for several days. Trying many different solutions.
I need to be able to specify the xAxis as an array of dates that are not always consecutive (thus no pointInterval and no pointStart). Otherwise my data gets way out of hand because I have more than 10 possible series across 100k+ points, with only 2 or 3 series shown at a time. If I have to include dates for each of the points across each of the series that is too much wasted memory. One simple case had over 3.2 million data points with three gaps of time (4 different sections of time based data).
The closest I have found is the Date as a category solution. Where the xAxis has to have her own formatter in order to portray the millisecond timestamps as dates.
This doesn't really solve the problem because I don't want to reinvent the functions that highcharts has for formatting the datetime of the labels based on the zoom level of the graph. And I don't want a single time format for all zoom levels.
So what I need to know is there a way to specify the datetime as an array for the xAxis without the need to add the datetime to every point and not use categories as this doesn't format the date correctly that works with boost.
I played with this fiddle (non-boost):
http://jsfiddle.net/psd3ngsh/13/
xAxis: {
type: "datetime",
categories: xArray,
labels: {
formatter: function () {
return Highcharts.time.dateFormat('%Y-%m-%d %H:%M:%S.%L', new Date(this.value));
}
}
I'm trying to build a highcharts column chart showing monthly data. This is what I get (note the irregular separation between columns):
An here's the way I'm building the chart: http://jsfiddle.net/Lae2zg11/2/
I thought it might be a problem with the timestamp timezone (1451602800000, for example, is 31/12/2015 23:00:00 in GMT, but 01/01/2016 00:00:00 in my timezone, and that's the datetime I need.
So I updated the chart data to "translate" my datetimes to GMT, but I get pretty much the same result:
And the related fiddle: http://jsfiddle.net/Lae2zg11/3/
So apparently it has nothing to do with the datetime format itself. How can I get evenly separated columns, and columns with the same width?
If you are willing to switch to Highstock you can use their ordinal feature:
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them.
You'd have to use the Highstock script instead:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
Then create your standard chart (Highcharts style) with an ordinal x-axis:
$('#container').highcharts('Chart', {
xAxis: {
ordinal: true,
// ...
},
// ...
});
See this JSFiddle demonstration of your chart with these modifications.
With Highcharts, is it possible to draw a chart representing the evolution over time of the frequency of an event, given the sequence of timestamps of the event's occurences ?
Of course, such a chart would depend on the "step" of the x-axis.
Is my question clear ?
yes it is possible
here is a working example for it http://jsfiddle.net/vJRB5/
for this to happen the xAxis type should be datetime
xAxis:{
type: 'datetime'
}
You can pass timestamp directly or you can pass the date in UTC format as well
hope this will help you.
Please familair with demos which are published on http://www.highcharts.com
I have GWT application which uses Highstock JS library.
I'd like to implement following use case:
User select start and end dates and time from DateField and TimeField controls (GXT). These controls operate with java.util.Date values. I initialize end date by new Date() and start date by current date minus last hour. Controls display dates in user browser's timezone (e.g. GMT+4).
There is a control to select timezone to build chart: local or user defined.
I need to build Highstock chart in selected timezone. Data is stored in database in UTC.
Which settings, time adjustments I need to implement in order to display correct chart?
In general it is correct to use UTC for all timestamps and perform local changes according to user timezone or similar locally in your browser. If you set global.useUTC while creating your Highstock chart, all dates will be handled in UTC timezone.