jeudi 23 mars 2017

Google Timeline chart, haxis position and start/end times for bars

I have created google timeline chart and would like to add the start and end time's to the bars and change the bottom xaxis to the top of the chart. But cant find anything for this from the timeline options. Is this possible somehow??

function ChartView(chartWidth, chartHeight, renderedTo, dataset, minTime, maxTime) {
var colors = [];
for (var i = 0; i < dataset.getNumberOfRows(); i++) {
    if (dataset.getValue(i, 0) == 'DataNotFound') {
        colors.push("#ffffdd");
    }
    else {
        colors.push(colorArray[dataset.getValue(i, 1)]);
    }
}
var options = {
    backgroundColor: '#ffd',
    enableInteractivity: false, // select, on/off events wont cause normal action i.e. bar color change
    hAxis: {
        format: 'HH:mm',
        minValue: minTime,
        maxValue: maxTime
    },
    height: chartHeight,
    width: chartWidth,
    colors: colors
};
var chart = new google.visualization.Timeline(document.getElementById(renderedTo));
var view = new google.visualization.DataView(dataset);
view.setColumns([0, 1, 2, 3]);
var container = document.getElementById(renderedTo);

google.visualization.events.addListener(chart, 'ready', function () {
    // set original color
    var bars = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(bars, function (bar, index) {
        if (parseFloat(bar.getAttribute('x')) > 0 &&
            bar.getAttribute('fill') != "#e6e6c7" &&
            bar.getAttribute('fill') != "#ffffdd" &&
            index < (bars.length - 1)) {
                var textElem = bar.nextSibling;
                bars[index].setAttribute('fill', colorArray[textElem.innerHTML]);
        }
    });
});

google.visualization.events.addListener(chart, 'onmouseover', function (e) {
    // set original color
    var bars = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(bars, function (bar, index) {
        if (parseFloat(bar.getAttribute('x')) > 0 &&
            bar.getAttribute('fill') != "#e6e6c7" &&
            bar.getAttribute('fill') != "#ffffdd" &&
            index < (bars.length - 1)) {
                var textElem = bar.nextSibling;
                if (textElem == null) {
                    bars[index].setAttribute('fill', "#ffffff");
                }
                else {
                    bars[index].setAttribute('fill', colorArray[textElem.innerHTML]);
                }
        }
    });
});

google.visualization.events.addListener(chart, 'onmouseout', function (e) {
    var bars = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(bars, function (bar, index) {
        if (parseFloat(bar.getAttribute('x')) > 0 &&
            bar.getAttribute('fill') != "#e6e6c7" && // pohjaväri 1
            bar.getAttribute('fill') != "#ffffdd" && // pohjaväri 2
            index < (bars.length - 1)) {             // viimeinen aikajana bar
                var textElem = bar.nextSibling;
                if (textElem == null) {
                    bars[index].setAttribute('fill', "#ffffff");
                }
                else {
                    bars[index].setAttribute('fill', colorArray[textElem.innerHTML]);
                }
        }
    });
});
chart.draw(dataset, options);
}

Aucun commentaire:

Enregistrer un commentaire