I have a dataset
2019/1/1 - 14
2019/1/5 - 18
2019/2/19 - 17
2019/3/15 - 18
that I want to show in a line diagram in my React Native app. I use react-native-svg-charts for my charts, and while I'd prefer using that I'm of course willing to look at alternatives.
How can I make a line-graph that has the values 14-18 on the y-axis and the dates distributed on the x-axis so that the graph shows the non-regularity in the data entries? Until now I get them so that each entry is equally spaced to its neighbour, and I want the spacing between the entries to reflect the distance in time between the entries.
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 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.
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.
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?
I have created a Plunkr for my issue, found at the link
I am having a problem with scaling when using month values. I am sure this is a simple fix.
A visualization of my issue is below (look at December):
In short, when using d3.extent in an update pattern for the axis and the bars, d3 is not computing the domain correctly. It seems to think it is less than it is and so I have one entry too many, leading one bar to hang off and the x axis to be one value too long.
My xScale is computed normally:
xScale = d3.time.scale()
.domain(d3.extent(data,function(d){return d.funded_month}))
.rangeRound([0, (w + offsetBar) - (marginleft + marginright)]);
Both the x Axis, bars and text are all working off the same domain.
When visualizing all years, the viz appears correctly:
Is the issue that the number of values in each respective visualization are different (13 years vs 12 months? What is the mistake?
I was not able to implement an easy solution with existing libraries.
Because D3 interprets the "Month, Year" format assuming the day is the first of the month at midnight, January to December is considered only 11 months.
So I stepped the days of every month to create a smooth axis:
2001-01-01,68991364
2001-02-04,554541108
2001-03-07,151123291
2001-04-10,283000000
2001-05-12,8093737
2001-06-15,55718802
2001-07-18,95060100
2001-08-21,78000000
2001-09-23,150000000
2001-10-25,193330000
2001-11-28,59948530
2001-12-31,142424927
I was able to use an x translate on my axis text to move in sync with the bars.
Mike Bostock goes further into this issue here.