- Getting started with the stage
- Custom elements
Rendering capability of AnyChart components is based on anychart.graphics library, which is in charge of visual display. This display is the stage, which is a graphics tool, that helps with positioning a number of charts and other elements on one page. It manages visual appearance and logic structure of data.
When we start working with any graphic elements of AnyChart charting library, the stage is created and enabled automatically, but in case this action was not defined directly, there's not much can be done with it. To get an access to some useful settings of the stage we should do a custom creation of the stage using .create() method:
var stage = anychart.graphics.create("container");
Here we have defined the container for the stage simultaneously with enabling the stage. The following piece of code means the same:
var stage = anychart.graphics.create(); stage.container("container");
This will make the stage of the main container's width and height by default. To change the default values of those parameters, write them after the name of the container in brackets. For example, to define the new stage of 800px in width and 600px in height, write the following:
var stage = anychart.graphics.create("container", 800, 600);
On a stage, you can position a lot of charts and other elements. Dashboard means it, and there are several ways of positioning elements on a stage. One of them is Table Layout. The second option is to use stage as a dashboard basis. Let's place a Column Chart sample on a stage. The only difference in this case is that we should set the stage and later define it as a container for drawing.
// set stage var stage = anychart.graphics.create("container"); // draw chart.container(stage).draw();
In case you need to place more than one chart, you can use .bounds() method to adapt the dimensions of the charts to fit them on a web page or wherever you need.
// set stage var stage = anychart.graphics.create("container"); // set chart_1 var chart_1 = anychart.column(data_1); // chart size and position chart_1.bounds(0, 0, "50%", "70%"); // set chart_2 var chart_2 = anychart.column(data_2); // chart size and position chart_2.bounds("50%", 0, "50%", "70%"); // draw charts chart_1.container(stage); chart_1.draw(); chart_2.container(stage); chart_2.draw();
There are two ways of using bounds. If you define them in percent, your charts will resize each time the window they are opened in is resized. If you define bounds in pixels, the charts will not change their dimensions along with the resized window. Let's see what we'll get if we define bounds in pixels:
Explore the whole code in the playground to understand the difference.
When using stage, there's another way to place a number of charts next to each other. Using layers makes it easier to edit the dimensions of the charts and their location.
Using layers makes it easier to operate with groups of elements. It's possible to transform, remove or add a plenty of elements with the only line. A workflow with AnyChart layers is organized quite similar to the same working process in Adobe Photoshop. You may edit a single layer with no changes made with other layers. This feature is rather helpful while creating dashboards. Look at the next sample. Here we have four different same-positioned layers with different zIndex() parameters, which swap places when changing their zIndexes on clicking the buttons. Explore the sample in our playground to see the whole code.
There are several options how to add a layer. You can see the first one in the sample above. The second way is to use the .addChild() method to add an element to a stage or layer by its name if you have already created it using the AnyChart constructor. The similar method .addChildAt() will allow you to put the new element between the existing layers or behind them by defining not only the name but the index for this element.
To remove a layer you can use one of those methods: .remove(), .removeChild() or .removeChildAt(). In this particular sample we use the .addChild() and .remove() methods. Each click on the "Add" button adds a layer with a red square, each click on the "Remove" button removes the last layer added. Explore the sample in the playground to see the whole code.
// add a layer var layer_1 = anychart.graphics.layer(); stage.addChild(layer_1); // remove a layer var layerToRemove = layers.pop(); if (layerToRemove) layerToRemove.remove();
Let's now make a more complicated example to show those features. Explore the sample in the playground to see the code.
Note that the center of the stage coordinate system is in the left top corner of the monitor and the vertical scale of the stage is directed to the bottom of the screen.
Besides the advantage of using layers, there's one more thing that you can do with the stage - add some custom elements, e.g. lines, curves, circles and other shapes, like in the following example where the biocenosis of a fir-tree is shown. We have put the pics of animals, drawn the fir-tree and the lines leading to the charts using the stage graphics, - you can find more about graphics in our Graphics tutorial.
Every browser has a printing function. We can print any page using this function, but sometimes it can't guarantee that you get what you want or you may want to add "Print dashboard" or "Print chart" option to your application.
If you have created a dashboard using AnyChart Stage, you can easily print it, learn more in Printing tutorial.