.. image:: /_images/icons/app_simlytiks.png :width: 5% :align: right .. |Charts| image:: /_images/icons/icon_Charts.png :width: 4% :target: Charts.html .. _Charts: ############### |Charts| Charts ############### In Simlytiks, charts and graphs are organized as visualizations. With 40+ rich, interactive visualization options, or individual data explorations, we can transform our data into visual expressions that make it easier to understand and compare. .. thumbnail:: /_images/Images/Splash/Splash_Charts.png :title: Finished Fruits Bubble Chart .. centered:: **Finished Fruits Bubble Chart** | ***************** |eye| Visualizers ***************** Visualizers can be found underneath the Visualization Menu. Each visualizer has a designated icon, a main placeholder and a specific placeholder for each option. Here are some basic Simlytiks' visualizers and their functions: +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | Icon | Name | Function | Placeholder | +==============================================================================+==================+===========================================================+=========================================================================+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Table.png | Table | - presents a 2D view of data | .. thumbnail:: /_images/Images/Visualizers/table_main.svg | | :width: 15% | | - columns of text and numbers | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Box_Plot.png | Box Plot | - shows distribution of data with quartiles | .. thumbnail:: /_images/Images/Visualizers/boxplot_main.svg | | :width: 15% | | - aids in identifying outliers | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Curve_Plot.png | Curve Plot | - plots time-history data | .. thumbnail:: /_images/Images/Visualizers/curveplot_main.svg | | :width: 15% | | - can visualize up to 5 dimensions | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Image_Gallery.png | Gallery | - view images and movies | .. thumbnail:: /_images/Images/Visualizers/imagegallery_main.svg | | :width: 15% | | - play, pause and overlay them | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Parallel.png | Parallel Coord. | - view multi-dimensions in a 2D space | .. thumbnail:: /_images/Images/Visualizers/parallelcoordinates_main.svg | | :width: 15% | | - wise column choosing provides deep data insights | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Line_Chart.png | Line Chart | - track changes in data | .. thumbnail:: /_images/Images/Visualizers/linechart_main.svg | | :width: 15% | | | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Donut.png | Donut Chart | - explore relationships of data groups as sums of a whole | .. thumbnail:: /_images/Images/Visualizers/donutchart_main.svg | | :width: 15% | | - best with less categories | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Scatter_Plot.png | Scatter Plot | - explore relationships between variables | .. thumbnail:: /_images/Images/Visualizers/bubblechart_main.svg | | :width: 15% | | - best for multi-valued variables | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Bar_Chart.png | Bar Chart | - compare groups and track large changes | .. thumbnail:: /_images/Images/Visualizers/barchart-vertical_main.svg | | :width: 15% | | | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ | .. thumbnail:: /_images/Images/Visualizers/Viz_Images_Grouped_Line.png | Multi-line Chart | - compare series of data across multiple groups | .. thumbnail:: /_images/Images/Visualizers/multi_linechart_main.svg | | :width: 15% | | | :width: 50% | +------------------------------------------------------------------------------+------------------+-----------------------------------------------------------+-------------------------------------------------------------------------+ The below image showcases the icons for all the charts available in the application. We'll go over how to learn more about each chart in the application in the next subsection. .. thumbnail:: /_images/Images/Charts/Simlytiks_visualizers2.png :width: 80% :title: 40+ Rich, Interactive Visualizers .. centered:: **Figure 1: 40+ Rich, Interactive Visualizers** | .. _AddChart: ******************** |plus| Adding Charts ******************** To create charts, we'll be using the visualization menu and quick links to add them to our dashboard pages. There are three main ways to choose visualizations for our pages. .. thumbnail:: /_images/Images/Charts/Simlytiks_Visualizers.png :title: Adding Visualizations .. centered:: **Figure 2: Adding Visualizations** | 1. Click on Add Visualization. This menu is located in the top bar commands. Hover over visualizations to view their basic placeholders and descriptions. 2. Click on Run Wizard. The wizard allows us to explore and set up charts in a separate window. We can review the library of visualizers in the first step and explore how they look in the second before committing to adding them in the last step. To access it, click on the button at them bottom of the visualization menu. 3. Click on chart icons or Add Chart. Use the quick or direct links to add directly to that page section. Watch the video below to see how to execute the above ways of adding charts to pages. .. video:: _static/movies/AddingVisualizations.mp4 :width: 100% | | Each chart has detailed placeholders to help illustrate what it does. Hover over chart options (i) to view more specific placeholders. Here is an example of how placeholder images with appear: .. video:: _static/movies/PlaceholderHover.mp4 :width: 100% | | We can add inputs by dragging and dropping data columns from the left panel of Responses or choosing them in the drop-down menu that appears when clicking in the input box. Once we indicate required inputs, we'll see a preview of our chart. We can use the real-time preview to explore options and choose exactly how we want our chart visualized before accepting it. Watch the following video to see how it's done. .. video:: _static/movies/AddingVisualizations2.mp4 :width: 100% | | Guide Steps =========== Charts with multiple options for setting up now have guide steps for basic understanding. Find this option under guide me when adding a visualization to a page layout. .. thumbnail:: /_images/Images/Charts/Simlytiks_GuideSteps.png :title: Guide Steps for Setting Up a Chart .. centered:: **Figure 3: Guide Steps for Setting Up a Chart** | The guide will take us through up to 5 steps to help us render a basic chart. Here is an example of the guide for bubble chart: .. video:: _static/movies/GuideStepsBubble.mp4 :width: 100% | | *********************** |pencil| Editing Charts *********************** There are two main ways to edit charts, one of which is only available for a couple of them. .. thumbnail:: /_images/Images/Charts/Simlytiks_VisualizerEdit.png :title: Editing Visualizations .. centered:: **Figure 4: Editing Visualizations** | 1. Quick Edit: This option is available for vertical bar chart and bubble chart. 2. Edit Viz: This option takes us back to our initial inputs page to edit them. Settings Menu ============= Once the visualization is added, we can always come back to the initial input page by hovering over the top right of the chart container and choosing this option under the hamburger menu. Here is an example of how to edit a visualization: .. video:: _static/movies/EditViz.mp4 :width: 100% | | Titles & Axes ============= We have the option to update the chart title, axis titles and axis ticks simply by clicking on their locations in the chart. The following video shows how this is done: .. video:: _static/movies/EditViz2.mp4 :width: 100% | | Quick Edit ========== The quick edit option is available for bar charts and bubble chart to change main inputs such as x data, y data and label by. To open the quick edit drop-down, click on the parameter icon in the top right corner of the chart area. Watch the video below to see a quick editing example for Bubble Chart: .. video:: _static/movies/QuickEdit.mp4 :width: 100% | | Quick edit options will be available for more charts in the future. Label Editor ================ Click on a Label to edit it. The label editor also supports variables. .. thumbnail:: /_images/Images/charts/LabelEditor.png :title: Label Editor .. centered:: **Figure 5: Label Editor** ************************************ |ellipsis-v| Bubble Chart Options ************************************ Bubble Chart (or Scatter Plot) has a variety of unique capabilities for exploring data. Here are a few important customizations and options. Bounding Boxes ============== Under the appearance tab when editing your bubble chart, you can choose to create bounding boxes around specific nodes and color them respectively. .. video:: _static/movies/BoundingBoxes.mp4 :width: 100% | | The bounding boxes adjust accordingly when editing node placements on the chart. .. video:: _static/movies/BoundingBoxesNodes.mp4 :width: 100% | | Remove Outliers =============== Bubble chart has an option under right-click to remove outlier nodes for a more balanced and contained chart. Newton Curve Plotter also has this option. Learn about it :ref:`here.` .. thumbnail:: /_images/Images/Charts/BubbleRemoveOutliers.png :title: Remove Outliers .. centered:: **Figure 6: Remove Outliers** | Multiple X and Y Data ===================== When we have numerical values for an existing scatter plot, we can choose multiple X and Y data creating a must-scatter plot. .. video:: _static/movies/MultiScatterPlot.mp4 :width: 100% | | Label Visibility ===================== When we have multiple labels on our bubble charts (via the Appearance tab when editing the chart), we can turn them on our off for individual nodes by clicking on the respected node. .. thumbnail:: /_images/Images/Charts/labelvisibility.png :title: Remove Outliers .. centered:: **Figure 7: Editing Label Visibility** | Watch the following video to see it in action as well as how to reset the visibility (chart right-click). .. video:: _static/movies/labelvisibility.mp4 :width: 100% | | ****************************** |cube| 3d Scatter Plot ****************************** The 3D version of Bubble Chart, 3D Scatter Plot, allows you to nodes in a 3D space with a 3D-surface plot option. .. video:: _static/movies/3DScatterPlot.mp4 :width: 100% | | It has a matrix type edit panel within dynamic settings for ease of editing. .. thumbnail:: /_images/Images/Charts/MatrixTypeEditPanel.png :title: Matrix Type Edit Panel .. centered:: **Figure 8: Matrix Type Edit Panel** | ****************************** |database| Data Classifier ****************************** Data Classifier is Simlytiks' Machine Learning visualizer that can predict data from one column into another. Here is a video example of the chart: .. video:: _static/movies/DataClassifier.mp4 :width: 100% | | ****************************** |globe| Geo Map ****************************** Simlytiks' Geo Map visualizer, new-and-improved with a built-in world map, takes location-based data and uses it to create a data map. .. thumbnail:: /_images/Images/Charts/GeoMapViz.png :title: Geo Map Visualizer .. centered:: **Figure 9: Geo Map Visualizer** | ****************************** |globe| Summary Table ****************************** Summary table supports all types of data in its cell in order to create a customized summary of the dataset. .. thumbnail:: /_images/Images/Charts/SummaryTable.png :title: Summary Table Visualizer .. centered:: **Figure 10: Summary Table Visualizer** | Add responses, specific data, curves, images and other types of data to the summary table's cells. .. thumbnail:: /_images/Images/Charts/adddatatocells.png :title: Add to Summary Table Cells .. centered:: **Figure 11: Add to Summary Table Cells** | NEW as of June 10, 2022: Export merged calls from the Summary Table into a PPT table. .. thumbnail:: /_images/Images/Charts/MergedCells.png :title: Merged Summary Table Cells .. centered:: **Figure 10: Merged Summary Table Cells** |