jQuery UI Widgets Forums Chart zooming charts

This topic contains 5 replies, has 2 voices, and was last updated by  vasumullapudi 4 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • zooming charts #82985

    vasumullapudi
    Participant

    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.

    zooming charts #82991

    mykola
    Participant

    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');

    zooming charts #82998

    vasumullapudi
    Participant

    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

    zooming charts #83000

    vasumullapudi
    Participant

    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>

    zooming charts #83008

    mykola
    Participant

    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 4 years ago by  mykola.
    zooming charts #83013

    vasumullapudi
    Participant

    thank you for your response.i will implement your suggestion

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

You must be logged in to reply to this topic.