Solved

How to make a linechart solid and dotted over the x-axis?

  • 25 September 2020
  • 4 replies
  • 105 views

I have a parameter over weeks with historic and forecast info. I want the historical week to be a dotted line and from the current week onwards a solid line. I use an annotation ‘dash’ and created a string parameter that have dash for the historic weeks. I added this as annotation the parameter, but if I use this all the weeks are dotted. (When I remove the annotation the whole is solid, as it should be). 

So is it possible to change the line over the axis?

icon

Best answer by Gertjan 29 September 2020, 11:38

@Marc Wingender , you can do this by creating two different identifiers, giving them each their own annotation.

See e.g. below the result and attached project where I have a HistoryValue() and ForecastValue() line. They both run over the superset of all time periods, and each have their subset of history vs forecast periods. To connect the two lines, I made the first ForecastValue the same as the last HistoryValue (t-11).

Line chart with 2 identifiers represented differentially using annotations

The annotation determines color, style of line and circle:

.annotation-solid {
stroke: black !important;
}
.annotation-dash {
stroke: blue !important;
stroke-dasharray: 2;
}
circle.annotation-solid {
fill: black !important;
}
circle.annotation-dash {
fill: blue !important;
}

PS: @Marc Wingender, realize now the ask was the other way around: Historic data dashed. Just switch the values of the HistoricAnnotation and ForecastAnnotation in the model, refresh page, and you are good to go.

Hope this helps.

View original

4 replies

Userlevel 6

@Marc Wingender , you can do this by creating two different identifiers, giving them each their own annotation.

See e.g. below the result and attached project where I have a HistoryValue() and ForecastValue() line. They both run over the superset of all time periods, and each have their subset of history vs forecast periods. To connect the two lines, I made the first ForecastValue the same as the last HistoryValue (t-11).

Line chart with 2 identifiers represented differentially using annotations

The annotation determines color, style of line and circle:

.annotation-solid {
stroke: black !important;
}
.annotation-dash {
stroke: blue !important;
stroke-dasharray: 2;
}
circle.annotation-solid {
fill: black !important;
}
circle.annotation-dash {
fill: blue !important;
}

PS: @Marc Wingender, realize now the ask was the other way around: Historic data dashed. Just switch the values of the HistoricAnnotation and ForecastAnnotation in the model, refresh page, and you are good to go.

Hope this helps.

Userlevel 6

Here an extended version where you decide how to display the identifiers via a selection table: solid or dashed (and now switched to the order you initially asked for 😉).

Extended example with ability to change display via dynamic annotation settings

I wanted to also show that the area below could use similar coloring, but we noticed a small issue in AIMMS and we need to fix that. Idea would be to add the following to the annotation.css file:

path.chart-item.chart-item-area.annotation-solid {
fill:black;
}

path.chart-item.chart-item-area.annotation-dash {
fill:blue;
}

…. this should generate the following chart (currently only the 1st identifier area listens to the annotation):

 

Hi Gert-Jan,

Thank you for answering, although splitting the identifier was already on my workaround list. I was hoping to avoid this, since there were a lot of parameters now that need to be split. 

Kind regards,

Marc

Userlevel 6

Hi @Marc Wingender,

Unfortunately that is indeed the case; lines are in that sense somewhat special. Where you can individually color bars, circles, wedges etc. as they directly relate to a value such as demand(t-1), lines are connection between such points and don’t belong in that sense to a specific value. Hence the line is a separate ‘object’ and drawn/styled as such. 

BTW: By splitting this, you can think as well of adding a set of forecasts (e.g. low, normal, high)

 

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator