jQuery UI Widgets Forums Chart zooming charts

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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>

    zooming charts #79667

    ivailo
    Participant

    Hi vasumullapudi,

    You can use rangeSelectionChanged and rangeSelectionChanging events.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    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

    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

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

You must be logged in to reply to this topic.