#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3

    Passing data from coldfusion to amchart


    Please consider the following code:

    // Following tag inside header of my file

    Code:
    <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

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


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

    Code:
    <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:


    Code:
    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 error and I see an obvious reason because I'm inside script tag and I'm wondering how to proceed? Any suggestions?


    Tried to do the following in the body section but got an error saying that FIRST at line #4 is undefined at QFCHART. Am I doing right?

    Code:
    <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>
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    Sorry, I'm not looking at this until you wrap up the other six outstanding open threads you've started. The forum isn't just a place for you to ask questions. It's also a resource for other people to use in the future if they have a similar question. The only way that works is if the threads have some sort of answer or conclusion.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by kiteless
    Sorry, I'm not looking at this until you wrap up the other six outstanding open threads you've started. The forum isn't just a place for you to ask questions. It's also a resource for other people to use in the future if they have a similar question. The only way that works is if the threads have some sort of answer or conclusion.
    DONE !
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by Jack_Tauson_Sr
    DONE !
    I did work on my problem a bit far with the following code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    <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 sgemaildata;
    </cfquery>
    
    
    <cfdump var="#qCFCHART#">
    
    <!--- <cfoutput query="qCFCHART">
       <!---  #currentrow#) --->
        <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#"><!---  columnlist in MX 7 :the list of columns in the returned query  --->
                #col#=#qCFCHART[col][currentRow]#  <!--- columns in query objects are sorted in original order because of using ArrayToList--->
        </cfloop>
       
        <p/>
    </cfoutput> 
     --->
    
    
    
    var chart;
    <cfoutput query="qCFCHART">
    var chartData = [{
        ConnectionType: "FIRST",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "SECOND",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "FOURTH",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "SIXTH",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "SEVENTH",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "FIFTH",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> },
    {
        ConnectionType: "THIRD",NumberPercentage: <cfloop index="col" list="#ArrayToList(qCFCHART.getColumnNames())#">
                #col#=#qCFCHART[col][currentRow]# 
        </cfloop> }
        ];
    </cfoutput>    
       
    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 = "visits";
        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>
    
    
    </head>
    
    <body>
    
    <div id="chartdiv" style="width: 100%; height: 362px;"></div>
    
    
    
    
     
    </body>
    </html>

    But getting following error which is as follows:
    Code:
    RESULTSET 	
    query
      	SECOND 	THIRD 	FOURTH 	FIFTH 	FIRST 	SIXTH 	SEVENTH 	TOTAL_CONNECTION
    1 	3.1513 	6.7798 	54.4814 	1.6487 	29.5002 	4.4026 	0.0353 	5454057
    CACHED 	false
    EXECUTIONTIME 	0
    SQL 	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 'FIFTH' = EVENTS THEN 100 END) / Count(*) AS FIFTH , Sum(CASE WHEN 'FOURTH' = EVENTS THEN 100 END) / Count(*) AS FOURTH , Sum(CASE WHEN 'SIXTH' = EVENTS THEN 100 END) / Count(*) AS SIXTH , Sum(CASE WHEN 'SEVENTH' = EVENTS THEN 100 END) / Count(*) AS SEVENTH FROM MyDatabase;
    var chart; var chartData = [{ ConnectionType: "FIRST", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "SECOND", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "FIFTH", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "SIXTH", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "SEVENTH", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "FOURTH", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 }, { ConnectionType: "THIRD", NumberPercentage: TOTAL_CONNECTION=5454057 FIRST=29.5002 SECOND=3.1513 THIRD=6.7798 FIFTH=1.6487 FOURTH=54.4814 SIXTH=4.4026 SEVENTH=0.0353 } ]; 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"); });
  8. #5
  9. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    Is that a JavaScript error? You need to make that clear. If so, it's probably because you've got a cfdump and paragraph tags inside the script block.

    I also have absolutely no idea what you're doing in the list-based cfloop or the index-based cfloops.

    Do you actually have any experience using ColdFusion or JavaScript? Because to be honest, it looks like you're just flailing blindly. Based on what you're doing, I'd say you really should stop right here and read the docs, or a book, or take a training class or something before you try to continue.

    Without a basic understanding of CF or JavaScript, you're just condemning yourself to constant frustration as you run into one obstacle after another. Forums like this are meant to help with specific questions, but they can't provide all of the core knowledge. That's what documentation and books are for.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by kiteless
    Is that a JavaScript error? You need to make that clear. If so, it's probably because you've got a cfdump and paragraph tags inside the script block.

    I also have absolutely no idea what you're doing in the list-based cfloop or the index-based cfloops.

    Do you actually have any experience using ColdFusion or JavaScript? Because to be honest, it looks like you're just flailing blindly. Based on what you're doing, I'd say you really should stop right here and read the docs, or a book, or take a training class or something before you try to continue.

    Without a basic understanding of CF or JavaScript, you're just condemning yourself to constant frustration as you run into one obstacle after another. Forums like this are meant to help with specific questions, but they can't provide all of the core knowledge. That's what documentation and books are for.
    Actually that's not an error. I mentioned it wrongly. Yeah, I'm new to coldfusion and Javascript. It's just an unwanted output I'm getting.
  12. #7
  13. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    OK, then just bypassing the documentation or core understanding and jumping right into trying to build something is not the way to go about this. You need a basic understanding of CF and JavaScript before you start building something and asking continuous questions about it.

    No one is going to be able to help you if you don't have some level of core understanding first. Answering a specific question is one thing, but explaining the basics of CF or JavaScript as a whole is not something you're going to get from a forum, simply because no one has the time. That's what the documentation and books are for, and it's really your responsibility to make that basic effort first. This is true of ANY programming languages, by the way.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by Jack_Tauson_Sr
    Actually that's not an error. I mentioned it wrongly. Yeah, I'm new to coldfusion and Javascript. It's just an unwanted output I'm getting.
    Here is what I figured out:

    Iíll need to take the values in the query and convert them to a format that my chart will understand, which is an array of structures.

    So, I will have to create an array, then create a structure for each item I want to display with the keys 'ConnectionType' and 'NumberPercentage', respectively, and append this structure to the array for each item I want to display on my chart. Then use cfoutput and serializeJSON() to set the value of chartData in my JS block
    Last edited by Jack_Tauson_Sr; August 7th, 2013 at 12:56 AM.
  16. #9
  17. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    Well, it's OBVIOUS that you need to feed the data to the chart in a format it can understand. I'm not sure why you're telling me this.

    I was HOPING that you'd figured out that you need to stop what you're doing and learn the basics of CF and JavaScript before you attempt to generate charts with CF and JavaScript. What you're doing right now is like trying to tune a car engine with no understanding of how engines work.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by kiteless
    Well, it's OBVIOUS that you need to feed the data to the chart in a format it can understand. I'm not sure why you're telling me this.

    I was HOPING that you'd figured out that you need to stop what you're doing and learn the basics of CF and JavaScript before you attempt to generate charts with CF and JavaScript. What you're doing right now is like trying to tune a car engine with no understanding of how engines work.
    Yes.I need to feed the data to the chart in the format such that the JavaScript block should understand it. Sorry for the confusion. I did stop and learnt some basics and tried to proceed further and my attempt is as follows:


    I created array of structures which is as follows:

    Code:
    <!--- Creating Structure for each Item --->
    
    <cfset arrFields = arrayNew(1)>
    
    <cfset firststr = StructNew()>
    <cfset firststr.ConnectionType = "first">
    <cfset firststr.NumberPercentage = #qCFCHART.first#>
    
    <cfset arrFields[1] = StructCopy(firststr)>
    
    
    
    <!--- first Number is <cfoutput>"#firststr.ConnectionType#<cfoutput> --->
    
    <cfset secondstr = StructNew()>
    
    <cfset secondstr.ConnectionType = "second">
    <cfset secondstr.NumberPercentage = #qCFCHART.second#>
    
    <cfset arrFields[2] = StructCopy(secondstr)>
    
    
    
    
    <cfset thirdstr = StructNew()>
    
    
    <cfset thirdstr.ConnectionType = "THIRD">
    <cfset thirdstr.NumberPercentage = #qCFCHART.THIRD#>
    
    <cfset arrFields[3] = StructCopy(thirdstr)>
    
    
    
    <cfset fourth = StructNew()>
    
    
    <cfset fourth.ConnectionType = "FOURTH">
    <cfset fourth.NumberPercentage = #qCFCHART.FOURTH#>
    
    <cfset arrFields[4] = StructCopy(fourth)>
    
    
    <cfset fifth = StructNew()>
    
    
    <cfset fifth.ConnectionType = "FIFTH">
    <cfset fifth.NumberPercentage = #qCFCHART.FIFTH#>
    
    <cfset arrFields[5] = StructCopy(fifth)>
    
    <cfdump var=#arrFields#>
    
    The length of the array is <cfoutput>#ArrayLen(arrFields)#</cfoutput>
    The above code displays array of structures in the web browser.

    Now, I want to use cfoutput and serializeJSON() to set the value of chartData in my JS block.

    I have read about serializeJSON() on CF 8 documentation but still unable to figure out how can I extract specific values for ConnectionType and NumberPercentage from above code and write it in my JS block.

    You can hint me and I'll study the appropriate material to get my work done.

    Thanks for your patience and helping me out. Appreciated.
  20. #11
  21. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,273
    Rep Power
    968
    Did you actually TRY to use SerializeJSON on the array? Just use it and dump the result and you'll see the JSON data.

    One day is nowhere near enough time to learn the basics of CF and JavaScript. I'm telling you that you really need to read the docs or get a book. Or maybe try going through something like the Learn CF in a Week site.

    I'm not really sure what you're actually looking for. Unless I actually sit down and write this code for you (which I'm not going to do), I'm running out of things to say.

    You don't seem to be understanding that you can't just jump in with no knowledge and start building custom charts with CF and JS. I'll make it as clear as I can: you're not going to get anywhere unless you dedicate the time to gain a basic understanding of these languages.

IMN logo majestic logo threadwatch logo seochat tools logo