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.
Related
I want to create a control that shows a list of activities like in a gantt chart in winforms.
I don't want to use any of the non official products out there.
The diagram will have to:
Show the activities as rectangles of different colors. each activity have a start and an end date
Show an X-axis for the global time line reference (years, months, days)
Allow the user to zoom in\zoom out, changing the axis accordingly
Where should I start? I first started from scratch with an empty User Control, I can easily draw rectangle as activities but the logic of the axis and the zoom-in zoom-out feature seems too complicated to build.
An alternative could be start from a chart like an horizontal histogram and on that grid and axis draw the activities.
I am trying to implement the following example inside a Recharts LineChart: the Tooltip value is relative to the blue point, because my mouse happens to be near it, and further away from the grey point with the same x-value. If I move the mouse closer to the grey point, the tooltip content changes.
However, all available examples show that a Recharts Tooltip receives data about all the data series being drawn and that it seems not possible to discriminate the point nearest to the mouse, so that the Tooltip may provide its value only.
Is there a way to specify for which dot I want to send data to the Tooltip?
At the end of a long fruitless search, I decided to solve this problem myself.
The minimal code is published in this Github gist.
The basic problem to solve is that any standard Recharts tooltip receives information about:
the x-value where the mouse pointer is at the moment, expressed in pixels on the chart canvas
the y-values for all the data series in closest position to the mouse x-value, expressed in the y-axis real-world unit (euros, kilograms, etc.)
It is necessary therefore to feed the custom tooltip also with y-axis mouse position information expressed in pixels on the chart canvas.
The tooltip can then calculate which data series is closest to the vertical mouse position and display only the value belonging to that data series.
Extracting the y-position in pixels is tricky, because Recharts changes the mapping between pixel and ordinate values each time it redraws the chart. But there is a chart component that must know very well this mapping, in order to place itself at the right vertical position and display the corresponding real-world ordinate value: that's every tick on the y-axis.
Problem is: how do we plug into the Recharts drawing workflow in order to get to know the mapping?
Here's how: the tick property of the Recharts YAxis component allows to provide a custom React component, albeit not documented with examples.
This custom component is instantiated one time for each tick that Recharts decides to place on the y-axis.
By trial and error I found out that my custom Tick component receives the following properties:
{ x, y, payload, ...anyCustomPropertyAddedByMe }
Where x and y are the cartesian coordinates of the tick (canvas pixels) and payload is such an object:
{ coordinates, isShow, offset, tickCoord, value }
Where value is expressed in real-world y-axis units.
The idea is to find out the couple (y, value) for the lowest and highest tick in each drawing and calculate the conversion factor between pixels and real values.
This will allow the custom tooltip to perform the computations mentioned above.
(Strictly speaking it would be enough to collect two couples from the first two ticks that are instantiated at each chart repaint, but choosing the two most far apart gives more precision)
The whole algorithm is divided among three components:
a tooltipCollector: this is a JavaScript module that presents two methods:
collect(value, y), invoked by the customized tick, that stores all couples (y, value) in a private array _collection
maxAndMin(), invoked by the custom tooltip, that reads the _collection array and returns the couple of items in the collection that represent the lowest and highest ticks (watch out that vertical pixel values in a canvas are measured upside down!)
a CustomizedTick React component that:
receives the tooltip collector among its custom properties
sends its y and payload.value to the collector by invoking its collect(y, value) method
returns a very simple JSX tick markup that makes usage of y (to place itself at the right vertical position) and payload.value (to display the user the real-world value the tick indicates)
a CustomTooltip React component that:
receives the tooltip collector among its custom properties and invokes its maxAndMin() method
verifies (by considering its prop coordinate.y) whether it's close enough to one of the chart data series, using a threshold value; this ensures that the tooltip is drawn only when the mouse cursor is very close to a point on the graph
modifies its returned JSX markup to contain only the value relative to the data series the mouse is closest to; in case more points in the chart are closer than the threshold, the tooltip will present more than one value
The code in my gist has been simplified to remove all unnecessary JSX markup. It presents a chart component that puts at work all the above mentioned components.
Please note that the standard Recharts behaviour of highlighting all the data series' points to which the tooltip abscissa is pointing has not been changed. It is therefore good practice to put a color code in the tooltip content to illustrate clearly to which data series the displayed value belongs.
I am using live-chart to plot some series. I also want to add a border to chart area so I added it as a new series. but when I want to show the legend of the main series the legend of border will be appear at chart. Is there any solution to disable this specific legend?
You can change the visibility of a series by changing the Visibility Attribute
e.g:
series.Visibility = Visibility.Hidden;
Not sure If that already solves your problem, since I'm not sure if I understood you correctly. You can also change the z index of a series by using the SetZIndex Method
e.g:
System.Windows.Controls.Panel.SetZIndex(series, 0);
I have a chart that will show energy generation over a day, month, or year, depending on the user's selection. To do this on a single chart, I need to be able to change the axes, series, and store when a button is clicked. I have managed to get this working, except I have the issue of the old data, series, and axes are still showing, and the new ones are just being laid on top. Is there a way to clear or refresh/redraw a chart? Or should I just split this into 3 charts, and hide/show the charts on button click?
Here is my current code for setting axes, series and store on the fly.
chart.axes.clear();
chart.axes.addAll(dailyAxes);
chart.series.clear();
chart.series.addAll(dailySeries);
chart.bindStore(Ext.data.StoreManager.lookup('dailyEnergy'));
A little late, but what's missing is this:
chart.surface.removeAll()
This isn't ideal, as you may get a flash of empty space as it destroys the previous elements, but it does avoid the hangover of old data.
i dont know what type of chart or what is dailyAxes
but i assume u want to change axes properties..hee is an example on how to do it:
Ext.getCmp('chartid').axes.get("gauge").maximum = 100;
then u need to redraw the chart after ur done:
Ext.getCmp('chartid').redraw();
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.