jQWidgets Forums

Tagged: javascript chart, javascript chart range selector, jquery chart, range selector

This topic contains 3 replies, has 3 voices, and was last updated by Hristo 9 years, 5 months ago.

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

Author

zooming charts Posts
December 22, 2015 at 12:03 pm zooming charts #79660

vasumullapudi
Participant

hi all,
i am presently working in zooming charts. i have problem with rangeselector ,is there any event or any methods to control that rangeselector . i have seen all the examples in the jqxcharts but there is no solution for my problem
my project is like this
<!DOCTYPE html />
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Range Selector Example</title>
<link rel=”stylesheet” href=”../jq/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../jq/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jq/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxchart.jqxrangeselector.js”></script>
<script type=”text/javascript” src=”../jq/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jq/scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function ()
{
// prepare the data
var refreshTimeout = 1000;

var data = [];
var max = 20;
for (var i = 0; i < 20; i++)
{
data.push
({
time: i,
value1: (Math.random()) % 20 + 20,
value2: (Math.random()) % 20 + 50,
value3: (Math.random()) % 20 + 10,
value4: (Math.random()) % 20,

});
}

var seriesGroups =
[
{
type: ‘line’,
// toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: ‘value1′, displayText :’vmod’, lineWidth:1,lineColor:’red’,
opacity:1, lineWidthSelected: 1 ,symbolType: ‘circle’,dashStyle:’4,4′,fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:true}}
]
},
{
type :’line’,
series:[
{ dataField: ‘value2′, displayText :’mcu’,lineWidth: 1, lineColor:’blue’,
opacity:1,lineWidthSelected: 1,symbolType: ‘square’,
fillColorSymbolSelected: ‘white’, symbolSize: 4 ,labels:{visible:true}
}
]
},
{
type: ‘spline’,
series :[
{ dataField: ‘value3′, displayText:’vinp’, lineWidth: 1,lineColor:’green’,
opacity:1, lineWidthSelected: 1 ,symbolType: ‘rectangle’,
fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:true}
}
]
},
{
type :’spline’,
series:[

{ dataField: ‘value4′, displayText:’vccwifi’, lineWidth: 1,lineColor:’black’,
opacity:1, lineWidthSelected: 1,symbolType: ‘sphere’, fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:true}
}
]
}
]

