CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
axchink
axchink

Reputation: 179

Highchart: How to graph from Radio Button

being new to the JavaScript and Highcharts, I am in need of help. An example or reference to documentation will be really helpful. So, what I am trying to do is to create a survey of about 10 questions with answers such as, Yes, No, and Both in Radio-Button format.

When the users select these answers, I want it to be graphed, and from looking around, I believe that Highcharts seems to be the most neat-looking library to use.

How may I accomplish this?

In summary, user selects answers to the questions, and when they press the "submit" button, the code should count how many Yes, No, and Both there are and draw a bargraph. 

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<body>

<form action="first question">
<p>Would you choose an Apple?</p>
  <input type="radio" name="Q1" value="yes"> Yes<br>
  <input type="radio" name="Q1" value="no"> No<br>
  <input type="radio" name="Q1" value="other"> Both
</form>

<form action="second question">
<p>Would you choose a Banana?</p>
  <input type="radio" name="Q2" value="yes"> Yes<br>
  <input type="radio" name="Q2" value="no"> No<br>
  <input type="radio" name="Q2" value="other"> Both
</form>

</body>

<button type = button> Submit </button>

Upvotes: 0

Views: 79

Answers (1)

Michael Paccione
Michael Paccione

Reputation: 2827

Store your yes, no, and both in yesCount, noCount, bothCount. Give your yes's, no's and both's a seperate identifier so you can selected the all and see how many have the checked attribute.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Yes/No'
        },
        subtitle: {
            text: 'Subtitle Here'
        },
        xAxis: {
            categories: ['Votes'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Yes',
            data: [yesCount]
        }, {
            name: 'No',
            data: [noCount]
        },{
            name: 'Both',
            data: [bothCount]
        }]
    });
});

Upvotes: 2

Related Questions