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.
Related
I have been struggling with this issue for a while now. In popup edit of Shield UI all the values that are entered FieldType.Number seems to have a upper limit of 100. Every value more than 100 gets automatically changed to 100.
There seem to be only 4 types String, boolean, data & number. The number seems to limit the max to 100 on edit and add.Even any decimal values are being rounded off automatically and their website is not providing much help on the issue because demo grid views on website are showing similar behaviour
Fields("empNumber", fb => fb.Path("empNumber").Type(ShieldUI.AspNetCore.Mvc.DataSource.FieldType.Number))
I'm looking for a way to add values more than 100 as well as decimal point for prices. Any help or suggestions in this regard are much appreciated
I ran into the same issue. However I found the following workaround. I have set the grid fieldtype to string instead of number. When editing or creating the grid a javascript is started that calls the controller method through ajax call. In my controller method I take the "string" value and convert it to an int like so:
propertyOfModel = Convert.ToInt32(stringParameterFromGrid);
That works for me, let me know if you need more help.
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'm trying to format my labels as percentages. I've tried looking at the documentation for Chartist.js and converting it to CoffeeScript, the problem is things aren't quite as clear to me since we're using Angular and therefore the angular-chartist module. It's a fairly trivial piece that I can't ask my co-founder to spend time on because there are many larger pieces at play in our project, but I would like to understand where I'm coming up short.
The chart is displayed using a chartist directive (which I'm guessing is a part of angular-chartist):
<chartist class="ct-chart" chartist-data="typeCounts" chartist-chart-type="Bar" chartist-responsive-options="typeCounts.barResponsiveOptions"></chartist>
This is my coffeescript for trying to get the options in (note that the labels and series properties are working fine; but the chartist element is not picking up the barResponsiveOptions property (therefore the console.log debug line is not firing):
# Organize return data into labels and series for Chartist
typeCounts = ResultService.getTypeCounts()
$scope.typeCounts.labels = Object.keys(typeCounts)
$scope.typeCounts.series = [typeCounts[type] for type in Object.keys(typeCounts)]
$scope.typeCounts.barResponsiveOptions = [
axisY:
labelInterpolationFnc: (value) ->
console.log("Firing barResponsiveOptions")
Math.round(value * 100) + '%'
]
Right now the chart displays with the data points on the y-axis as fractions of 1 (e.g. 0.0 -> 1.0).
You should use the chartist-chart-options attribute for your regular options and chartist-responsive-options if you're not using responsive options as explained here https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping.
Cheers
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);
}))
I am unable to access the store elements returned from my store. When I console.log(me.proxy.read(operation)) and expand/navigate in the console I see all of my elements. There are 1000 rows. I am using the same store for a grid and have the pageSize set to 50. Even though I can see 1000 rows when i do a console.log(me.proxy.read(operation.resultSet.records[51])) i get an undefined message. So, it appears that for some reason the number of elements I can access is only 50 as that is what my pageSize is set to.
Long story short, I am using the same store for two scenarios. I want to have paging in my grid that will show 50 rows on each page. However, I want to loop through the entire store and load an array of all 1000 rows. The reason why I want an array of all 1000 is becasue I am going to use a date field in the rows to populate my date picker from an array. I am going to disable the dates in my grid and have the datepicker display only the dates that are in my grid.
I tried to include a screen shot but I am not allowed because i am only a 3 on the reputation system.
var operation = new Ext.data.Operation({action: 'read', start: 0, limit: 1000});
var proxy = new Ext.data.proxy.Ajax({ url: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent'});
me.proxy.read(operation);
console.log(me.proxy.read(operation));
HERE IS UPDATED CODE:
I have this in my controller:
ondatesStoreLoad: function(me,records,success)
{
var s = this.getStore('dates');
for (i = 0; i < s.getCount(); i++) {
MESSAGE_ID = s.getAt(i).get('message_id');
RECIP_EMAIL = s.getAt(i).get('recip_email');
UNIX_TIME_STAMP = s.getAt(i).get('unix_time_stamp')
console.log(i,MESSAGE_ID, RECIP_EMAIL, UNIX_TIME_STAMP);
};}
This puts out all 1,000 of my records to the console but I am not sure how to put them in an array that I can use in my datepicker component. When ever i try to get the store in the datepicker it is always undefined. I suppose it is becasue the store hasn't loaded yet so there is nothing there. Not sure how to get around that. Perhaps a callback handler?
HERE IS ANOTHER UPDATE:
I added a callback in my store.load:
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);}
})
That took forever to figure out but now I can access all my records and have a smaller problem to work on. At the moment i just have one element hardcoded to do a quick test.
Where do I need to put the code to get it into my date picker disableDates config? I need to put the dates into an array but for quick testing I used minDate: just to see if i could see something work but it shows up as undefined. Now i have the code in a beforrender listener but that seemingly needs to be in some other place or maybe some handler for my date picker....? is there an onload for the datepicker or something i shoudl use for this??
Why not just change the datepicker directly from that ondatesStoreLoad function? Before the loop, disable all dates in the datepicker. Then during the loop, instead of the console.log call, enable the date that was found in that record.
In theory, that should work. However, looking at the docs for Ext, I don't see a way to disable all dates, or to enable a date. You can only set which dates are disabled. But the general idea of updating the datepicker in that ondatesStoreLoad call is still what you should do.
You might need to extend the datepicker class, and add some custom methods to it to be able to enable a specific day.