Welcome Guest Search | Active Topics |

How do I pick out the data of the selected area after an 'axisZoom' event for a candlestick
Options
Previous Topic Next Topic
ddsmith
#1 Posted : Monday, March 10, 2014 3:14:39 PM(UTC)
Rank: Newbie

Groups: ExpiredLicense, Registered
Joined: 7/28/2013(UTC)
Posts: 4

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
EDIT:
I am looking to find the min/max range of the high/low values of a selected area of a candle stick chart.

Similar to the zoom feature that selects an area.

How do I pick out the data of the selected area?

Or, How to convert actualVisibleMinimum/actualVisibleMaximum to a data index after an 'axisZoom' event?

They appear to be scaled date values.

I need the data values (high,low,open,close) at the minX and maxX dates locations returned by the axisZoom event.

$('#chartCandle1a').bind('axisZoom', function (e, data) {
var axis = data.axis;
var minX = axis.actualVisibleMinimum;
var maxX = axis.actualVisibleMaximum;

// convert minX and maxX to an index into data on a candle stick chart
}
});
Back to top
 |  Edit by user
Dragan
#2 Posted : Tuesday, March 11, 2014 7:02:37 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You can use the following code to get the visible candlestick data:

Code:
var chartData = []; // candlestick data

            $('#chartCandle1a').bind('axisZoom', function (e, data) {
                var axis = data.axis;
                var minX = axis.actualVisibleMinimum;
                var maxX = axis.actualVisibleMaximum;

                var visibleData = [];

                for (var i = 0; i < chartData.length; i++) {

                    var dataItem = chartData[i];
                    var date = dataItem[0];

                    if (data >= minX && data <= maxX) {
                        visibleData.push(dataItem);
                    }
                }
            });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ddsmith
#3 Posted : Tuesday, March 11, 2014 7:58:41 PM(UTC)
Rank: Newbie

Groups: ExpiredLicense, Registered
Joined: 7/28/2013(UTC)
Posts: 4

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
This does not work, the vars actualVisibleMinimum and actualVisibleMaximum are doubles not dates.
Back to top
 |  Edit by user
Dragan
#4 Posted : Wednesday, March 12, 2014 3:46:32 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Sorry, you can change it to:

