I'm working on getting familiar with Sencha charts. I'd like to know if there is any way that I can extend a column outside of the view port. For example I have data for which I have the min, first quartile, third quartile, and max for and I make a stacked chart out of these. However the max contains several outliers that probably won't be relevant to the user. What I want to do is end the view after the third quartile somewhere. Is there a simple and easy way to accomplish this?
You would have to work out the algorithm to get the percentage of records that go beyond your third quartile. That shouldn't be too hard.
Then create a function that set's the chart's width to a size which is equal to:
[viewport width] * (1 + [the percentage])
You can use the chart's setWidth method for this.
You can call this function in the chart's beforerefresh event (it should fire after the chart store data is loaded but before it is rendered on the chart) and also in the viewport's resize event.
Related
I am trying to add one box and one line on x-axis. Please look at below bar chart.
I tried using stripline but I cannot set height for stripline. It goes till 100.
Is there any way I can do this?
Unfortunately, SSRS doesn't provide the functionality you're looking for. A stripline is the closest you can get to that, but like you said, you can't control its height. The only way you could simulate this behavior would be to use a Background Image for your stripline, but that may be more work than it's worth. It would require a lot of manual adjustment to get the image to line up on the chart.
I would add a series to the chart using the Stock chart (under Range). In the Series Properties I would set the High value to the height desired for your line (~52 in your example). Ideally this would come from a dataset value.
Set the Low, Open and Close values to 0.
Try two Stripe Lines. First, create the strip line which represents the vertical value you're after. In my case, I made one that was 50% of the graph height off of the Y-Axis.
Chart Properties:
Height of StripeLine:
Once the stripe line is the correct height for the chart, create a 'mask' stripe line along the X-axis that will cover the portion of the Y-axis line you want hidden.
Chart Propterites:
Width of Stripe Mask:
Using these methods, and some really clever expression writing, you should be able to make the line exactly as high, and as wide as you desire.
New developer here working on some thing that's a little out of my depth.
I'd like to have dynamically generated charts into rotate into different, predetermined locations on my page.
for example:
chart 1
chart 2
chart 3
would rotate thru a list of 5 charts to display
chart 2
chart 3
chart 4
I feel like my best option here is to create objects (JSON maybe?) of these charts and to have them stored in an array, then have the array loop through the binding locations and 'plop' (for lack of better word) the object's details into the next spot in the rotation, which theoretically would allow the chart to render in the new location; with a timer driving the changes.
I would probably use pre-set frames to designate the slots being rotated into, though I'm less positive that is the right way to handle that.
I know this is possible with angular, and despite my best efforts I cannot for the life of me determine the best way to go about this. I'm really very open as to the method this gets done, but am at a complete loss on how to set up the data-binding framework to accomplish this.
I have to create a schedule control using WPF XAML for displaying items with duration as little as 1 seconds and potentially as large as couple of hours.
First thing which seems clear is that I will need some kind of zoom capability, for drilling into the items with very short durations and zooming out to view the items with very large durations.
I have a UI style in mind where by when the control is zoomed to view the large items, any small duration items which generally occur between the large duration items are some how collected in to a 'bucket' which has a height >= a minimum display height. So that I can perhaps hover a mouse over this bucket and get a tool tip which renders the contained items into a time ordered list view.
I am at a loss as to where to begin. I feel that I could perhaps achieve something in the Measure/Arrange overrides of a custom Panel. But I think this could adversely affect render performance. If I were to do it this way, I guess I would need to inject a 'bucket' view into the panels children collection, but that would break the use of ItemTemplate in my Custom Items Control?
My second though is that I create a custom observable collection which has a bindable Scale property which then organises the collection into 'buckets' of a duration large enough to be displayable.
Does anyone have any thoughts on how I should best approach this problem?
I made a similar sounding control which was actually used for inputting employee time shifts. It uses a simple data type in an ObservableCollection data bound to a ListBox.ItemsSource property. I defined a DataTemplate to design the look of each time segment in the UI. It looks like this:
There are certain ComboBoxes along the top which, when changed, change the number of items in the collection. So for example, when the Minutes/segment ComboBox value is changed to Thirty, twice the number of (same sized) items appear in the UI, each now relating to thirty minutes, not sixty. This is done by simply calling a method that repopulates the collection from the relevant property setters. Here is an example:
public TimeSegmentDivision MinutesPerSegment
{
get { return minutesPerSegment; }
set
{
minutesPerSegment = value;
InitializeTimeSegmentsRowViewModels();
NotifyPropertyChanged("MinutesPerSegment");
}
}
private void InitializeTimeSegmentsRowViewModels()
{
if (DayCount == 5) AdjustStartDate(); // (DayCount == 5 is 'Monday - Friday')
DateTime tempDate = Date;
AllTimeSegments = new TimeSegmentsCollection();
for (int m = 0; m < DayCount; m++)
{
TimeSegmentsRowViewModel viewModel = new TimeSegmentsRowViewModel();
viewModel.TimeSegments = InitializeTimeSegments();
AllTimeSegments.Add(viewModel);
date = Date.AddDays(1);
}
NotifyPropertyChanged("AllTimeSegments");
date = tempDate;
}
The specifics of the InitializeTimeSegmentsRowViewModels method is unimportant here, but you should be able to get the right idea from this example.
I worked on custom schedule for Silverlight. It has similar layout loading process so I would try to answer.
I guess your main problem lies in the 'time bar'... Stop thinking about schedule as the big consistent control, it's some pack of custom controls. Take a look on grid. Such controls has a lot peaces.
At start we have to solve first problem - time bar. Right implementation will lead you to painless future))) So time bar it's some control that contains total time, or duration of the employee labors(this value can be set by user). And such thing like step , exactly step and duration will tell you size and position of labors. For time bar control step will tell where are visual ticks should be displayed. I mean time bar will look like rulers, but with time values instead of inches. So we are getting next problem - how to translate time into pixels? Unfortunately I didn't found best solution - I assumed 1min is equal to 1.6 pixels It was perfect for me... But you will have dynamic value that will dynamically increase or decrease pixel length of step. So we have total duration in time, we can convert it into pixels length. But total length could be much bigger then available size. So, now we have another time bar property - visual duration...
okay, I guess you understand my way of thinking... Changing pixel size of step you will get perfect zoom(not step time size, but pixel length).
And yes, you are on the right way if you want create custom panels with overrated measure\arrange methods. And don't worry about item template. It's easiest part. Your parent schedule control will have items source property of object type. All your labors will be content controls....
I need to display many markers on a WPF image. The markers can be lines, circles, squares, etc. and there can be several hundreds of them.
Both the image source and the markers data are updated every few seconds. The markers are associated with specific pixels on the image and their size should be absolute in relation to the screen (i.e. when I move the image the markers should move along with it, but if i zoom in, they should take the same space of the screen as before).
Currently, I've implemented this using the AdornerLayer. This solution has several problems but the most significant one is that the UI doesn't fare well under the load even for 120 such markers.
I wanted to ask what would be the best way to go about implementing this? I thought of two solutions:
Inherit from Canvas and make sure it is invalidated not for every
added marker but for a range of markers at once
Create a control that holds an image and change its OnDraw to draw all the markers
I would appreciate some pointers from someone with experience with a similar problem.
Your use case looks quite specialized, so a specialized solution seems in order. I'd try a variant of your second option — extend Image, overriding its OnRender method.
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();