0

Hello,

I have this code here. I am trying to show the different options with radio box.

There is something wrong in my code, however I can't figure out what it is. Any help?

<div id="questions">
  <p><img src="images/pic_survey.jpg" width="279" height="104"  alt=""/></p>
  <p>Please take our five second survey!</p>
  <h3 class="hSubtitle">Question 1</h3>
  <div class="question">
  </div>
    <input type="button" value="Submit" class="bt_send" id="old_votes_send">
</div>
<div class="result clearfix">
<h3 class="hSubtitle">Question 1</h3>
  <div id="canvas-holder">
    <canvas id="chart-area" width="200" height="200" style="width: 200px; height: 200px; margin-left:-10px;">
  </canvas></div>
  <ul class="doughnut-legend">
  </ul>
</div>
<script>
  $(function() {

    var doughnutData = []
    var style =
    { "1-2 years": { color: "#FDB45C",
        highlight: "#FFC870" },
      "2-4 years": { color:"#F7464A",
        highlight: "#FF5A5E" },
      "5-7 years": { color: "#46BFBD",
        highlight: "#5AD3D1" },
      "7+ years": { color: "#4d5360",
        highlight: "#5c6473" }}

    $("#old_votes_send").click(function(){
      var option_id = $('input:radio[name=old_votes]:checked').attr("option_id");

      $.post("http://localhost/v1/questions/2/options/" + option_id + "/votes",
        { comment: "", vote_source: "main web site" },
          function(){}
      ).always(function() {
          show_chart();
      });
    })
    var get_options_data = function(){
      $.ajax({
        type: 'GET',
        url: "http://localhost/v1/questions/2/options",
        dataType: 'json',
        success: get_options_data_success,
        error: "Error"
      });
    }
    var get_options_data_success = function(data){
      doughnutData = [];
      $.each(data, function( index, value ) {
        var id = value["id"];
        var description = value["description"];

        var vote_counts = value["votes_count"];
        if (vote_counts == "null") vote_counts = 0;
        doughnutData.push(
          { id: id,
            value: vote_counts,
            color: style[description]["color"],
            highlight: style[description]["highlight"],
            label: description }
        );
      });
      show_options();
    }
    var show_chart = function(){
      $('#questions').hide();
      $('div.result').show();
      show_options_color();
      draw_doughnut();
    }
    var show_options = function(){

      $(".question").empty();

      $.each(doughnutData, function( index, value ) {
        label = value["label"];
        id    = value["id"];
        var radioBtn = $('<p><input type="radio" name="old_votes" option_id="' + id + '" /><label for="checkbox">' + label + '</label></p>');

        radioBtn.appendTo('.question');
      });
    }
    var show_options_color = function(){
      $(".doughnut-legend").empty();

      $.each(doughnutData, function( index, value ) {
        label = value["label"];
        var color_li = $('<li><span style="background-color:' + style[label]["color"] + '"></span>' + label + '</li>');

        color_li.appendTo(".doughnut-legend")
      });
    }
    var draw_doughnut = function(){
      var total_count = 0;
      $.each(doughnutData, function( index, value ) {
          total_count += value["value"];
      });
      $.each(doughnutData, function( index, value ) {
          value["value"] = Math.round((value["value"] / total_count) * 100, 2);
      });

      console.log(doughnutData);
      var ctx = document.getElementById("chart-area").getContext("2d");
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"});
    };
    get_options_data();
  });

  </script>
2
Contributors
4
Replies
18
Views
1 Year
Discussion Span
Last Post by london-G
0

Showing the options.

I have a question and options displayed as radio buttons. However it is not showing them.

The next part shows a graph(pie chart) sowing the count of the votes.

Edited by london-G

0

It may be clear to you, but since you only show the client side code, there is no way to test what your server is returning.

If you put alerts in your functions, do they show? Do they show in the right order? Does the response contain data?

You can debug in your browser (set breakpoints etc.), have you tried?

0

I found out the problem. Semi colon was missing on line 29.

Thanks!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.