Code:
var chartData = []; // candlestick data

            $('#chartCandle1a').bind('axisZoom', function (e, data) {
                var axis = data.axis;
                var minX = axis.actualVisibleMinimum;
                var maxX = axis.actualVisibleMaximum;

                var visibleData = [];

                for (var i = 0; i < chartData.length; i++) {

                    var dataItem = chartData[i];
                    var date = dataItem[0.getTime();

                    if (data >= minX && data <= maxX) {
                        visibleData.push(dataItem);
                    }
                }
            });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ddsmith
#5 Posted : Wednesday, March 12, 2014 12:13:46 PM(UTC)
Rank: Newbie

Groups: ExpiredLicense, Registered
Joined: 7/28/2013(UTC)
Posts: 4

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Code:
Dragan,

This is better but axis.actualVisibleMinimum and axis.actualVisibleMaximum do not point to the cursor locations.

The candle stick chart does display correctly when zoomed the dates pointed to by axis.actualVisibleMinimum and axis.actualVisibleMaximum are not the same as the selected points.

Here is my code

Code:
    var candleDataBASE = [
        ['2014-03-11', 188.71, 186.8, 188.44, 187.23],
        ['2014-03-10', 188.23, 187.08, 187.97, 188.16],
        ['2014-03-07', 188.96, 187.43, 188.96, 188.26],
        ['2014-03-06', 188.61, 187.78, 188.21, 188.18],
        ['2014-03-05', 188.07, 187.45, 187.74, 187.75],
        ['2014-03-04', 187.98, 186.75, 186.79, 187.58],
        ['2014-03-03', 185.45, 183.75, 184.65, 184.98],
        ['2014-02-28', 187.15, 185.05, 185.79, 186.29],
        ['2014-02-27', 185.87, 184.37, 184.58, 185.82],
        ['2014-02-26', 185.6, 184.33, 185.11, 184.85],
        ['2014-02-25', 185.59, 184.23, 185.06, 184.84],
        ['2014-02-24', 186.15, 184.2, 184.28, 184.91],
        ['2014-02-21', 184.89, 183.8, 184.45, 183.89],
        ['2014-02-20', 184.52, 182.6, 183.27, 184.1],
        ['2014-02-19', 184.95, 182.87, 183.76, 183.02],
        ['2014-02-18', 184.49, 183.65, 184.18, 184.24],
        ['2014-02-14', 184.36, 182.67, 182.84, 184.02],
        ['2014-02-13', 183.2, 180.83, 180.84, 183.01],
        ['2014-02-12', 182.83, 181.71, 182.25, 182.07],
        ['2014-02-11', 182.44, 180.04, 180.16, 181.98],
        ['2014-02-10', 180.07, 179.21, 179.7, 180.01],
        ['2014-02-07', 179.87, 177.73, 178.31, 179.68],
        ['2014-02-06', 177.48, 175.22, 175.58, 177.48],
        ['2014-02-05', 175.56, 173.71, 174.78, 175.17],
        ['2014-02-04', 175.84, 174.11, 174.95, 175.39],
        ['2014-02-03', 178.37, 173.83, 177.97, 174.17]
    ];

    function parseDate(date) {
        var items = date.split('-');
        var yr = parseInt(items[0]);
        var mn = parseInt(items[1]);
        var da = parseInt(items[2]);
        var theDate = new Date(parseInt(items[0]), parseInt(items[1]) - 1, parseInt(items[2]));
        return new Date(parseInt(items[0]), parseInt(items[1]) - 1, parseInt(items[2]));
    }

    function drawCandle() {
        for (var i = 0; i < candleDataBASE.length; i++) {
            var date = parseDate(candleDataBASE[i][0]); // convert string to date structure
            var high = candleDataBASE[i][1];
            var low = candleDataBASE[i][2];
            var open = candleDataBASE[i][3];
            var close = candleDataBASE[i][4];
            candleData.push([date, high, low, open, close]);
        }

        $('#chartCandle').jqChart({
            legend: { visible: false },
            height: 512,
            grid: { drawGridlines: true },
            crosshairs: { snapToDataPoints: true, enabled: true, vLine: { strokeStyle: '#cc0a0c' } },
            axes: [{ type: 'linear', location: 'left', zoomEnabled: false, width: 50, labels: { stringFormat: '$%d', font: '12px sans-serif' } },
                   { type: 'dateTime', location: 'bottom', skipEmptyDays: true, zoomEnabled: true }],
            series: [{ type: 'candlestick', data: candleData, priceUpFillStyle: 'green', priceDownFillStyle: 'red', strokeStyle: 'black' }]
        });
    }

    $('#chartCandle').bind('axisZoom', function (e, data) {
        var axis = data.axis;
        var chart = $('#chartCandle').jqChart('chart');
        var minX = axis.actualVisibleMinimum;
        var maxX = axis.actualVisibleMaximum;

        var highMark = -99999;
        var lowMark = 99999;
        var series = chart.series.items[0];
        var highDateSelected;
        var lowDateSelected;

        var minMark = 99999999999999999;
        var maxMark = 99999999999999999;
        var minDate;
        var maxDate;

        for (var i = 0; i < candleData.length; i++) {
            var dataItem = candleData[i];
            var xVal = dataItem[0].getTime();

            var a1 = Math.abs(xVal - minX);
            if (a1 < minMark) {
                minMark = a1;
                minDate = dataItem[0].toDateString();
            }
            var a2 = Math.abs(maxX - xVal);
            if (a2 < maxMark) {
                maxMark = a2;
                maxDate = dataItem[0].toDateString();
            }
            if (xVal >= minX && xVal <= maxX) {
                if (dataItem[1] > highMark) {
                    highMark = dataItem[1];
                }
                if (dataItem[2] < lowMark) {
                    lowMark = dataItem[2];
                }
            }
        }
    });
Back to top
Dragan
#6 Posted : Thursday, March 13, 2014 7:41:42 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
It seems that when skipEmptyDays is set to true, the intervals have some offsets.

If you change these lines:
Code:
$('#chartCandle').bind('axisZoom', function (e, data) {
        var axis = data.axis;
        var chart = $('#chartCandle').jqChart('chart');
        var minX = axis.actualVisibleMinimum;
        var maxX = axis.actualVisibleMaximum;

to
Code:
  $('#chartCandle').bind('axisZoom', function (e, data) {

                var axis = data.axis;
                var chart = $('#chartCandle').jqChart('chart');
                var minX = axis._addEmptyDaysOffset(axis.actualVisibleMinimum);
                var maxX = axis._addEmptyDaysOffset(axis.actualVisibleMaximum);

the visible range will be correct.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
ddsmith on 3/13/2014(UTC)
ddsmith
#7 Posted : Thursday, March 13, 2014 7:58:39 AM(UTC)
Rank: Newbie

Groups: ExpiredLicense, Registered
Joined: 7/28/2013(UTC)
Posts: 4

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Dragan,

That is it! Thanks
Back to top
Users browsing this topic
Guest (2)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.085 seconds.