Before we start using custom JavaScript, let's work with the already included JavaScript to make our dashboard include animation. In this example, we will add additional controls to each chart to allow them to slide. This is advantageous in that you can give the user control to hide charts they are not interested in, or that take up too much space to see the charts they want to examine.
First, let's add the slide controls. Right after the panel-element-row
div
tag for the two charts, you will see a panel-head
div
tag. After the panel-head
div
tag, you will see a dashboard-element
div
tag. The concept here is to use the header as the slide control, thereby leaving the header visible and allowing the end user to notice that there might be more information. In order to achieve this, you must move the header before the element. The default code shows the header contained within the element div:
<div id="element6" class="dashboard-element chart...