CODEWITHSUNDEEP
jquerycharts
jeremy
jeremy

Reputation: 201

How to build a chart based on values of textfield inputs?

I have a page with 10 textfields that are filled dynamically depending on what the use has input on a previous page.

I want to display these values in a simple bar chart. I have setup jqPlot, yes I cannot seem to get it to work. Is it possible someone could take a look at the 2nd page here and let me know how to call textfield input values to build a bar chart?

http://www.beatinganger.com/stress-test

It would be much appreciated.

Upvotes: 0

Views: 480

Answers (2)

Mark Eirich
Mark Eirich

Reputation: 10114

This seems to work for me:

jQuery(function($) {
    var ticks = [], vals = [];
    $('#edit-submitted-physical-state, #edit-submitted-mental-state, #edit-submitted-feelingso-of-belonging, #edit-submitted-feelings-of-justice, #edit-submitted-feeings-of-integrity, #edit-submitted-weight-management, #edit-submitted-emotional-ease, #edit-submitted-feelings-of-stimulation, #edit-submitted-feelings-of-justice, #edit-submitted-feelings-of-relationsip')
        .each(function(i, el) {
            vals.push(Number(el.value));
            ticks.push($('label[for="'+el.id+'"]').text().replace('Feelings of ', '').replace(': ', ''));
        });

    var plot1 = $.jqplot('chart1', [vals], {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        }
    });
});

I'm looping through all of the fields and pushing the value of each into the vals array. Remember, jQuery's .val() returns only the value of the first matched item. I'm also using Number() to make sure they are numbers and not strings.

You'll probably want to do something else with ticks - I'm just putting numbers in.

I'd recommend that you set a special class on all the text fields you want to read, and then reference them all with that class, instead of using the IDs. Then line 3 above would read simply:

$('.special_class_here').each(function(i, el) {

Upvotes: 2

macarthy
macarthy

Reputation: 3069

I think you are just pass the ids of the anwsers and not the value. You need to pass 

$("edit-submitted-mental-state").val()

Upvotes: 0

Related Questions