var settings = {
title: “Power Profiler”,
description: “Multiple Graphs”,
showLegend :true,
enableAnimations: true,
//backgroundImage: ‘grey.jpg’,
animationDuration: 500,
enableCrosshairs: true,
padding: { left: 5, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
source: data,
xAxis:
{
title: { text: ‘time’ },
labels: { horizontalAlignment: ‘left’ },
dataField: ‘time’,

// minValue:0,
// maxValue: 80,
enableAxisTextAnimation: true,
alignEndPointsWithIntervals: true,
gridLines: { step: 1},
valuesOnTicks: true,
// labels: { angle: -45, offset: { x: -17, y: 0} },
labelsFormat:’%s’,
intervalType:’seconds’,
// labels:
// {
// formatFunction: function (value) {
// return value.getSeconds()
// }
// },

// type: ‘time’,
baseUnit: ‘seconds’,
labelsFormat : ‘ss.sss’,
rangeSelector: {
// Uncomment the line below to render the selector in a separate container
// renderTo: $(‘#selectorContainer’),
size: 80,
padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
//ranges :[{startValue:3,endValue:6}],
// backgroundImage: ‘../jq/images/chart_background.jpg’,
minValue: 0,
maxValue:400,
//range:{from:10,to:40},
backgroundColor: ‘white’,
//unitInterval:2,
// dataField: ‘vmod’,
baseUnit: ‘seconds’,
gridLines: { visible:true },
serieType: ‘area’,
labelsFormat:’%s’,
intervalType:’seconds’,
//labels:
// {
// formatFunction: function (value) {
// return value.getSeconds()
// }
}

},
valueAxis:
{
title: { text: ‘Graph’ },
labels: { horizontalAlignment: ‘right’ },
//unitInterval:5
},
colorScheme: ‘scheme04’,
seriesGroups:seriesGroups

};
$(‘#chartContainer’).jqxChart(settings);

$(‘#chartContainer’).on(‘toggle’, toggleFunc);
function toggleFunc(event)
{
if (event.args)
{
if(event.args.serie.dataField == ‘value1’)
{
if(event.args.state == true)
{
settings.xAxis.rangeSelector.dataField = ‘value1’;

}
}
else if(event.args.serie.dataField == ‘value2’)
{
if(event.args.state == true)
{
settings.xAxis.rangeSelector.dataField = ‘value2’;
}

}
else if(event.args.serie.dataField == ‘value3’)
{
if(event.args.state == true)
{
settings.xAxis.rangeSelector.dataField = ‘value3’;
}

}
else if (event.args.serie.dataField == ‘value4’)
{
if(event.args.state == true)
{
settings.xAxis.rangeSelector.dataField = ‘value4’;

}
}
else
{

}

}

}
$(“#all”).click(function () {

$(‘#chartContainer’).jqxChart(
settings={source:data,showLegend:true,xAxis:{dataField:’time’,rangeSelector:{
minValue: 0, maxValue:400}},seriesGroups:seriesGroups}

);
});
$(“#vmod”).click(function () {

$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’,rangeSelector:{dataField: ‘value1’,minValue:0,maxValue:400,colorScheme: ‘scheme05’}},
seriesGroups:
[
{
type: ‘line’,

series: [
{ dataField: ‘value1’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});
});
$(“#mcu”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’,rangeSelector:{dataField: ‘value2’,minValue:0,maxValue:400,colorScheme: ‘scheme04’}},
seriesGroups:
[
{
type: ‘line’,

series: [
{ dataField: ‘value2’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});

});
$(“#vinp”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’,rangeSelector:{dataField: ‘value3’,minValue:0,maxValue:400,colorScheme: ‘scheme05’}},
seriesGroups:
[
{
type: ‘line’,

series: [
{ dataField: ‘value3’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});
});
$(“#vccwifi”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’,rangeSelector:{dataField: ‘value4’,minValue:0,maxValue:400,colorScheme: ‘scheme05’}},
seriesGroups:
[
{
type: ‘line’,

series: [
{ dataField: ‘value4’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});

});
var timerFunction = function () {
//if (data.length >= 5)
//data.splice(0, 1);
data.push({ time: data[data.length – 1].time + 1,
value1: (Math.random()) % 20+ 20,
value2: (Math.random()) % 20 + 50,
value3: (Math.random()) % 20 +10,
value4: (Math.random()) % 20,
});
$(‘#chartContainer’).jqxChart(‘update’);
};
var ttimer = setInterval(timerFunction, refreshTimeout);

$(‘#btnPauseResume’)
.jqxButton({ width: 160 })
.bind(‘click’, function () {
if (ttimer) {
clearInterval(ttimer);
$(‘#btnPauseResume’).val(‘Resume’);
ttimer = undefined;
}
else {
ttimer = setInterval(timerFunction, refreshTimeout);
$(‘#btnPauseResume’).val(‘Pause’);
}
});
});
</script>
</head>
<body class=’default’>
<div>
<div id=’chartContainer’ style=”width:1100px; height:450px;”>
</div>
<!– you can optionally render the selecor in this container –>
<div id=’selectorContainer’ style=”width:1100px; height:80px;”>

</div>
</div>
<div>
<input style=’float: left; margin-left: 5px;’ id=”all” type=”button” value=”all” />
<input style=’float: left; margin-left: 5px;’ id=”vmod” type=”button” value=”vmod” />
<input style=’float: left; margin-left: 5px;’ id=”mcu” type=”button” value=”mcu” />
<input style=’float: left; margin-left: 5px;’ id=”vinp” type=”button” value=”vinp” />
<input style=’float: left; margin-left: 5px;’ id=”vccwifi” type=”button” value=”vccwifi” />
<div>
</br>
<table style=”width: 680px”>
<tr>
<td>
<p style=”font-family: Verdana; font-size: 12px; width:170px;”>Pause / Resume updates:
</p>
<input type=”button” id=”btnPauseResume” value=”Pause” />
</td>

</tr>
</table>
</div>
</div>

</body>
</html>

December 22, 2015 at 3:07 pm zooming charts #79667

ivailo
Participant

Hi vasumullapudi,

You can use rangeSelectionChanged and rangeSelectionChanging events.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

December 23, 2015 at 5:50 am zooming charts #79683

vasumullapudi
Participant

hi ivailo,
thank you for your response ,but is there any example on that rangeselectionchanged and rangeselectionchanging events.if there means please attach the links.

regards,
vasumullapudi

December 23, 2015 at 7:35 am zooming charts #79690

Hristo
Participant

Hello vasumullapudi,

You could read about those properties in API Documentation:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm
In this demo you could see how they are involved:
https://www.jseditor.io/?key=jqwidgets-chart-zoom-events

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.