Combine Bar Chart and Line Chart

Sometimes you may want to combine a bar and linechart in one widget. We’ll call this a “blinechart.”

The example shown below has a single y-axis.

../../_images/blinechart.png

(The blinechart is not a supported feature, so this handy tip is provided “as is”.)

It is an example of how to use Application Specific Resources (ASR).

This widget has a number of assumptions regarding the data, and a couple of configurations as outlined below.

Using the blinechart

The blinechart assumes you have two identifiers in your contents, in a specific order:

  1. linechart identifier
  2. barchart identifier

The first item in your contents will be rendered to a linechart, and the second to a barchart. Any additional contents will not be displayed in the chart.

The linechart will always overlay the barchart.

Note

Changes to the data are reflected inmediately on the blinechart, but you cannot change values in the blinechart itself.

Pivoting

For this widget, it is required to have “<IDENTIFIER-SET>” in the layers; make sure the pivoting respects this.

Any other indexes can be ordered freely in the “headers”.

Configuration

The blinechart has two configurations you can make in the code.

Changing the colors

The colors in the blinechart are not based on the ordinals and palette that AIMMS WebUI provides. Instead, the bars are always green and the line is always blue.

On line 5 and 6 of jquery.blinechart.js you can set the bar and line colors in hexadecimal notation. This is the default format for colors on the web.

Updating margins

The axis labels do not automatically size to their contents. If your indexes have long names, they might not fit inside the widget as a result. To change, this, update the “b” (for bottom) value on line 15 of jquery.blinechart.js to a higher number.

Example download

This example AIMMS project is available for download below:

Last Updated: March, 2020