Home forums Using CanvasJS How can I gather URL parameters to use in a pie chart?

This topic contains 7 replies, has 3 voices, and was last updated by  Bivek Singh 3 weeks, 6 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #13073

    DavisB
    Member

    I am trying to gather data stored in URL and display them in the pie chart.
    I’m fairly new to this so I decided to ask around to see if I can get some help.
    I have a form and when it’s submitted it has the values of each question in the URL.

    Is there a way I can gather the data from the URL and use that data in the canvasjs pie chart?

    Kind Regards,

    Brandon

    #13076

    Vishwas R
    Keymaster

    Brandon,

    Please refer window.location object for more info about your requirement.

    #13179

    DavisB
    Member

    Thank you Vishwas. I will look into window.location object.

    #13181

    DavisB
    Member

    This is my query string I am trying to gather the data from: ?q1=0&q2=75&q3=25&q4=25&q5=50&q6=75&q7=25&q8=50&q9=0&q10=100&q11=75&q12=0&q13=0&q14=50&q15=25&q16=25&q17=75&q18=0&q19=25&q20=0&q21=50

    I want to gather just the Number values and then average them into a canvas js pie chart. for some reason I can’t seem to get just the values.

    Any suggestions?

    #13203

    Bivek Singh
    Moderator

    DavisB,

    Please refer this jsFiddle

    I’ve used URL as a string variable but you can fetch it from URL using location.search i.e.

    var url = location.search;

    Bivek,
    Team CanvasJS

    #13282

    DavisB
    Member

    Thanks you Bivek that worked perfectly.

    #13307

    DavisB
    Member

    One last question. I’m trying to get the average of 3 questions values from the users radio button selection. Each section on the survey I’m making has 3 questions with 5 answers to choose from. Each answer has a value associated with it that I gather from the URL. Is it a way I can separate the answers out by threes, add them up and average them out to get the value I need to show on the pie chart.

    I’ll try to show a snippet of my code that I have so

    <div id=”physical_group” class=”group”>
    <h3 class=”group_title”>Physical</h3>
    <ul class=”responce_header”>
    <li>Never</li>
    <li>Rarely</li>
    <li>Sometimes</li>
    <li>Often</li>
    <li>Always</li>
    </ul>
    <div class=”question”>
    <div class=”errors”>
    <ul class=”errorlist”>
    </ul>

    </div>
    <p class=”label”>
    <span class=”enum”>1.</span>
    <label for=”id_q1_0″>I eat a balanced nutritional diet</label>
    </p>
    <div class=”choices”>
    <ul id=”id_q1″>
    <li>
    <input id=”id_q1_1″ name=”q1″ value=”0″ type=”radio”/>
    <label for=”id_q1_1″>
    <span class=”label_text”>Never</span>
    </label>
    </li>
    <li>
    <input id=”id_q1_2″ name=”q1″ value=”25″ type=”radio”/>
    <label for=”id_q1_2″>
    <span class=”label_text”>Rarely</span>
    </label>
    </li>
    <li>
    <input id=”id_q1_3″ name=”q1″ value=”50″ type=”radio”/>
    <label for=”id_q1_3″>
    <span class=”label_text”>Sometimes</span>
    </label>
    </li>
    <li>
    <input id=”id_q1_4″ name=”q1″ value=”75″ type=”radio”/>
    <label for=”id_q1_4″>
    <span class=”label_text”>Often</span>
    </label>
    </li>
    <li>
    <input id=”id_q1_5″ name=”q1″ value=”100″ type=”radio”/>
    <label for=”id_q1_5″>
    <span class=”label_text”>Always</span>
    </label>

    <span class=”enum”>2.</span>
    <label for=”id_q2_0″>I eat regular nutritious meals that give me the energy I need to get through the day.</label>
    </p>
    <div class=”choices”>
    <ul id=”id_q2″>
    <li>
    <input id=”id_q2_1″ name=”q2″ value=”0″ type=”radio”/>
    <label for=”id_q2_1″>
    <span class=”label_text”>Never</span>
    </label>
    </li>
    <li>
    <input id=”id_q2_2″ name=”q2″ value=”25″ type=”radio”/>
    <label for=”id_q2_2″>
    <span class=”label_text”>Rarely</span>
    </label>
    </li>
    <li>
    <input id=”id_q2_3″ name=”q2″ value=”50″ type=”radio”/>
    <label for=”id_q2_3″>
    <span class=”label_text”>Sometimes</span>
    </label>
    </li>
    <li>
    <input id=”id_q2_4″ name=”q2″ value=”75″ type=”radio”/>
    <label for=”id_q2_4″>
    <span class=”label_text”>Often</span>
    </label>
    </li>
    <li>
    <input id=”id_q2_5″ name=”q2″ value=”100″ type=”radio”/>
    <label for=”id_q2_5″>
    <span class=”label_text”>Always</span>
    </label>
    </li>
    </ul>
    </div>
    </div>
    <div class=”question”>
    <div class=”errors”></div>
    <p class=”label”>
    <span class=”enum”>3.</span>
    <label for=”id_q3_0″>I choose to abstain from sex or sex is enjoyable and I practice safe sex.</label>
    </p>
    <div class=”choices”>
    <ul id=”id_q3″>
    <li>
    <input id=”id_q3_1″ name=”q3″ value=”0″ type=”radio”/>
    <label for=”id_q3_1″>
    <span class=”label_text”>Never</span>
    </label>
    </li>
    <li>
    <input id=”id_q3_2″ name=”q3″ value=”25″ type=”radio”/>
    <label for=”id_q3_2″>
    <span class=”label_text”>Rarely</span>
    </label>
    </li>
    <li>
    <input id=”id_q3_3″ name=”q3″ value=”50″ type=”radio”/>
    <label for=”id_q3_3″>
    <span class=”label_text”>Sometimes</span>
    </label>
    </li>
    <li>
    <input id=”id_q3_4″ name=”q3″ value=”75″ type=”radio”/>
    <label for=”id_q3_4″>
    <span class=”label_text”>Often</span>
    </label>
    </li>
    <li>
    <input id=”id_q3_5″ name=”q3″ value=”100″ type=”radio”/>
    <label for=”id_q3_5″>
    <span class=”label_text”>Always</span>
    </label>
    </li>
    </ul>
    </div>
    </div>
    </div>

    If you need any more explanation please let me know.
    Thanks in advance.

    #13327

    Bivek Singh
    Moderator

    DavisB,

    Please take a look at this jsfiddle.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.