InsideSales.com
InsideSales.com
InsideSales.com Menu

How to Build Scatter Plot Components

Highlights

Component Scatter Plot
Overview The Scatter Plot allows you to create a chart that shows the correlation between two sets of data, such as information like test results, survey results, and demographics.
Key Features Draw a regression line for each series of data
Use custom colors for each series
Customize the appearance of each axis

Overview

The Scatter Plot component allows you to create a chart that shows the correlation between two sets of data. To create a Scatter Plot, you will assign a set of X-values and Y-values so that the data can be properly plotted on the chart. Here is an example of a Scatter Plot that charts the correlation between eruption duration vs the interval for Old Faithful in Yellowstone National Park:

Component Structure

Here is the structure of the Scatter Plot component:

Key Features

This section provides examples of different ways to use the Scatter Plot component

Adding a regression line

Regression lines let you see the correlation between the X and Y values. To do this, follow these steps:

  1. Select the relevant Scatter series component from the tree.
  2. Select the Draw a regression line option.

Customize the color for each series

You can select a custom color for each series in your Scatter Plot. To do this, follow these steps:

  1. Select the relevant Scatter series component from the tree.
  2. Select the Override the default color option.
  3. Click the color box to prompt the color selection window to open.
  4. Select a color from the available options, or click the More options button.

Note: You can select from the available list of colors or enter a custom color using html commands.

Customize the appearance of the X- and Y-axes

Each axis comes with a variety options that let you customize its appearance in your chart. The following image provides an overview of the different options you can use for each axis:

Scatter Plot component Source Code

You can use this Source Code to create multi-component Widgets:

 {
         "type": "chart_scatter",
         "displayName": "Scatter Plot",
         "fmtArgs": {},
         "vis": true,
         "components": [
            {
               "type": "scatter_data",
               "displayName": "Series",
               "fmtArgs": {},
               "role": "scatter_data",
               "vis": true,
               "components": [
                  {
                     "type": "series_data",
                     "displayName": "X",
                     "fmt": "num",
                     "fmtArgs": {},
                     "role": "data_x",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "color": "#ec932f",
                     "overrideColor": false,
                     "leaveGaps": false,
                     "lineDashes": "Solid",
                     "lineWeight": 3,
                     "lineStyle": "angle",
                     "chartStyle": "points",
                     "showValues": false,
                     "renderer": "bar",
                     "seriesName": "X"
                  },
                  {
                     "type": "series_data",
                     "displayName": "Y",
                     "fmt": "num",
                     "fmtArgs": {},
                     "role": "data_y",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "color": "#ec932f",
                     "overrideColor": false,
                     "leaveGaps": false,
                     "lineDashes": "Solid",
                     "lineWeight": 3,
                     "lineStyle": "angle",
                     "chartStyle": "points",
                     "showValues": false,
                     "renderer": "bar",
                     "seriesName": "Y"
                  }
               ],
               "formulas": [],
               "data": [],
               "dataDisabled": true,
               "color": "#ec932f",
               "overrideColor": false,
               "scatterName": "Untitled",
               "regLine": false
            },
            {
               "type": "chart_axis",
               "displayName": "X Axis",
               "fmt": "num",
               "fmtArgs": {},
               "role": "axis_x",
               "vis": true,
               "formulas": [],
               "data": [],
               "dataDisabled": true,
               "sort": 0,
               "axisPosition": "left",
               "customInterval": 0,
               "tickInterval": 0,
               "customRange": false,
               "showLabelTicks": true,
               "showAxisScale": true,
               "showAxis": true,
               "originLine": true,
               "grid": false,
               "max": "",
               "min": "",
               "origin": "",
               "customOrigin": false,
               "labelDrop": 1,
               "labelStagger": 1,
               "labelAngle": "0",
               "showLabel": false,
               "label": "Untitled"
            },
            {
               "type": "chart_axis",
               "displayName": "Y Axis",
               "fmt": "num",
               "fmtArgs": {},
               "role": "axis_y",
               "vis": true,
               "formulas": [],
               "data": [],
               "dataDisabled": true,
               "sort": 0,
               "axisPosition": "left",
               "customInterval": 0,
               "tickInterval": 0,
               "customRange": false,
               "showLabelTicks": false,
               "showAxisScale": true,
               "showAxis": true,
               "originLine": true,
               "grid": true,
               "max": "",
               "min": "",
               "origin": "",
               "customOrigin": false,
               "labelDrop": 1,
               "labelStagger": 1,
               "labelAngle": "0",
               "showLabel": false,
               "label": "Untitled"
            }
         ],
         "invertAxes": false,
         "pointSize": 6,
         "showLegend": true,
         "height": 2
      }

Important concepts

These articles provide essential information about Widget building that you can apply to your Inline Frame components:

Release Notes

Find our most recent release notes.

Forum

Our InsideSales.com community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

We're happy to help. An InsideSales.com expert is just a phone call away.

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

© 2004–2014 InsideSales.com, Inc. all rights reserved. Use of the InsideSales.com service and this Web site constitutes acceptance of our Terms of Use and Privacy Policy. InsideSales.com technology is protected by the following United States Patents: 8078605, 8325738, 8352389, 8510382, 8566419.