How to pass query results into Amchart?

Question

Please consider the following code:

Following tag inside header of my file

<script>

var chart;

var chartData = [{
    ConnectionType: "First",
    NumberPercentage: 1194,
{
    ConnectionType: "Second",
    NumberPercentage: 1882},
{
    ConnectionType: "Third",
    NumberPercentage: 1809},
{
    ConnectionType: "Fourth",
    NumberPercentage: 1322},
{
    ConnectionType: "Fifth",
    NumberPercentage: 1122},
{
    ConnectionType: "Sixth",
    NumberPercentage: 1114},
{
    ConnectionType: "Seventh",
    NumberPercentage: 984}
    ];


AmCharts.ready(function() {
    // PIE CHART
    chart = new AmCharts.AmPieChart();

    // title of the chart
    chart.addTitle("3D Donut Charts", 16);

    chart.dataProvider = chartData;
    chart.titleField = "ConnectionType";
    chart.valueField = "NumberPercentage";
    chart.sequencedAnimation = true;
    chart.startEffect = "elastic";
    chart.innerRadius = "30%";
    chart.startDuration = 2;
    chart.labelRadius = 15;

    // the following two lines makes the chart 3D
    chart.depth3D = 10;
    chart.angle = 15;

    // WRITE                                 
    chart.write("chartdiv");
});

</script>

Following tag inside body tag of my profile:

<div id="chartdiv" style="width: 100%; height: 362px;"></div>

I want to return the data from the following cfquery in my ColdFusion file. For the sake of simplicity I'm only mentioning cfquery for First connection. Rest cfqueries till seventh are same except the names.

<cfquery datasource = "XX.XX.X.XX" name="qCFCHART">
SELECT
   Count(*) AS TOTAL_CONNECTION
,  Sum(CASE WHEN 'FIRST'  = EVENTS THEN 100 END) / Count(*) AS FIRST
,  Sum(CASE WHEN 'SECOND' = EVENTS THEN 100 END) / Count(*) AS SECOND
,  Sum(CASE WHEN 'THIRD'  = EVENTS THEN 100 END) / Count(*) AS THIRD
,  Sum(CASE WHEN 'FOURTH' = EVENTS THEN 100 END) / Count(*) AS FOURTH
,  Sum(CASE WHEN 'FIFTH'  = EVENTS THEN 100 END) / Count(*) AS FIFTH
,  Sum(CASE WHEN 'SIXTH'  = EVENTS THEN 100 END) / Count(*) AS SIXTH
,  Sum(CASE WHEN 'SEVENTH'  = EVENTS THEN 100 END) / Count(*) AS SEVENTH
   FROM MyDatabase;
</cfquery> 

Considering the code from above script:

ConnectionType: "First",
NumberPercentage: 1194,

I want to display the result returned by "FIRST" from the above query into my Pie Chart and writing cfdump or anything ColdFusion related doesn't work there.

For example:

ConnectionType: "First",
NumberPercentage: <cfdump var="#qCFCHART.FIRST#>",

The above throws an error and I see an obvious reason because I'm inside script tag and I'm wondering how to proceed? Any suggestions?

Here is my attempt after following some comments:

<cfoutput query="qCFCHART">
    #currentrow#)
    <cfloop index="col" list="#columnlist#">
            #col#=#qCFCHART[col][currentRow]#
    </cfloop>
    <p/>
</cfoutput>


<cfset cols = getMetadata(qCFCHART)>
<cfdump var="#cols#">

Answer 1

You will need to loop over the query and create a data structure similar to what the chart is expecting - which appears to be an array of structures.

I am not going to give you the code to do this as it is a fairly simple operation, and one you could easily find information on if you choose to look for it.

You can then use serialzeJSON( data ) to get the JSON version of your data - which should have the same structure as chartData in your sample code.

Answer 2

What you need to do is output values from your server-side coldfusion query into your client-side javascript. e.g

<cfoutput>
var chartData = [{
    ConnectionType: "First",
    NumberPercentage: #qCFCHART.FIRST#},
{
    ConnectionType: "Second",
    NumberPercentage:  #qCFCHART.Second#},
{
    ConnectionType: "Third",
    NumberPercentage:  #qCFCHART.Third#},
{
    ConnectionType: "Fourth",
    NumberPercentage:  #qCFCHART.Fourth#},
{
    ConnectionType: "Fifth",
    NumberPercentage:  #qCFCHART.Fifth#},
{
    ConnectionType: "Sixth",
    NumberPercentage:  #qCFCHART.Sixth#},
{
    ConnectionType: "Seventh",
    NumberPercentage:  #qCFCHART.Seventh#}
    ];
</cfoutput>

The main reason your cfdump approach might not have worked is because you have a syntax error here:

<cfdump var="#qCFCHART.FIRST#>"

Should have been

<cfdump var="#qCFCHART.FIRST#">

But I'd strongly recommend against using cfdump; just output the value normally, there shouldn't be any need to 'dump' values into production code.

Answer 3

The simple fix to this question was that I needed to mention <cfoutput>#serializeJSON(qCFCHART.First)#</cfoutput> after Number Percentage field and it worked fine.