User Guide Cancel

Create a scatter plot in ColdFusion

 

A scatter plot is a chart that displays the relationship between two variables. The chart represents individual data points on a 2D graph, with one variable plotted on the x-axis (horizontal axis) and another variable plotted on the y-axis (vertical axis).

A scatter plot typically includes:

  • X-axis: Represents one variable (independent variable).
  • Y-axis: Represents another variable (dependent variable).
  • Each data point on the scatter plot corresponds to a pair of values, one along the x-axis and one along the y-axis, forming a point at their intersection.

You can use the cfchart tag to create a scatter plot. For example,

<cfchart format="html" type="scatter" showMarkers ="true"
showLegend="FALSE" width="600" height="400" title="Scatter plot">
<cfchartseries>
<cfchartdata item = "2015" value = 20 >
<cfchartdata item = "2016" value = 27 >
<cfchartdata item = "2017" value = 19 >
<cfchartdata item = "2018" value = 80 >
<cfchartdata item = "2019" value = 56 >
<cfchartdata item = "2020" value = 39 >
<cfchartdata item = "2021" value = 91 >
<cfchartdata item = "2022" value = 71 >
<cfchartdata item = "2023" value = 28 >
</cfchartseries>
</cfchart>
<cfchart format="html" type="scatter" showMarkers ="true" showLegend="FALSE" width="600" height="400" title="Scatter plot"> <cfchartseries> <cfchartdata item = "2015" value = 20 > <cfchartdata item = "2016" value = 27 > <cfchartdata item = "2017" value = 19 > <cfchartdata item = "2018" value = 80 > <cfchartdata item = "2019" value = 56 > <cfchartdata item = "2020" value = 39 > <cfchartdata item = "2021" value = 91 > <cfchartdata item = "2022" value = 71 > <cfchartdata item = "2023" value = 28 > </cfchartseries> </cfchart>
<cfchart format="html" type="scatter" showMarkers ="true" 
showLegend="FALSE" width="600" height="400" title="Scatter plot">
     <cfchartseries>
        <cfchartdata item = "2015" value = 20 >
        <cfchartdata item = "2016" value = 27 >
        <cfchartdata item = "2017" value = 19 >
        <cfchartdata item = "2018" value = 80 >
        <cfchartdata item = "2019" value = 56 >
        <cfchartdata item = "2020" value = 39 >
        <cfchartdata item = "2021" value = 91 >
        <cfchartdata item = "2022" value = 71 >
        <cfchartdata item = "2023" value = 28 >
    </cfchartseries>
</cfchart>

Output

The following script uses a table from a database to display a scatterplot.

<cfquery name="getEmployeeData" datasource="cfdocexamples">
SELECT emp_id, Salary
FROM employee
WHERE EMP_ID < 1955
</cfquery>
<cfchart format="html" chartheight="400" chartwidth="600" title="Employee ID vs Salary Scatter Plot" showLegend="FALSE">
<cfchartseries type="scatter" query="getEmployeeData" itemColumn="Emp_ID" valueColumn="Salary"/>
</cfchart>
<cfquery name="getEmployeeData" datasource="cfdocexamples"> SELECT emp_id, Salary FROM employee WHERE EMP_ID < 1955 </cfquery> <cfchart format="html" chartheight="400" chartwidth="600" title="Employee ID vs Salary Scatter Plot" showLegend="FALSE"> <cfchartseries type="scatter" query="getEmployeeData" itemColumn="Emp_ID" valueColumn="Salary"/> </cfchart>
<cfquery name="getEmployeeData" datasource="cfdocexamples">
    SELECT emp_id, Salary
    FROM employee
    WHERE EMP_ID < 1955
</cfquery>
<cfchart format="html" chartheight="400" chartwidth="600" title="Employee ID vs Salary Scatter Plot" showLegend="FALSE">
    <cfchartseries type="scatter" query="getEmployeeData" itemColumn="Emp_ID" valueColumn="Salary"/>
</cfchart>

Output

Get help faster and easier

New user?