X-scale does not update (sometimes) on signal change in a Vega chart - bar-chart

This is a somewhat simplified version of a chart I built recently. When I select the Extended time rage checkbox, more data points will show and the X axis will adjust accordingly.
When I clear the checkbox the additional data points will disappear (OK) but the X axis will not go back to the previous state (bug?).
Oddly enough if I change the time unit back and forth (for example monthly -> weekly -> monthly) then the X axis will eventually redraw correctly.
Why does this happen an how could I work-around the issue?
Also note that Y axis seem to update fine every time the checkbox toggles.

Chart renders with expected x-axis (when clicking checkbox) if xscale "domain" is changed from
"domain": {
"signal": "timeSequence(tbin_delivered.unit, tbin_delivered.start, tbin_delivered.stop)"
}
to
"domain": {"data": "deliveries", "field": "unit0", "sort": true}
Note: An issue with this workaround is that only time units with data are shown in the x-axis. For example, selecting time unit "daily" in the dropdown shows chart with no gaps for Saturday and Sunday when there were no deliveries.
Vega docs for ordinal scale and sort parameter:
https://vega.github.io/vega/docs/scales/#ordinal
https://vega.github.io/vega/docs/scales/#sort
View chart in Vega online editor

It looks like signal tbin_delivered is not updated when the time range shrinks. This is an edited chart; the only difference is in the tooltip (which will now show the value of tbin_delivered.start).
I wonder if this behavior is correct? tbin_delivered is calculated in the deliveries data stream, which is derived from stream fruit, which depends on the extendedtime signal, which does change.
Posting it as an answer because the link won't fit in a comment.

The issue appears to be the values of signal tbin_delivered.start and tbin_delivered.stop are not updated when dataset deliveries values are changed.
The workaround in this solution is to use Vega transform extent to obtain minimun and maximum values of the dataset after data have changed. The function timeSequence in xscale will then show the updated domain correctly.
Added Vega transform:
{
"type": "extent",
"field": "unit0",
"signal": "signal_delivered_extent"
}
Vega scale:
"scales": [
{
"name": "xscale",
"type": "band",
"range": "width",
"padding": 0.05,
"round": true,
"domain": {
"signal": "timeSequence(tbin_delivered.unit, signal_delivered_extent[0], signal_delivered_extent[1] + 1)"
}
Note that Vega expression function timeSequence: "Returns an array of Date instances from start (inclusive) to stop (exclusive)...". For the rendered x-axis domain to include the maximum value, the argument for stop in timeSequence function has to be higher than the maximum value in signal_delivered_extent.
View in Vega online editor

Related

SSRS Conditional Formatting with 3 Colours

Trying to figure out conditional formatting for SSRS/Visual Studio and trying to get the figures to show this as an expression as follows;
Below benchmark needs to be Red
Above but within 5% needs to be Gold
More than 5% above needs to be Green
Benchmark 60%
Year 1 62.2%
Year 2 67.4%
Year 3 43.6%
First time in writing something like this so unsure what the best step is!
=iif("Textbox83" > "Textbox82", "SpringGreen", iif("Textbox83" < "Textbox82", "Red", iif("Textbox83" = "Textbox82" + 0.05,"Gold", "Transparent")))
A few things here..
Use SWITCH rather than nested IIFs, it much easier to read and debug.
You would normally work against the dataset fields rather than the textboxes displayed on the rendered report. If you do refence the textboxes, you probably have to convert the values to numeric before comparison
If you reference an object, either a dataset field or an rendered textbox, you must state the property you want, typical .Value
If this was being done against dataset fields you would do something like this
=SWITCH (
Fields!myValue.Value < Fields!Benchmark.Value, "Red",
Fields!myValue.Value <= (Fields!Benchmark.Value * 1.05), "Gold",
Fields!myValue.Value > (Fields!Benchmark.Value * 1.05), "Green",
True, Nothing
)
Switch stops at the first expression that results in True so the sequence of conditions is important. The final expression pair True, Nothing acts like an ELSE and returns nothing (which is the default backgroundcolor property, which appears as transparent)
If you wanted to replicate this using the textboxes (don't unless you really have to!) then it's basically the same but a bit more messy.
=SWITCH (
VAL(ReportItems!TextBox83.Value) < VAL(ReportItems!TextBox82.Value), "Red",
VAL(ReportItems!TextBox83.Value) <= (VAL(ReportItems!TextBox82.Value) * 1.05), "Gold",
VAL(ReportItems!TextBox83.Value) > (VAL(ReportItems!TextBox82.Value) * 1.05), "Green",
True, Nothing
)
The above is from memory and therefore untested but it should be OK.

Setting a fixed amount of y Axis Lines to display on Apache ECharts

I'm trying to show only a certain amount of yAxis Lines in my Apache ECharts Chart.
I tried the following:
yAxis: [
{
type: 'value',
min:0,
max:6000
}
],
yAxis: [
{
type: 'value',
scale:true,
splitNumber:4,
}
],
I need to dislpay it like this:
For your information: I need this to work on every Chart-Type, Line Chart, Bar Chart etc.
Thanks in advance :)
So, as I have not got any answer. I wanted to share with anyone who might need it in the future, how I solved it.
I looked and got the highest number of the data for the current Chart and looked if it is near 1000 I rounded it up to 1000, if it is over 1000 I rounded it up to the nearest 200.
For example a number 1059 becomes => 1200 or the number 1215 becomes 1400.
Than simply get this Number and divide it by 4(to have 4 Lines).
And give this number to the yAxis max. For the min set 0.

Highchart/stockChart: Zoom with buttons into monthly-data and show affected columns

I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?

Octave, barplot, only one row

I need to plot a bar graph in Octave. The following code:
clf;
data = rand(4, 5);
h1 = bar(data(1, :), "stacked");
l1 = legend("Col1", "Col2", "Col3", "Col4", "Col5");
legend(l1, "location", "northeastoutside");
figure
h4 = bar(data, "stacked");
l4 = legend("Col1", "Col2", "Col3", "Col4", "Col5");
legend(l4, "location", "northeastoutside");
does it. The second plot produces exactly what I need:
The first one, however, does not work as I would assume it would:
Is there any way to have a one-row bar plot that produces a graph with only one column in the style of the first plot?
Thanks in advance.
Rodrigo
This is not an elegant solution, but it can work in most of the cases.
The idea is to plot an additional bar (in x=2), and then hide it changing the
limits of the x axis (let's say [0.05, 1.95]):
M=zeros(2,4);
M(1,:)=rand(1,4);
bar(M, "stacked");
xlim([0.05 1.95]);
l1 = legend("Col1", "Col2", "Col3", "Col4", "Col5");
legend(l1, "location", "northeastoutside");

Higstock add all series dynamically

I've a Higstock lineal graph. Sometimes I need to show just one serie, other times I need two or three series to draw.
Obviously, this is an example of adding series dynamically. I put:
$(function() {
var chart = new Highcharts.StockChart({
// ...
series: []
// ...
})
chart.addSeries({name : "Value1",data : value1Data});
chart.addSeries({name : "Value2",data : value2Data});
chart.addSeries({name : "Value3",data : value3Data});
But not working, the chart needs to have at least one serie with data values in "series" node, not allowing an empty series node, like I put before.
I need to add all my series dynamically.
Anyone can help me? Thanks.
Example: http://jsfiddle.net/8aP69/1/
FYI: The graph only draws the navigation bar.
After many little test, a man that I loved him give me the solution.
I need to set initial series node like that:
series: [{ name: "Serie1", data : [null]}] // first serie has to be null
And after that, adding data point for first serie.
chart.series[0].setData(data1); // adding his data here