ExtJS 4 - sort bar chart - extjs

I have a grid and a bar chart immediately underneath it, all representing the same data (same store). The grid is obviously sortable based on clicking column headers, and the chart auto-refreshes based on the data that is shown in the grid.
Trouble is, bar charts seem to sort the underlying store data in the opposite direction of the grid. So for example when the grid is sorted to show...
Name / Sales
Joe / 100
Sally / 80
Tim / 60
...the bar chart shows:
[bar 1 - top]: Tim / 60
[bar 2 - mid]: Sally / 80
[bar 3 - bot]: Joe / 100
This is counter-intuitive to the user -- they would expect the sort of the grid and chart to be consistent. (Column charts work well - Joe/Sally/Tim from left column to right -- but that is not an option on this page for other reasons.)
Is there a way to change this so that the bar chart sorts the other direction?
Perhaps the store itself could be re-sorted within the chart class definition? If so, how would that be done exactly? And would this affect how the grid displays its data?

1. Load your grid store:
gridStore.load({
callback: function(records, operation, success) {
if(success){
// Load data from first Store (grid) to second Store (chart)
chartStore.loadData(records);
// Sort chart store data:
chartStore.sort('field','ASC');
}
}
});
2. sort the grid store:
gridStore.sort('field','DESC');

Thanks to mfruizs2 for the pointers - helped get me on the right track. For anyone coming by in the future, here is what I did to solve this:
//get the # of records in the current grid page
var gridStoreItems = gridStore.getCount();
//setup a separate store just for the *chart*
var chartStore = Ext.create('Ext.data.ArrayStore', {
model : gridStore.model,
proxy : gridStore.proxy,
storeId : 'chartStore',
});
//loop records of current *grid* store, from bottom to top
//and add the bottom grid store record to the top of the chart store, and so on
for (var i=(gridStoreItems-1); i>=0; i--)
{
chartStore.add(gridStore.getAt(i).data);
}
Then use chartStore as the basis for the bar chart. It will now display chart records in the same sequence as shown in the grid.
Here's hoping that Sencha adds a simple sorting config to charts in the future...

Related

jfreechart control OHLC time series range for dynamic display

Using:
java 17
JavaFX 17
JFreeCharts 1.5.3
JFreeCharts FX 2.0.1
I would like to feed dynamic data to an OHLC plot with OHLCSeries
I used the MaxItemCount but this is only good if all your time series has same dimensions
I need to show some trading signals that is not the same size as the OHLC series so the max item count will not work
Is there a way to show the latest 3 days (or the last 100 Hours) on a mixed series chart?
Using OHLCSeriesCollection for mixing OHLC and indicators (moving average) on the same chart. i.e. they don't happen on all the candle signals.
What if I need to add another TImeSeries (with a line&shape renderer) on the same chart but this one will have fewer items?
Can I use the Axis to control the items displayed by time?
DateAxis dateAxis = new DateAxis("Time");
CombinedDomainXYPlot mainPlot = new CombinedDomainXYPlot(dateAxis);
and adding data
OHLCSeriesCollection candlestickDataset = new OHLCSeriesCollection();
candlestickDataset.addSeries(new OHLCSeries());
TimeSeriesCollection timeSeriesCollection = new TimeSeriesCollection();
timeSeriesCollection.addSeries(new TImeSereis);
I noticed in old versions there was an option to add the TimeUint in the Series constructor. What is the alternative now?
ComparableObjectSeries doesnt have MaxItemAge?
EDIT:
Problem:
I have data with different occurrences over time
Data is TimeSeries & OHLCseries mix on the same chart (different renderers)
Data is dynamic and I would like to display only the last X points in time (3 days for example) i.e. aged are removed

SSRS no data label for 100% chart

I have created a SSRS 2017 report with a pie chart. The dataset returns the number of 3 different values/sections (total "green", total "yellow", total "red").
Now I want to show the data labels (-> pictures). I switched to line-chart, added the formula e.g.
= IIf(Fields!red.Value=0, "", "#PERCENT"+ chr(10)+ "(#VALY)")
to each line/section.
It works fine (-> picture 1) but e.g. for the case when I have 2 zero sections and only 1 section with 100%, the data labels are not shown. For each value > 0 < 100 the data labels are visible.
I also tried it without the formula/default values but the problem also occurs.
Does anyone know the issue?
Thx in advance for your replies!!
Pie chart with different values
100 percent pie chart
It looks like all you need to do is update the expression. It would also depend on how you have the series label data setup.
= "#PERCENT"+ chr(10)+ "(#VALY)"
Query for data
I use this simple Query as data set.
So aggregations are done via SQL Query, not by SSRS.
All I want is that the 96 green data/100% are visible as label on the diagram, but it doesn't work...
The problem also occurs for line diagram, so it has nothing to do with the pie chart..

SSRS Hide one legend from each series

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.

ShieldUI Stacked Bar Graph with Totals

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);
}))

Kendo Chart set skip after load using Angular

Im using Angular Kendo - Im not sure if thats really relevant only to say its not as 'simple' as calling refresh. - I have two scope variables one is the Kendo DataSource the other is the Kendo Chart Options which are assigned like this
$scope.ChartOptions = {
// All The other Chart Stuffs
dataSource : $scope.ChartDataSource
}
<div kendo-chart k-options="ChartOptions" />
This works fine - the issue is that the chart data can vary quite a bit and the area I'm using is small so what happens is the value axis ends up looking okay with values of just 2 or 3 but when you get to 20 or more the labels bunch up is there some way to reset the options after the data is retrieved. Maybe by changing the valueaxis skips etc.
What you are looking for is actually the CategoryAxis Step value. Based upon your data, you need to figure out what the max value is, and then calculate a reasonable step value that will appropriately render out your chart control based upon the space that you have. I can't really give you an example, as this will be entirely dependent upon your data and will likely require a bit of trial and error til you land on a calculation that yields acceptable results.
Documentation for the CategoryAxis step: http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.labels.step
Here is an example for finding the maximum data point:
var data = [1, 3, 4, 9, 10];
var max = Math.max.apply(Math, data);
//code here to do some kind of calculation of step value
Once you know what your appropriate step value should be based upon your data, you can then create your chart and set the CategoryAxis.Labels.Step value to it during grid creation.

Resources