jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Displaying pieChart and sliders in the same row
Tagged: sameRow pieChart Sliders
This topic contains 9 replies, has 3 voices, and was last updated by SarahLou 8 years, 11 months ago.
-
Author
-
Hello team,
I am facing a problem with displaying my pie chart in the same row as my sliders. I wanted to have it on the same line but it wouldn’t work :/
Can you please help me?This is my code:
<div>
<div class=”row”>
<!– TODO: display value of sliders –>
<div class=’slider-name’>Levels</div>
<div class=’slider-input’ id=’jqxSlider1′></div>
<div class=’slider-input’ id=’jqxSlider2′></div>
<div class=’slider-input’ id=’jqxSlider3′></div>
<div id=’pieChart’ style=”width: 180px; height: 200px;”></div>
</div>
</div>Hi SarahLou,
Could you please make a simple fiddle showing this behavior?
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/To be honest, I have never used JS Editor. I tried though, but they are telling me that jsxSlider is not a function (I have added libraries also…)
Here is the link: https://www.jseditor.io/?key=pie-chart-sliders-same-row-problem-1-2
Hey Sarah, all links should be referred with https i.e same way you referred only the jquery script file.
Ex:
<!DOCTYPE html> <HTML> <HEAD> <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.metro.css" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxribbon.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxlayout.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxslider.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxtabs.js"></script> </HEAD> <BODY> <div id="jqxLayout"> <!--The panel content divs can have a flat structure--> <div data-container="Case"> <div id='jqxWidget'> <div> <div class="row"> <div class='slider-name'>Levels</div> <div class='slider-input' id='jqxSlider1'></div> <div class='slider-input' id='jqxSlider2'></div> <div class='slider-input' id='jqxSlider3'></div> <div id='pieChart' style="width: 180px; height: 200px;"></div> </div> </div> </div> </div> </div> </BODY> </HTML>Thank you Peter
So, here is the link: https://www.jseditor.io/?key=pie-chart-sliders-same-row-problem-1-2
I don’t understand why the pieChart has returned to the second line… How can I put it in the same line (row) with the three sliders?
I have also tried to refresh the pie chart whenever one of the three sliders changes its value… and I have done it with a
$(document).change(function()
{
// Here the javascript of pieChart
});
But I think it’s not a good idea since everytime I have a change in another jqwidget which is completely independent from the piechart, the piechart will refresh… Do you have another idea? (Sorry I’m a beginner)Thank you so much for your help!!
Sarah
Hi SarahLou,
Please try changing your HTML structure to:
<div style=’display:inline-block’>
<div class=’slider-name’>Levels</div>
<div class=’slider-input’ id=’jqxSlider1′></div>
<div class=’slider-input’ id=’jqxSlider2′></div>
<div class=’slider-input’ id=’jqxSlider3′></div>
</div>
<div style=’display:inline-block’>
<div id=’pieChart’ style=”width: 180px; height: 200px;”></div>
</div>Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Hi SarahLou,
For the chart to update when you move a slider, attach yourself to the slider
changeevent and update the chart source there.Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Thank you so muck Ivo! The inline-block does work!
Concerning the update, I have added this to the script: (You can see it in https://www.jseditor.io/?key=pie-chart-sliders-same-row-problem-1-2)
$(‘#jqxSlider1’).on(‘change’, function (event) {
var value = $(‘#jqxSlider1’).jqxSlider(‘getValue’);
console.log(“value: ” + value);// update the chart series
$(‘#pieChart’).jqxChart(‘update’);
});The value does change but in the piechart we don’t see it. It actually refreshes but we don’t see the change. Am I doing it wrong?
Hi SarahLou,
Here is the exact code you need :
function Sliders (value1,value2,value3) {
var value1 = $(‘#jqxSlider1’).jqxSlider(‘getValue’);
var value2 = $(‘#jqxSlider2’).jqxSlider(‘getValue’);
var value3 = $(‘#jqxSlider3’).jqxSlider(‘getValue’);var newValue1 = [value1/(value1 + value2 + value3)]*100;
var newValue2 = [value2/(value1 + value2 + value3)]*100;
var newValue3 = [value3/(value1 + value2 + value3)]*100;var dataSource = [
{ Parameters: ‘slider1’, Percentage: newValue1 },
{ Parameters: ‘slider3’, Percentage: newValue3 },
{ Parameters: ‘slider2’, Percentage: newValue2 }
];
return dataSource;
}$(‘#jqxSlider1’).on(‘change’, function (event) {
var result = Sliders();
$(‘#pieChart’).jqxChart({ source: result });
});
$(‘#jqxSlider2’).on(‘change’, function (event) {
var result = Sliders();
$(‘#pieChart’).jqxChart({ source: result });
});
$(‘#jqxSlider3’).on(‘change’, function (event) {
var result = Sliders();
$(‘#pieChart’).jqxChart({ source: result });
});Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Thank’s Ivo!
Sarah
-
AuthorPosts
You must be logged in to reply to this topic.