I am receiving a series of data from my backend - some values paired with a specific date.
The data is sometimes inconsistent - i.e. for some dates in a specific range no data is provided.
When rendering a simple line chart, I have an option for amCharts to connect points with a line and not take into acocunt missing data, or to display gaps between points that 'surround' a missing data point.
Is there any built-in mechanism to fill such gaps with some default values? I need to display '0' on the Y axis for each gap.
Related
I have a problem with multiples series data. I have three series data (sometimes two), where the x values are dates and the y values are numbers.
I'm not able to sort the column bar based on date.
I reproduced the issue here: https://playground.anychart.com/WuqV384h
As you can see, the series data are showed as are written inside the "series" key. The dates should be sorted from 2019 to 2020.
A similar issue was asked here.
However, even using the DateTime, I'm not able to visualize the dates in the right order. If I use DateTime, the chart doesn't show the real value of the date (es. x: 2020-02-02), and the chart doesn't fit the container.
Thank you in advance.
The Cartesian Column chart uses an Ordinal scale. It doesn't provide any sorting because the Ordinal scale works with categories (names), it doesn't differ dates or names.
So, there are two available solutions:
Use real dateTime xScale that sorts points automatically. But it is a linear scale. Here is the sample.
Use the ordinal scale, but in this case, you need to preprocess your data to get the sorted array of categories and apply it to the xScale. Here is the sample.
I am trying to implement crossfilter along with highcharts. In the dataset, I have a key called 'date'. The values in the date key is of the form 'yyyy-mm' (for ex, 2018-04).
While implementing, I want the X axis to contain the dates in the format described here: for 2018-04, it should display June-18, and so on.
I was able to implement this by extracting the month and year from the date key. But, whenever the category names in the x axis is different from that given in the dataset, the crossfilter is not working correctly, i.e, whenever I click on any of the bars, every other chart's value is updated to zero. But when I set the x axis's categories back to the form given in the dataset, it works fine.
I was able to implememnt this through xAxis.labels.formatter
I want to draw a linear chart of currency rates. There are some days when there are no rates from the market (holidays). I would like to remove these days from the chart but without ugly gaps or straight lines between the days with rates.
You can see an example on this chart:
On 3rd of May there is no data, the chart is linked and the missing date is removed from the legend.
How do I get such effect using Chart.js?
I figured out a workaround. It requires some hacking but it works:
1) First, modify your dataset. Iterate over all your points and mutate x values so that they correspond to new position on your chart. Save the original x value in some property for future use (in tooltips)
2) Now you can draw the data on the chart and they look properly. The problem is with tooltips and ticks.
How to deal with the ticks:
The ticks are a list of mutated numbers (they don't correspond to their original values). You have utilize a hack. Temporarily overrite chartController.ticks in afterBuildTicks method with array of objects (instead of plain numbers) with original corresponding x values. You have to approximate original x value for every tick.
Having that you can use this information in ticks callback to return correct labels for ticks.
With such mutated data the chart won't plot. You have to revert it to the state before mutation. In the method afterTickToLabelConversion restore the ticks. Bear in mind that now they are stored in property ticksAsNumbers
The similar hack should be done with tooltips callbacks. You have access to the dataset and utated x value. Approximate original x value for mutated x and that's it.
You can use the spanGap attribute. From the documentation:
If [spanGaps is set to] true, lines will be drawn between points
with no or null data. If false, points with NaN data will create a
break in the line
I have a scatter series with two points that have the same coordinates. Each point has different data associated with it (for example weight and height of different people - two different people can have exactly the same height and weight):
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:'thomas'}]
}]
Full example at jsfiddle.
When viewing the tooltips of the chart, the tooltip of the second point shows:
Oren: 193.7,90.7
Making the data of josef inaccessible.
I would like to make the data of both josef and oren accessible, for example by putting them inside of the same tooltip.
Oren: 193.7,90.7
Josef: 193.7,90.7
How would you achieve this effect?
assume a very large data set - iteration over the entire series each time is not an option.
You could use the Tooltip formatter ( http://api.highcharts.com/highcharts#tooltip ) to manually format your tooltips.
In the formatter compare x and y value of all other points in the series(this.series) If the values are the same, add the name of these points to the tooltip.
http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515
If you go there on your browser, you'll notice that you see a graph. However, the axis are messed up! And it seems like I can't see the ups and downs of my line graph. WHy?
I don't get what's wrong. I just want to plot the simple stuff on a line chart. Just those data points. Nothing more, nothing less!
If you use basic text format for the chart data, the range of data value is 0 - 100. Values above 100 are truncated to 100. The data values you provided are all above 100, so they are truncated to 100.
You should use text format with custom scaling. Try this one. The range of data values is set to 0 - 2000 using chds=0,2000.
http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515&chds=0,2000