User Guide Cancel

Create line charts in ColdFusion

 

In ColdFusion, you can create different types of line charts using the <cfchart> tag with the format="html" or format="png|jpg|svg" attribute. The <cfchartseries> tag is used to define the type of line chart.

Types of Line Charts in ColdFusion

You can specify different line chart styles using the type attribute in <cfchartseries> and <cfchart>.

The supported values for line charts include:

  • "line" – Standard line chart.
  • "curve" – Smoothed curve line chart.

Example 1: Basic Line Chart

<cfchart format="html" chartwidth="600" chartheight="400" title="Line chart">
<cfchartseries type="line">
<cfchartdata item="Jan" value="10">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="15">
<cfchartdata item="Apr" value="25">
</cfchartseries>
</cfchart>
<cfchart format="html" chartwidth="600" chartheight="400" title="Line chart"> <cfchartseries type="line"> <cfchartdata item="Jan" value="10"> <cfchartdata item="Feb" value="19"> <cfchartdata item="Mar" value="15"> <cfchartdata item="Apr" value="25"> </cfchartseries> </cfchart>
<cfchart format="html" chartwidth="600" chartheight="400" title="Line chart">
    <cfchartseries type="line">
        <cfchartdata item="Jan" value="10">
        <cfchartdata item="Feb" value="19">
        <cfchartdata item="Mar" value="15">
        <cfchartdata item="Apr" value="25">
    </cfchartseries>
</cfchart>

Output

Example 2: Add Color to the Basic Line Chart

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Line chart">
<cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
<cfchartdata item="Day 1" value="19.2"/>
<cfchartdata item="Day 2" value="15.2"/>
<cfchartdata item="Day 3" value="15.1"/>
<cfchartdata item="Day 4" value="12.6"/>
<cfchartdata item="Day 5" value="14.2"/>
</cfchartseries>
</cfchart>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Line chart"> <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> </cfchart>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Line chart">
    <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
</cfchart>

Output

Example 3: Curved Line Chart

<cfchart format="html" chartwidth="600" chartheight="400">
<cfchartseries type="curve">
<cfchartdata item="Jan" value="10">
<cfchartdata item="Feb" value="20">
<cfchartdata item="Mar" value="14">
<cfchartdata item="Apr" value="70">
</cfchartseries>
</cfchart>
<cfchart format="html" chartwidth="600" chartheight="400"> <cfchartseries type="curve"> <cfchartdata item="Jan" value="10"> <cfchartdata item="Feb" value="20"> <cfchartdata item="Mar" value="14"> <cfchartdata item="Apr" value="70"> </cfchartseries> </cfchart>
<cfchart format="html" chartwidth="600" chartheight="400">
    <cfchartseries type="curve">
        <cfchartdata item="Jan" value="10">
        <cfchartdata item="Feb" value="20">
        <cfchartdata item="Mar" value="14">
        <cfchartdata item="Apr" value="70">
    </cfchartseries>
</cfchart>

Output

Example 4: Multi-Series Line Chart

<cfchart format="html" chartwidth="600" chartheight="400">
<cfchartseries type="line" seriesLabel="Product A">
<cfchartdata item="Jan" value="50">
<cfchartdata item="Feb" value="70">
<cfchartdata item="Mar" value="90">
</cfchartseries>
<cfchartseries type="line" seriesLabel="Product B">
<cfchartdata item="Jan" value="30">
<cfchartdata item="Feb" value="60">
<cfchartdata item="Mar" value="100">
</cfchartseries>
</cfchart>
<cfchart format="html" chartwidth="600" chartheight="400"> <cfchartseries type="line" seriesLabel="Product A"> <cfchartdata item="Jan" value="50"> <cfchartdata item="Feb" value="70"> <cfchartdata item="Mar" value="90"> </cfchartseries> <cfchartseries type="line" seriesLabel="Product B"> <cfchartdata item="Jan" value="30"> <cfchartdata item="Feb" value="60"> <cfchartdata item="Mar" value="100"> </cfchartseries> </cfchart>
<cfchart format="html" chartwidth="600" chartheight="400">
    <cfchartseries type="line" seriesLabel="Product A">
        <cfchartdata item="Jan" value="50">
        <cfchartdata item="Feb" value="70">
        <cfchartdata item="Mar" value="90">
    </cfchartseries>

    <cfchartseries type="line" seriesLabel="Product B">
        <cfchartdata item="Jan" value="30">
        <cfchartdata item="Feb" value="60">
        <cfchartdata item="Mar" value="100">
    </cfchartseries>
</cfchart>

Output

Example 5: Create a Line Chart from a Database

<cfquery name="artworkData" datasource="cfartgallery">
SELECT artname,price
FROM art
ORDER BY price DESC
FETCH NEXT 15 ROWS ONLY
</cfquery>
<cfchart format="html" chartHeight="600" chartWidth="800" title="Price of Artworks by Artist" type="line" showLegend="FALSE">
<cfchartseries query="artworkData" itemColumn="artname" valueColumn="price" color="red">
</cfchartseries>
</cfchart>
<cfquery name="artworkData" datasource="cfartgallery"> SELECT artname,price FROM art ORDER BY price DESC FETCH NEXT 15 ROWS ONLY </cfquery> <cfchart format="html" chartHeight="600" chartWidth="800" title="Price of Artworks by Artist" type="line" showLegend="FALSE"> <cfchartseries query="artworkData" itemColumn="artname" valueColumn="price" color="red"> </cfchartseries> </cfchart>
<cfquery name="artworkData" datasource="cfartgallery">
    SELECT artname,price
    FROM art
    ORDER BY price DESC
    FETCH NEXT 15 ROWS ONLY
</cfquery>

<cfchart format="html" chartHeight="600" chartWidth="800" title="Price of Artworks by Artist" type="line" showLegend="FALSE">
    <cfchartseries query="artworkData" itemColumn="artname" valueColumn="price" color="red">
    </cfchartseries>
</cfchart>

Output

Get help faster and easier

New user?