Dashboards and Visualizations ------------------------------ Viewing Dashboard ~~~~~~~~~~~~~~~~~~~ 1. On the home page, click ``Dashboards`` to open the analytics page. .. image:: ../_static/nigeria/dashboards/click_dashboards.png :class: border spaced-image 2. Select the dashboard that you wish to view. .. image:: ../_static/nigeria/dashboards/select_dashboard.png :class: border spaced-image 3. Your selected dashboard will be opened for you to view. .. image:: ../_static/nigeria/dashboards/selected_dashboard.png :class: border spaced-image Creating a Dashboard ~~~~~~~~~~~~~~~~~~~~~~ .. youtube:: 5iGBSjU6XWg :width: 100% :aspect: 16:9 1. On the homepage, click ``Dashboards`` to open the analytics page .. image:: ../_static/nigeria/dashboards/click_dashboards.png :class: border spaced-image 2. Click ``MANAGE`` and select ``+ Create New Dashboard``. .. image:: ../_static/nigeria/dashboards/click_manage_to_create_dashboard.png :class: border spaced-image 3. Click ``Add Visualization`` .. image:: ../_static/nigeria/dashboards/click_add_visualization.png :class: border spaced-image 4. Select a data source. .. image:: ../_static/nigeria/dashboards/select_data_source_to_create_dashboard.png :class: border spaced-image 5. From the data source, select a table. .. image:: ../_static/nigeria/dashboards/select_data_source_table.png :class: border spaced-image 6. Select an appropriate visualization top be added as a panel to the dashboard. .. image:: ../_static/nigeria/dashboards/select_visualization.png :class: border spaced-image 7. Perform the neccessary data operations for the selected visualization. .. image:: ../_static/nigeria/dashboards/data_operations.png :class: border spaced-image .. Note:: You can also write *SQL* code to perform the data operation by switching from ``Builder`` to ``Code``. .. image:: ../_static/nigeria/dashboards/code_mode.png :class: border spaced-image :width: 90% 8. Click ``Run Query`` to create the visualization. .. image:: ../_static/nigeria/dashboards/click_run_query.png :class: border spaced-image 9. Click ``Save dashboard`` to save the visualization. .. image:: ../_static/nigeria/dashboards/click_save_dashboard.png :class: border spaced-image .. Note:: If the ``Save dashboard`` button is not visible, press the ``Esc`` or ``Escape`` button on your keyboard to show more dashboard controls. If you are redirected to a dashboard page, click the ``Esc`` button again, then click the menu button on the current visualization then select ``Edit`` to go back to editting the visualization .. image:: ../_static/nigeria/dashboards/click_edit_panel.png :width: 90% :class: border spaced-image 10. Provide the details of the dashboard that you are creating and click ``Save``. .. image:: ../_static/nigeria/dashboards/click_save_on_dashboard_form.png :class: border spaced-image .. Hint:: A complete dashboard is made up of more than one visualization. To add a visualization, follow this procedure. 1. On the current visualization, click ``Back to dashboard``. .. image:: ../_static/nigeria/dashboards/click_back_to_dashboard.png :class: border spaced-image :width: 90% .. Note:: If the ``Back to dashboard`` button is not visible, press the ``Esc`` or ``Escape`` button on your keyboard to show more dashboard controls. 2. Click ``Add`` and select ``Visualization``. .. image:: ../_static/nigeria/dashboards/click_add_to_select_visualization.png :class: border spaced-image :width: 90% 3. Repeat process *4 to 10*. 4. You can add as many visualizations as required in the dashboard Exporting a dashboard ~~~~~~~~~~~~~~~~~~~~~~~ You can export a dashboard to be used on another grafana compatible platform. 1. On the homepage, click ``Dashboards`` to open the analytics page. .. image:: ../_static/nigeria/dashboards/click_dashboards.png :class: border spaced-image 2. Select the dashboard the you wish to export. .. image:: ../_static/nigeria/dashboards/select_dashboard.png :class: border spaced-image 3. Click ``Export`` and select ``Export JSON`` to export the dashboard. .. image:: ../_static/nigeria/dashboards/click_export_dashboard.png :class: border spaced-image .. Note:: If the export button is not visible, press the ``Esc`` or ``Escape`` button on your keyboard to show more dashboard controls. Importing a dashboard ~~~~~~~~~~~~~~~~~~~~~~~ You can also import a dashboard that has been exported from another platform. 1. On the homepage, click ``Dashboards`` to open the analytics page. .. image:: ../_static/nigeria/dashboards/click_dashboards.png :class: border spaced-image 2. Click ``MANAGE`` and select ``+ Create New Dashboard``. .. image:: ../_static/nigeria/dashboards/click_manage_to_create_dashboard.png :class: border spaced-image 3. Click ``Import dashboard`` to open the import dashbaord form. .. image:: ../_static/nigeria/dashboards/click_import_dashboard.png :class: border spaced-image 4. Provide the JSON file of the dashboard you wish to import and click ``Load``. .. image:: ../_static/nigeria/dashboards/import_dashboard_form.png :class: border spaced-image .. hint:: You can also import a dashboard by pasting the JSON code of the dashboard or by providing a link to the required dashboard. 5. The system will verify the imported dashboard and lead you to a form where you can provide the more details of the dashbaord. On this page click ``Import``. .. image:: ../_static/nigeria/dashboards/import_successful.png :class: border spaced-image .. warning:: You may be required to update the data source of the imported dashboard if it does not match the database on your platform. Otherwise, the imported dashboard will not be able to run queries and visualize data. 6. The imported dashabord will be added to your platform and you will be able to view it. .. image:: ../_static/nigeria/dashboards/sample_dashboard.png :class: border spaced-image Sharing a dashboard ~~~~~~~~~~~~~~~~~~~~~ 1. On the home page, click ``Dashboards`` to open the analytics page. .. image:: ../_static/nigeria/dashboards/click_dashboards.png :class: border spaced-image 2. Select the dashboard that you wish to share. .. image:: ../_static/nigeria/dashboards/select_dashboard.png :class: border spaced-image 3. Click the ``Share`` to get a shareable link. .. image:: ../_static/nigeria/dashboards/click_share_dashboard.png :class: border spaced-image