How to add Fixed Data Graph blocks to the Page Editor

Users tend to be in a hurry and therefore require information to be presented to them clearly and quickly. The Graph Fixed Data blocks in the Page Editor, take your raw data and turn it into a dynamic Line Graph or Pie Chart.

1. Add from Page Blocks When you are in the Page Editor, click Add under Page Blocks and then from the Visual Blocks section, select Graph Fixed Data. It's important to note that the actual graph, once created, isn’t displayed in the Page Editor but is visible on the front-end page. 2. Creating your Fixed Data Graph blocks and configuring the options To configure the options for your chart, highlight and right-click on the Graph block to open the Options pop-up, this is where you will create your Graph. You can give the Graph a width and height (in pixels), enter the data, choose the type of chart (either line or pie) and add text to the title, x-axis/y-axis, data unit and label fields. 3. Line Chart functionality on the front-end page When viewed on the front-end of the page, the Line Graph becomes an interactive graphic. The user can hover their mouse over any part of the Line Graph to pick up an annotation on that specific section. Also, if they hold down the left-hand button and drag the cursor, it will create a transparent blue block that will zoom into that section. Simply clicking the Reset Zoom button in the right-hand corner will return the view to normal. Extra Tip Clicking on the icon in the far right corner will open a drop-down with options to print the graph and/or download it in a variety of different formats. 4. Pie Chart functionality on the front-end page When viewed on the front-end of the page, the Pie Chart becomes an interactive graphic. The user can hover their cursor over a piece of the pie to pick up an annotation on that specific section and click on the piece to pull it out from the pie. Extra Tip When pulling out a section of the pie, the user can either click on the piece directly or select the label next to it. Resize your page width or check this page on mobile to see the effect.