jQuery UI Widgets › Forums › Chart › zooming charts
Tagged: chart, charting, jquery chart, jqwidgets chart, jqxChart
This topic contains 5 replies, has 2 voices, and was last updated by vasumullapudi 7 years, 2 months ago.
-
Authorzooming charts Posts
-
i am working with zooming charts, i am moving rangeselector by mouse wheel,if i changing the rangeselector manually.from that moment my mousewheel
on rangeselector is not working.why? i dont know.I explained my solution here:
http://www.jqwidgets.com/community/topic/zooming-with-scroll-wheel/#post-82580
But I can repeat it here. It may be not the best solution but it worked for me. Anyway the performance of zooming is very poor so I don’t use it.
So, what you need is to modify jqxchart.rangeselector.js:
1) find _onSliderMouseUp: function (event) row
2) remove or comment everything in this function after these rows:var minValue = self._offsetToValue(groupIndex, from - fullRect[posProp]); var maxValue = self._offsetToValue(groupIndex, to - fullRect[posProp]);3) add this call:
zoomChart(minValue, maxValue);
4) add this function somewhere to your code:function zoomChart(minValue, maxValue) { settings.xAxis.minValue = minValue; settings.xAxis.maxValue = maxValue; chart.update(); }where settings is your chart’s settings and chart is obviously a chart:
chart = $('#jqxChart').jqxChart('getInstance');thank u mykola ,now it is working.but its is not in control ,while i am trying to click it is not going to be stable ,it is moving
here is my code
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>RangeSelector – Numeric Scale</title>
<link type=”text/css” rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” />
<link type=”text/css” rel=”stylesheet” href=”jqwidgets/styles/jqx.shinyblack.css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.min.js”></script><script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxrangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxresponse.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script><script type=”text/javascript”>
$(document).ready(function () {var valuemax;
var valuemin;
// create jqxRangeSelector.
$(“#rangeSelector”).jqxRangeSelector({
width:1050,
min: 0,
max: 1000,
theme:’shinyblack’,
//backgroundColor: ‘white’,
minorTicksInterval: 1,
majorTicksInterval: 50,
range: { from: 10, to: 100 }});
var range = $(‘#rangeSelector’).jqxRangeSelector(‘getRange’);
$(“#from”).text(range.from);
$(“#to”).text(range.to);$(“#rangeSelector”).on(“change”, function (event) {
$(“#from”).text(event.args.from);
$(“#to”).text(event.args.to);
$(‘#chartContainer’).jqxChart(‘refresh’);
settings.xAxis.minValue=event.args.from;
settings.xAxis.maxValue=event.args.to;
});$(“#yrange”).jqxRangeSelector({
width: 500,
height: 10,
theme:’energyblue’,
min: 0,
max: 500,
range:{
from:0,
to:500
},
labelsFormat:’f’,
labelsFormatFunction: function (value) {
return “<span style=’visibility:false ;’>” ;
},majorTicksInterval: 50,
minorTicksInterval: 20});
var range = $(‘#yrange’).jqxRangeSelector(‘getRange’);
$(“#yrange”).on(“change”, function (event) {
$(‘#chartContainer’).jqxChart(‘refresh’);
settings.valueAxis.minValue=event.args.from;
settings.valueAxis.maxValue=event.args.to;
});
var refreshTimeout = 1000;var data = [];
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:false}}
]
},
{
type :’line’,series:[
{ dataField: ‘value2′, displayText :’mcu’,lineWidth: 1, lineColor:’blue’,
opacity:1,lineWidthSelected: 1,symbolType: ‘square’,dashStyle:’4,4′,
fillColorSymbolSelected: ‘white’, symbolSize: 4 ,labels:{visible:false}
}
]
},
{
type: ‘spline’,series :[
{ dataField: ‘value3′, displayText:’vinp’, lineWidth: 1,lineColor:’green’,
opacity:1, lineWidthSelected: 1 ,symbolType: ‘rectangle’,dashStyle:’4,4′,
fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:false}
}
]
},
{
type :’spline’,series:[
{ dataField: ‘value4′, displayText:’vccwifi’, lineWidth: 1,lineColor:’black’,
opacity:1, lineWidthSelected: 1,symbolType: ‘sphere’,dashStyle:’4,4′, fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:false}
}
]
}
]var settings = {
title: “Power Profiler”,
description: “Multiple Graphs”,showLegend :true,
showBorderLine: false,
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’,
type:’default’,
minValue:0,
maxValue:30,
enableAxisTextAnimation: true,
alignEndPointsWithIntervals: true,
gridLines: { step: 1},
valuesOnTicks: true,labelsFormat:’%s’,
intervalType:’seconds’,
// labels:
// {
// formatFunction: function (value) {
// return value.getSeconds()
// }
// },// type: ‘time’,
baseUnit: ‘seconds’,
labelsFormat : ‘ss.sss’,rangeSelector:{
renderTo: $(‘#selectorContainer’),padding: { left: 0, right: 0,top: 0, bottom: 0 },
minValue: 0,
maxValue:1000,
type:’default’,
backgroundColor: ‘white’,baseUnit: ‘seconds’,
gridLines: { visible:true },
serieType: ‘area’,
labelsFormat:’%s’,
intervalType:’seconds’},
},
valueAxis:
{
title: { text: ‘Graph’ },
labels: { horizontalAlignment: ‘right’ },minValue:valuemin,
maxValue:valuemax,
unitInterval:2
},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.dataField = ‘value1’;}
}
else if(event.args.serie.dataField == ‘value2’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value2’;
}}
else if(event.args.serie.dataField == ‘value3’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value3’;
}}
else if (event.args.dataField == ‘value4’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value4’;}
}
else
{}
}
} */
$(“#all”).click(function () {$(‘#chartContainer’).jqxChart(
settings={source:data,showLegend:true,xAxis:{dataField:’time’}
,seriesGroups:seriesGroups,});
});
$(“#vmod”).click(function () {$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value1’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});
});
$(“#mcu”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[
{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value2’,
symbolSize: 4,labels:{visible:true}
}
]
}
]
});});
$(“#vinp”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[
{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value3’,
symbolSize: 4,labels:{visible:true}
}
]
}
]
});
});
$(“#vccwifi”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
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’);
}
});
/* $(‘#resetZooming’).jqxChart(settings). on(‘click’, function (event) {
var args = event.args;
var min=$(‘#minval’).val();
var max=$(‘#maxval’).val();
if(max<min)
{
$(‘#p’).html(‘min is greater than max’).addClass(“color”);
$(‘#minval’).val(”);
$(‘#maxval’).val(”);}
else
{
$(‘#p’).html(‘min is greater than max’).hide();
$(‘#chartContainer’).jqxChart(‘refresh’);settings.xAxis.minValue = min;
settings.xAxis.maxValue = max;//$(‘#chartContainer’).jqxChart(settings.xAxis.rangeSelector.maxValue = max);
$(‘#chartContainer’).jqxChart(‘refresh’);
}
}); */
$(‘#chartContainer’).jqxChart(settings).
on(‘rangeSelectionChanging’, function (event) {
var args = event.args;
args.instance.description = args.minValue+ ” – ” + args.maxValue;
});
$(‘#selectorContainer’).bind(‘wheel’, onWheel);function onWheel(e) {
e = e || window.event;if (e.originalEvent != null) e = e.originalEvent;
var delta = e.deltaY / -1 || e.detail / -1 || e.wheelDelta;var chartInstance = $(‘#chartContainer’).jqxChart(‘getInstance’);
if (delta < 0) {
newMin = chartInstance.xAxis.minValue-10;
newMax = chartInstance.xAxis.maxValue+10;if (newMin < newMax) {
chartInstance.xAxis.maxValue = newMax;
if(newMin>0){
chartInstance.xAxis.minValue = newMin;}
}} else if (delta > 0) {
newMin = chartInstance.xAxis.minValue + 10 ;
newMax = chartInstance.xAxis.maxValue – 10;
if (newMin < newMax) {
chartInstance.xAxis.minValue = newMin;
chartInstance.xAxis.maxValue = newMax;
}
}chartInstance.refresh();
}/* $(‘#chartContainer’).jqxChart(settings).hover(
function() {
$(this).animate({ ‘zoom’: 1.2 }, 400);
},
function() {
$(this).animate({ ‘zoom’: 1 }, 400);
}); */$(‘#chartContainer’).jqxChart(settings).on(‘click’,
function (event) {
alert(event.args);if(event.args)
{
if (event.args.elementValue)
{
alert(args.elementValue);
}
}
});
});
</script>
<style type=”text/css”>
.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-tooltip-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{fill:black;
color:black;
}
</style>
</head>
<body>
<div>
<div id=’chartContainer’ style=”cursor:;width:1100px; height:400px;”></div>
<div id=’selectorContainer’ style=”width:1100px; height:100px;” >
</div>
<div id=”rangeSelector” style=”width:1100px; height:80px;”>
</div>
</div>
Min value <span id=”from”></span> Max Value <span id=”to”></span>
<div>
<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>
<td>
<p style=”font-family: Verdana; font-size: 12px; width:170px;”>min/max values:
</p>
<input style=’float: left; margin-left: 20px;’ id=”resetZooming” type =”button” value=”Reset zooming”></br>
<p>please select the range with in 0 to 400</p>
<p id=’p’></p>
minvalue <input id=’minval’ type=’text’ class=’input’/>
maxvalue <input id=’maxval’ type=’text’ class=’input’/>
</td></tr>
</table>
<div id =”yrange” style=”width:200px;height:5px;”></div>
<span id=”fromm”>
</span>
<span id=”too”>
</span><span id=”minnn”>
</span>
<span id=”maxxx”>
</span>
<span id=”avg”>
</span>
</body>
</html>first of all, I suppose you should call refresh after you modify settings.xAxis.minValue and maxValue, like in this place:
$("#rangeSelector").on("change", function (event) { $("#from").text(event.args.from); $("#to").text(event.args.to); $('#chartContainer').jqxChart('refresh'); settings.xAxis.minValue=event.args.from; settings.xAxis.maxValue=event.args.to; });and this:
$("#yrange").on("change", function (event) { $('#chartContainer').jqxChart('refresh'); settings.valueAxis.minValue=event.args.from; settings.valueAxis.maxValue=event.args.to; });Then, if you did everything I wrote then in 3-rd step you should have added this call:
zoomChart(minValue, maxValue);
inside _onSliderMouseUp: function (event) of jqxchart.rangeselector.js instead of removed rows. So, eventually you should have added this function somewhere in your code, but I don’t see it. This function also should be visible to jqxchart.rangeselector.js so probably it should be outside $(document).ready(function () { construction and since it should also have access to settings variable you should declare the latter outside of $(document).ready too.- This reply was modified 7 years, 2 months ago by mykola.
thank you for your response.i will implement your suggestion
-
AuthorPosts
You must be logged in to reply to this topic.