I'm trying to use anychart stockcharts to concurrently draw stock ticks + custom events.
These custom events happen at irregular time-intervals (i.e.: they are non-equidistant). The problem is that Stockcharts automatically spaces these events out evenly along the x-axis, instead of correctly showing the irregular timed nature.
Note that I did manage to get a simple linechart working with the irregular timings, but not a StockChart.
How do I set a StockChart to correctly display non-equidistant data-points, or is this simply not possible with stockcharts?
One needs to change x scale type to 'scatter':
var chart = anychart.stock();
// change x scale to to scatter
chart.xScale('scatter');
Here is a sample https://playground.anychart.com/1YPiOtqh
Related
I'm using highcharts-react-official for a histogram with typescript. The problem I'm facing is, when user zooms in the values on the extreme of x-axis disappear (highlighted relevant x-axis values).
highchart
The zoom configurations that I'm using in Highcharts are something like this:
zoom on x-axis only
I did go through Highcharts documentation and some articles as well, but couldn't find any solution. If you have any previous experience in Highcharts then I'm sure you would be able to assist me here.
You are looking for cropThreshold property. From Highcharts API:
cropThreshold: number
When the series contains less points than the crop threshold, all
points are drawn, event if the points fall outside the visible plot
area at the current zoom. The advantage of drawing all points
(including markers and columns), is that animation is performed on
updates. On the other hand, when the series contains more points than
the crop threshold, the series data is cropped to only contain points
that fall within the plot area. The advantage of cropping away
invisible points is to increase performance on large series.
Defaults to 50.
You can increase the value:
plotOptions: {
series: {
cropThreshold: 9e9
}
}
Live demo: https://jsfiddle.net/BlackLabel/w6y4zdk8/
API Reference: https://api.highcharts.com/highcharts/series.column.cropThreshold
I have created a custom control which has Telerik RadCartesianChart. This custom control creates any number of charts based on user dropdown selection. The number of charts on screen can vary but all have same x axis. I added a chart track ball line on custom control which is working fine on one chart on mouse movement. I want to add the same track ball line on all of the other chart on window so that movement on one track ball would reflect the same position on the other charts.
How could I implement this behavior programmatically?
I don't know if you can do what you are attempting without adding a ChartTrackBallController to every chart.
What I'd suggest is adding multiple series to the one chart, share the X axis but have multiple Y axes as required. This way the ChartTrackBallController will pick a point on all series in the chart.
// Trackball
ChartTrackballController ctbcMain = new ChartTrackballController();
ctbcMain.TextNeeded += ctbcMain_TextNeeded;
ctbcMain.InnerPointSize = new SizeF(0, 0);
ctbcMain.OuterPointsSize = new SizeF(0, 0);
rcvUPM.Controllers.Add(ctbcMain);
rcvUPM.ShowTrackBall = true;
In the above code snippit, rcvUPM is a radchartview containing all the data series you want to show, and ctbcMain_TextNeeded is used to customise the content of what the hover for the trackball shows.
It seems that by default the hover content will contain multiple points from each series, even after the InnerPointSize and OuterPointsSize was set to zero on advice by Telerik support a LINQ FirstOrDefault was needed on the collection of DataPointInfo objects to limit it to one point per series.
Having independent multiple axes for each series in scientific graphs is very common condition.
The requirement is,
The graph can have more than one series. and each series is associated with separate Y axes and one X axis (Time).
E.g. Y1 axis shows temperature and Y2 axis shows pressure against Time on X axis.
Both axes may show different scales (range min - max) like temperature from 0 to 100 Degree kelvin & pressure from 300 to 900 kPa and accordingly the series will be plotted.
I am looking for open source control or freeware which can provide this feature.
I am trying to use WPF for plotting graphs and studying WPF Tookit & Dynamic Data Display for that.
Please look at FLOT example of multiple axes. I want this feature in WPF.
But I am not able to find feature of independent multiple axes in these controls.
Please help otherwise I have to drop the idea of using WPF.
Thanks in advance.
As far as Dynamic Data Display goes, I know that it is very possible to implement what you are looking for. You can always just make a new axis object and add it to the plotter's children. You can then interact and map each axis freely. The key to manipulation in D3 is the mapping, so if you have two different data sources, you can plot them on the same graph dependent on the axis that you map them to, and how you map them. Dynamic Data Display should fit your requirement.
I have a silverlight chart with an Area Series.
my data source returns many points representing time of day to be displayed in the chart's X-axis.
since the X-axis has many values, the values appear scrambled as each value is stuck beside the next value.
is there a method to avoid displaying all the values in the X-axis and display intervals instead ?
thanks
The DateTimeAxis has Interval and IntervalType properties that allow you to set the interval the you prefer.
I'm using the newest chart control from silverlight toolkit to plot some data. For small cases it works ok, but for bigger samples the X axis labels overlap. It would be no problem if the chart would simply omit some of the values or I could specify to just show every 10th of them ...
I couldn't find any properties providing this behavior. Any ideas?
Assuming this is a Linear axis then you can specify the interval to use via the the Interval property on the axis.
If the axis in question is Category Axis then dropping some labels may not be valuable to the user. One option is to use the LayoutTransfomer to rotate the labels to an angle reducing the width needed for each one. See this Delay Blog on the subject.