Amcharts: Interpolating step line chart values, show balloon of interpolated value

问题

I'm a newbie at amCharts, trying to create a pretty simple step line chart.

I have data where the value stays constant a long time, and only records changes to the value, for example:

{
    "timeOfDay": "18:20",
    "value": 100
}, {
    "timeOfDay": "19:40",
    "value": 80
}, {
    "timeOfDay": "21:40",
    "value": 20
}, {
    "timeOfDay": "22:40",
    "value": 50
} // and so on

The chart should draw a horizontal line until the next change point, and then again until the next and so on, which I've managed to do. However, at the moment, it's only showing the balloon text at the data points and not where the cursor is, like this: amcharts balloon at wrong place

Here I'm hovering around time 20:15 though the screenshot taker didn't capture my cursor. The balloon text is displayed at the nearest data point. I'd want the balloon text to show up either at my cursor, or over the graph on the spot my cursor is in, and for it to show the time at the place where the cursor is in.

I know I could generate new data points in between the existing ones, but would rather not, since it would be pretty heavy of an operation since I want it to show the time with an accuracy of one second - that'd be thousands of data points an hour, and I'm trusting amCharts has an interpolation option for times hidden somewhere - I tried to search the docs / google for such an option, but didn't find one so far.

EDIT: Current chart code here: http://pastebin.com/BEZxgtCb

UPDATE: Managed to extract the time with the following functions and attaching an event listener to the chartCursor object - still can't get it to show anywhere else but on the predefined points on the graph though.

var parseDate = function(dateObj) {
    return dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds();
}

var handleMove = function(event) {
    var time = event.chart.categoryAxis.coordinateToDate(event.x);
    event.chart.graphs[0].balloonText = parseDate(time);
}

回答1:

the balloon only shows up on actual data points which mean you need to inject them manually to show the balloon across the "interpolated" time. Following walkthrough your data, calculates the distance between the previous points and inject the amount of minutes in between.

        var prevTime = undefined;
        var prevValue = undefined;
        var interpolate = [];
        for ( var i1 = 0; i1 < chart.dataProvider.length; i1++ ) {
            var item = chart.dataProvider[i1];
            var curTime = AmCharts.stringToDate(item.timeOfDay,"JJ:NN")
            var curVal = item.value;

            if ( prevTime ) {
                var distance = (Number(curTime) - Number(prevTime)) / 1000 / 60;
                for ( var i2 = 0; i2 < distance; i2++ ) {
                    var newDate = new Date(prevTime);
                    newDate.setMinutes(prevTime.getMinutes() + i2);

                    if ( Number(newDate) < Number(curTime) ) {
                        interpolate.push({
                            timeOfDay: AmCharts.formatDate(newDate,"JJ:NN"),
                            value: prevValue
                        });
                    }
                }
            }

            // NEW ONE
            interpolate.push(item);

            // FOR NEXT TIME
            prevTime = curTime;
            prevValue = curVal;
        }
        chart.dataProvider = interpolate;

Unfortunately there is no option to achieve that functionality.

来源：https://stackoverflow.com/questions/30620577/amcharts-interpolating-step-line-chart-values-show-balloon-of-interpolated-val

标签

javascript

amcharts