jQuery Flot (stacked bar chart) and Coldfusion cfquery

Hello,

I'm trying to implement a stacked bar chart using jQuery Flot. The problem is, I'm having a hard time trying to pass the results of a cfquery to the chart. Any help and sample code is appreciated!

The below is the code I'm using for the chart. Need to pass the query results to d1 and d2.  Thanks!


if($("#stackchart").length)
	{
		var d1 = [
            [0, 20],
            [1, 35],
            [2, 20],
            [3, 35],
            [4, 35],
        ];
		

		var d2 = [
			[0, 100],
            [1, 150],
            [2, 125],
            [3, 160],
            [4, 95]	  
			];
		
		var stack = 0, bars = true, lines = false, steps = false;

		function plotWithOptions() {
			$.plot($("#stackchart"), [ { label:"Dispositioned", data: d1}, { label:"Qualifying", data:d2}], {				  
				series: {
					stack: stack,
					lines: { show: lines, fill: true, steps: steps },
					bars: { show: bars, barWidth: 0.6 },
				},
				colors: ["#2FABE9","#FA5833"],
			}
			);
			
		  }

Open in new window

HumanScaleDevAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
I have created a page with your code, just adding a call to plotWithOptions and it seems to work fine.
<script type="text/javascript">

$(function() {


if($("#stackchart").length)
	{
		var d1 = [
            [0, 20],
            [1, 35],
            [2, 20],
            [3, 35],
            [4, 35],
        ];
		

		var d2 = [
			[0, 100],
            [1, 150],
            [2, 125],
            [3, 160],
            [4, 95]	  
			];
		
		var stack = 0, bars = true, lines = false, steps = false;

		function plotWithOptions() {
			$.plot($("#stackchart"), [ { label:"Dispositioned", data: d1}, { label:"Qualifying", data:d2}], {				  
				series: {
					stack: stack,
					lines: { show: lines, fill: true, steps: steps },
					bars: { show: bars, barWidth: 0.6 },
				},
				colors: ["#2FABE9","#FA5833"],
			}
			);
			
		  }

		  plotWithOptions();
	}

});

</script>

Open in new window

test page here: http://schutt.nl/ee/Q_28362467
0
Robert SchuttSoftware EngineerCommented:
PS: I was assuming you have no problem generating the arrays. If that assumption is wrong, I can't test cf code but some basic examples "from the source" can be found here: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=arrayStruct_05.html#1123267
0
HumanScaleDevAuthor Commented:
I apologize some other urgent priority came up. I will try to look into this this week and I will close this question once  I have a chance. But from what I read, looks like all I needed was another set of eyes looking into this. :). I will get back to you as soon as I have a chance. Thank you!
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

HumanScaleDevAuthor Commented:
It's working great thanks!  Do you happen to know how to add the tooltip displaying the values?
Thank you!
0
Robert SchuttSoftware EngineerCommented:
I've searched around a bit, it seems you need custom code for this, even some plugins exist. I tried a few but didn't get it to work with the above code yet...
0
Robert SchuttSoftware EngineerCommented:
Ah, found something.
<script type="text/javascript">

$(function() {


if($("#stackchart").length)
    {
        var d1 = [
            [0, 20],
            [1, 35],
            [2, 20],
            [3, 35],
            [4, 35],
        ];
        

        var d2 = [
            [0, 100],
            [1, 150],
            [2, 125],
            [3, 160],
            [4, 95]	  
            ];
        
        var stack = 0, bars = true, lines = false, steps = false;

        function plotWithOptions() {
            $.plot($("#stackchart"), [ { label:"Dispositioned", data: d1}, { label:"Qualifying", data:d2}], {
                series: {
                    stack: stack,
                    lines: { show: lines, fill: true, steps: steps },
                    bars: { show: bars, barWidth: 0.6 },
                },
                colors: ["#2FABE9","#FA5833"],
                grid: { // this one is important
                    hoverable: true
                }
            });

        }

        plotWithOptions();

        function showTooltip(x, y, contents, z) {
            $('<div id="ftt">' + contents + '</div>').css({
                top: y - 20,
                left: x - 90,
                'border-color': z,
            }).appendTo("body").show();
        }

        $("#stackchart").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                    $("#ftt").remove();
     
                    x = item.datapoint[0];
                    y = item.datapoint[1];
                    z = item.series.color;
     
                    showTooltip(item.pageX, item.pageY,
                        "<b>" + item.series.label + "</b><br /> " + x + " = " + y,
                        z);
                }
            } else {
                $("#ftt").remove();
                previousPoint = null;
            }
        });

    }

});

</script>

<style type="text/css">
#ftt {
    position: absolute;
    border: 3px solid black;
    background-color: rgba(255,255,223,0.7);
}
</style>

Open in new window

Note the addition in the options when calling plot(). Also there's a lot of customisation you can do in the new function and CSS.
capture
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HumanScaleDevAuthor Commented:
thank you! this is awesome! you just need to declare "previousPoint" otherwise you'll get a js error, that's all! thanks again! :D
0
HumanScaleDevAuthor Commented:
I appreciate your help and your time as the tooltip question was not included here. Thank you so much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.