Declaring a JS variable as a JS controlled HTML object

Question

Situation: I have a function that dumps input data into an HTML block element, eg:

function national(){
x=Number($('#nationalBudget').val());
a=x*2;
$('#one').text(a);}

Then it prints the input into any element with the id="one"

<span id="one"></span>

This is fine, but I would like to incorporate a jQuery Bargraph. The bargraph that I am using is fed by an array:

  coolnessGraph = new Array(
                   [100000,'ROI w/ Local Spending'],
                   [200000,'ROI w/o Local Spending']
$("#ROIchart").jqBarGraph({
            data: coolnessGraph, // array of data for your graph
            title: false, // title of your graph, accept HTML
            barSpace: 10, // this is default space between bars in pixels
            width: 400, // default width of your graph
            height: 200, //default height of your graph
            color: '#F8981D', // if you don't send colors for your data this will be default bars color
            colors: false, // array of colors that will be used for your bars and legends
            lbl: '', // if there is no label in your array
            sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
            position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
            prefix: '', // text that will be shown before every label
            postfix: '', // text that will be shown after every label
            animate: true, // if you don't need animated appearance change to false
            speed: 2, // speed of animation in seconds
            legendWidth: 100, // width of your legend box
            legend: false, // if you want legend change to true
            legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
            type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
            showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
            showValuesColor: '#fff' // color of font for values 
});

Problem: I would like to replace the hard numbers (e.g. 100000 & 200000) in the array with the output that is dumped into my HTML object. I've tried the following:

var TestVariable = <span id="one"></span>;
coolnessGraph = new Array(
                       [TestVariable,'ROI w/ Local Spending'],

and just about every other iteration of syntax I could think up to make the process work. I also tried waiting to fire the graph after the first calculation has been run. Is there an error my logic?...syntax?...any help would be greatly be appreciated.

lsoliveira · Accepted Answer · 2011-12-21 00:33:04Z

1

If I'm reading correctly, you only need to pass $('#one').text(), or a variation of that, into the array. Am I missing something?

answered Dec 21, 2011 at 0:33

lsoliveira

4,6503 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Scott Sword Over a year ago

Well, it isn't functioning properly in fiddle, but you can check out my code structure here jsfiddle.net/swordfish0321/nmR2w. I tried passing your statement directly in the array and through a var, neither worked.

Scott Sword Over a year ago

Note It's working fine locally, for some reason fiddle isn't accepting my code. And by fine locally, I mean everything, but the graph function utilizing my initial function.

lsoliveira Over a year ago

@user1050809 - You should be more careful with your code... I just tested your fiddle and it has several problems. Your tags are unbalanced and you did not import the graphing jquery plugin, for instance. I copied your code and worked it a bit and it's essentially working. See here: jsfiddle.net/UeYmn. The code is also very complex for such a simple task. Try reworking it a bit so that it gets simpler to maintain (generating all the text in JS so that you don't have that much placeholder html, for instance).

Scott Sword Over a year ago

Agreed, I like the way you set the problem up much better in fiddle. Yes, this is fairly complex for what I'm trying to achieve. I will go through and try to re-sculpt to be more maintainable. Thank you for the assistance!!!

Collectives™ on Stack Overflow

Declaring a JS variable as a JS controlled HTML object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related