How can I gather URL parameters to use in a pie chart?

[DavisB]

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

[Vishwas R]

Brandon,

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

[DavisB]

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

[DavisB]

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?

[Bivek Singh]

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

[DavisB]

Thanks you Bivek that worked perfectly.

[DavisB]

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.

[Bivek Singh]

DavisB,

Please take a look at this jsfiddle.