Highcharts series gap auto zipping - javascript

I am having an issue with the gap between separated series of highcharts.
For example, I have a chart with two series. One starts from (1st March 2004) and the other starts from (1st March 2009). They do not overlap each others. When showing on the chart, the barchart automatically zips the time between two chart (skipping the year 2005, 2006...2008) and display 2 time series closing to each others.
Please refer to this for more detail:
https://jsfiddle.net/quangvinh910/6vr6dg15/2/
pointStart: Date.UTC(2004, 3, 1),
pointStart: Date.UTC(2009, 3, 1)
How can I show show the full time range between that on the x-axis?

Highstock automatically will try and strip out the gaps in the data so that there is not lots of "dead" space. This is done with the option xAxis.ordinal:
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 for nights or weekends will not take up space in the
chart. Defaults to true.
It is true by default. Try setting it to false. Demo.

Related

Remove weekends from highcharts

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/

Grouped-categories chart styling

I'm creating a chart that has a range [2010 January, 2014 December]. I might have data for each month in between (if no data, it's null) and my idea was to use the grouped-categories plugin in order to create a x axis that shows every month (not the label itself) and group the months in years.
I achieved it using the grouped-categories plugin. I'm using primefaces that calls a Javascript function to display the JSON content as a chart.
[a link] http://jsfiddle.net/TFhd7/161/
The main issue is that in the x-axis I'd like to make it like a ruler:
- decrease the x-axis height (the thicks size)
I tried tickLength but it doesn't work for grouped-categories chart. Any ideas?

Strange tooltip behavior with long series in highcharts

I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},

How to display day label if there is only one data point in flot?

Following is my xaxis parameter for flot -
xaxis: {
mode : "time",
minTickSize: [1, "day"],
color : "#999"
}
What I want is that day labels be visible on the x-axis. It works when I have more than one data point as in here -
But it doesn't work when I've only one data point.
Is there anyway to render the day label when there is only one data point? I tried using
"1 hour" as the minimum tick size and it clutters the timeline.
Here is an example of a single day I created. I don't think there should be any issue.

How to use dates in X-axis with Google chart API?

Is there a way to plot a chart with Google chart API so that the X-axis values are days in a month?
I have data points that are not provided with the same frequency. For example:
Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500
I want to make a chart that will separate each data point with the relative distance based on time during a month. This can be done with Excel, but how can I calculate and display it with Google chart?
Other free solutions similar to Google chart or a free library that can be used with ASP.NET are also welcome.
UPDATE This is now supported directly in the Chart API using the advanced graphs "annotated chart" feature - https://developers.google.com/chart/interactive/docs/gallery/annotationchart
I have done this on my ReHash Database Statistics chart (even though the dates turned out to be evenly spaced, so it doesn't exactly demonstrate that it's doing this).
First, you want to get your overall time period, which will be analogous to the overall width of your chart. To do this we subtract the earliest date from the latest. I prefer to use Unix-epoch timestamps as they are integers and easy to compare in this way, but you could easily calculate the number of seconds, etc.
Now, loop through your data. For each date we want the percentile in the overall period that the date is from the beginning (i.e. the earliest date is 0, the latest is 100). For each date, you first want to calculate the distance of the present date from the earliest date in the data set. Essentially, "how far are we from the start". So, subtract the earliest date from the present date. Then, to find the percentile, we divide the distance of the present date by the overall time period, and then multiply by 100 and truncate or round any decimal to give our integral x-coordinate.
And it is as simple as that! Your x-values will range from 0 (the left-side of the chart) to 100 (the right side) and each data point will lie at a distance from the start respective of its true temporal distance.
If you have any questions, feel free to ask! I can post pesudocode or PHP if desired.
I had the same problem, found scatter plots on Google Charts, it does exactly what is necessary.
Here's the code I ended up with (took theirs as a starting point):
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Quantity');
data.addRow([new Date(2011, 0, 1), 10])
data.addRow([new Date(2011, 1, 1), 15])
data.addRow([new Date(2011, 3, 1), 40])
data.addRow([new Date(2011, 6, 1), 50])
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('visualization'));
chart.draw(data, {title: 'Test',
width: 600, height: 400,
vAxis: {title: "cr", titleTextStyle: {color: "green"}},
hAxis: {title: "time", titleTextStyle: {color: "green"}},
lineWidth: 1}
);
}
Note that they seem to count months from 0, i.e. January is 0, February is 1, ..., December is 11.
It looks like you can now do this with advanced graphs:
http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html
This can be done with Google charts quite easily, but your application must calculate the labels
The chxl chart x label parameter is the one you need. The following example labels a y-axis with numbers in 50 steps, and the bottom with dates
chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009
Hai. I'm thinking along the same lines as you. I can foresee problems where labels overwrite each other, and can think of only two approaches.
1) figure out how many characters in each date,, depending on format (mon/tue, monday/tuesday, 1 jan/1 feb, 1st january, 29th february, 14/2/2010 ..etc) then calculate how many labels you can fit across your chart width (which might get gnarly, involving char width in pixels (easier for fixed fonts), or just a few trial & errors).
Of course, your labels might might align directly with any data.
2) use multiple X-axis labels and place your dates vertically.

Categories