i'm using anychart stock 8.1.0. I have a dataset with 24 hours of date with per-second resolution. I would like for only a small 30 seconds subset of that data to be shown/zoomed on load.
I could not find out how to do this so i tried adding a range selector option like below but i couldn't get that working either.
rangeSelector.ranges([{
'text': 'Testing',
'startDate': '2006 May 16 13:00:00',
'endDate': '2006 May 16 13:00:30'
}
If i use the range selector slider i can zoom as i require but how do i define this in code ?
So to recap i'd like
have the chart zoomed on load for a specific time range of type
start-stop in format of dd/MM/yyy mm:ss
have range selector button options for various time ranges of same format as above.
thank you.
Yes, you can define your own custom periods for rangeSelector, but if you want to zoom to specific period on load you have to call selectRange() method after chart drawing.
If you want to show only 30 seconds in the beginning of your series you should put the following line into your code:
chart.selectRange("second", 30, "first-date", true);
You can learn more about this method here
And find a similar example of using it here
Related
I'm using recharts library to create a chart. The x axis of the chart is the timeline axis and I use timestamps as values for it. What I'm trying to do is to display only 5 ticks(for example) spaced equally. I found a lot of people having similar problems on the library git repository. One fixes was to use scale="time" and setting a minimum tick gap for x axis:
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
scale="time"
minTickGap={120}
tickCount={7} */
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
I'm using the brush component of the library to zoom in on the chart and the problem with this implementation is that when I zoom in sometimes it displays all the ticks.
Ex. without zoom in:
Ex zooming in:
I found that if I remove the scale="time" parameter and set a specific tickCount and set interval to 0 the problem that occurs when I zoom in disappears but 1 tick is missing or it appears only when I zoom in.
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
interval={0}
tickCount={7}
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
Does anyone now how can I fix the issues mentioned above? I don't think I can use predefined ticks based on maximum and minimum values of the axis because those values becomes irrelevant when I zoom in.
There is no cure for it as far as I know. You could mention all your tick explicitly in ticks param like ticks={[10,20,50,200,500,1000]} and they will do just fine
Another workaround for me is to set domain as
domain= {['auto','auto']}
and it shows all the ticks correctly.
I am using Recharts Library for the graph in the ReactJS. There is one strange issue of setting intervals for the Y-Axis. There are few options available "preserveStart" | "preserveEnd" | "preserveStartEnd" | Number. For me, this is not working.
I have attached a couple of screens to showcase what I am expecting and what I get.
Expectation
Actual
Note: Due to the confidentiality of the project, I am not allowed to put the code here. Please let me know if more information is required.
In order to see a given number of ticks on the Y-Axis, you need to use the props tickCount - the number of ticks to show (by default, it's 5).
So you're Y-Axis should simply look like this:
<YAxis tickCount={10} />
The interval props allows you to show only a part of the ticks; '0' would show all, '1' would show half (1 every 2 ticks), etc.
I've been looking around at SO and Google but not really found anything that matches my current problem.
I'm making a stacked barchart based on two series. One series shows late, outstanding issues and one shows only outstanding (still within the due date).
The problem is that my legend shows four individual items, whereas I only want two (one for each series).
I've attempted by adding this in the Series Properties>Legend>Do not show this series in a legend formula (fx):
=IIF(Fields!ReadyForWork.Value = 1, False, True)
This basically checks to only display the legend if the value is 0. However this hides both the items in the legend, not just the one.
The relevant data I'm working with right now is:
TRK_Feature_LKID (basically each row's PK)
DateToBeActioned (important for maroon) - Used to determine if Date.Now() is higher to a set date when the issue should have been resolved.
ReadyForWork - A numeric value (0 / 1) to see if the item is ready for work.
AcountablePerson - The name of the responsible person (x-axis).
In below image I want to remove the red 'Late Issue' and the maroon 'True - ReadyForWork'.
So I managed to fix this by adding a separate field in the report's dataset that basically checked whether the DateToBeActioned was outside of GETDATE:
CASE
WHEN DATEDIFF(day, [DateToBeActioned], GETDATE()) >= 0 THEN 1
ELSE 0
END as 'Outstanding'
And by using that field in the legend as well as specifying that the dataset should only retrieve issues that had not been completed:
WHERE ReadyForWork = 0
I was able to set the legend to only show the two preferred items.
So for anyone who might face a similar issue; one way of fixing it might be to have a seperate field in your dataset that checks the case that checks for the parameters you don't want / you want to show in the legend.
I have an app that creates discrete bar charts. For some odd reason (which seems to be an internal error in the library), the y-axis scales to a data value which has the LOWEST number of integers in the value. For example, one data set has (1750, 1056, 1200, 850). The y-axis scales the maximum range to "850", even though the other numbers are all larger. I've tried using the forceY function, setting the maximum range value to the callback of the data value in my json, but it doesn't work. The problem only corrects itself if all of the numbers in the data set have the same number of integers in the value (i.e. all hundreds, thousands, etc). What is going on and is there a way to fix it??
For reference, here is my plnkr. Go to the "Top 5 SIC by Comments" report chart to see what I mean. The same problem occurs with the "Top 5 Topics by Comments" report chart as well. If anyone has any insight as to how to fix this problem, please let me know. Thank you ahead of time.
I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.
(source: michaelandlisa.us)
I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).
Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here.
To alter this behavior, you need to first enable the text.
Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here.
This can be coupled with a global counter to determine each Xth iteration.
I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.
http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png
I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):
.DataSeries(series => series.Scatter()
.Data(totals)
.CollectionAlias("Total")
.Color("transparent")
.AddToLegend(false).DataPointText(dtp =>
{
dtp.Enabled(true);
dtp.Format("{point.y:n0}");
dtp.Style(s => s.FontWeight(FontWeight.Bold));
dtp.Color("red");
dtp.X(15);
dtp.Y(12);
}))