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);
}))
Related
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..
I am using Recharts Library for the graph in the ReactJS. There is one strange issue of setting intervals for the Y-Axis. There are few options available "preserveStart" | "preserveEnd" | "preserveStartEnd" | Number. For me, this is not working.
I have attached a couple of screens to showcase what I am expecting and what I get.
Expectation
Actual
Note: Due to the confidentiality of the project, I am not allowed to put the code here. Please let me know if more information is required.
In order to see a given number of ticks on the Y-Axis, you need to use the props tickCount - the number of ticks to show (by default, it's 5).
So you're Y-Axis should simply look like this:
<YAxis tickCount={10} />
The interval props allows you to show only a part of the ticks; '0' would show all, '1' would show half (1 every 2 ticks), etc.
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 new to D3, NVD3 and Angular-NVD3. I need to create a chart that looks similar to this, using Angular-NVD3:
SO question: NVD3 Stacked Bar Chart Plus Line Overlapped
(there's a JS Fiddle on the SO question).
Angular-NVD3 has two charts which each accomplish most of what I need, but not all of it:
Those would be the MultiBar and the MultiChart. (http://krispo.github.io/angular-nvd3/#/quickstart)
Examples:
That is, I need a stacked bar chart with a line (or lines) overlaid on top of the bar chart. I believe that to do this, one must use a "multiChart" instead of "multiBar" chart. (Please correct me if I'm wrong).
The SO example above modifies the NVD3 library, which I would like to avoid. After researching, I can see why they chose this approach.
nv.d3.js (version 1.8.2), for the multiChart object, Lines 9068-9069 :
bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
If you change these lines to .stacked(true), it does stack the bars.
How can I use Angular-NVD3 and accomplish what I need without changing the library?
Ideally the solution would be pure configuration. The next most ideal situation would be to set the "stacked" value at runtime from inside my enclosing component, but I can't seem to get access to the object.
I would like to avoid a highly intricate solution if possible because the whole point of these abstractions is to avoid such complexities. However, all solutions are welcome.
I found the answer:
you can change the stacked value in the callback() event handler, specified in your config:
chart: {
type: 'multiChart',
...
callback: function (chart) {
chart.bars1.stacked(true);
chart.bars2.stacked(true);
chart.update();
},
...
}
};
Use multiChart. To get the bars side by side set yAxis: 1 on both bar data sets.
https://github.com/novus/nvd3/blob/master/examples/multiChart.html
(the repo examples cover more then the website)
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.