window.onload = allDraw;
function allDraw() {
   draw('water', 'hot', 'cold', 'Вода', 'Горячая', 'Холодная');  //не отрисовываются значения
   // draw('electricity', 'day', 'night', 'Электричество', 'День', 'Ночь'); так работает
}

var mainChart;
function draw(type, subtype1, subtype2, title, subtitle1, subtitle2) {
    var start_date = document.querySelector('div#last_payment div.' + type + ' span').innerHTML.slice(6);
    start_date = new Date(moment(start_date, 'DD-MM-YYYY'));
    end_date = new Date(moment().startOf('day'));
    var date = new Array;
    var i = 0;
    date[i] = new Date(moment(start_date).add(1, 'days'));
    do{
        date[i+1] = new Date(moment(date[i]).add(1, 'days'));
        i++;
    }while(date[i] < end_date);
    end_date = moment(end_date).add(1, 'days');
    var values = new Array;
    var resultData;
    function arrayFill(values, consumed_values) {
        for (var i = 0; i < consumed_values.length; i++) {
            values[i] = consumed_values[i].innerHTML;
        }
    }
            values[1] = new Array();
            values[2] = new Array();
            arrayFill(values[1], document.querySelectorAll('ul.' + type + '.' + subtype1 + ' li'));
            arrayFill(values[2], document.querySelectorAll('ul.' + type + '.' + subtype2 + ' li'));

            var firstData = {
                label: subtitle1,
                data: values[1],
                backgroundColor: 'rgba(233,202,145,0.9)',
                borderColor: 'rgba(175,119,33, 1)'
            };

            var secondData = {
                label: subtitle2,
                data: values[2],
                backgroundColor: 'rgba(184,202,222,0.9)',
                borderColor: 'rgba(37,78,136, 1)'
            };
            var resultData = {
                labels: date,
                datasets: [firstData, secondData]
            };
        }

        var options = {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Значения',
                        fontSize: 17
                    },
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        min: start_date,
                        max: end_date,
                        unit: 'day',
                        unitStepSize: 2
                    }
                }]
            },
            legend: {
                display: true
            },
            title: {
                display: true,
                text: title,
                fontSize: 19
            }
        };

        var canvas = document.querySelector('canvas#canvas');
        var ctx = canvas.getContext('2d');
        mainChart = new Chart(ctx, {
            type: 'bar',
            data: resultData,
            options: options
        });
}

<ul class="electricity day">
    {% set count = 0 %}
    {% for i in data.electricity.day %}
    <li>{{  data.electricity.day[count] }}</li>
    {% set count = count + 1 %}
    {% endfor %}
 </ul>
 <ul class="electricity night">
    {% set count = 0 %}
    {% for i in data.electricity.night %}
    <li>{{  data.electricity.night[count] }}</li>
    {% set count = count + 1 %}
    {% endfor %}
 </ul>
 <ul class="water hot">
    {% set count = 0 %}
    {% for i in data.water.hot %}
    <li>{{  data.water.hot[count] }}</li>
    {% set count = count + 1 %}
    {% endfor %}
 </ul>
<ul class="water cold">
    {% set count = 0 %}
    {% for i in data.water.cold %}
    <li>{{  data.water.cold[count] }}</li>
    {% set count = count + 1 %}
    {% endfor %}
</ul>

window.onload = allDraw; function allDraw() {
            draw('water','cold','hot','Вода','Холодная','Горячая', lastPaymentDate('water'), todayDate()); }

    function todayDate() {
            var today_date = new Date(moment().startOf('day'));
            return today_date;
    }
    function lastPaymentDate(type) {
            var last_payment_date = document.querySelector('div.' + type + ' span').innerHTML.slice(6);
            last_payment_date = new Date(moment(last_payment_date, 'DD-MM-YYYY'));
            return last_payment_date;
    }

        var mainChart;
function draw(type, subtype1, subtype2, title, subtitle1, subtitle2, start_date, end_date) {
            function arrayFill(values, consumed_values) {
                for (var i = 0; i < consumed_values.length; i++) {
                    values[i] = consumed_values[i].innerHTML;
                }
                console.log('Значения в массиве: ' + values);
            }
            var date = new Array;
            var i = 0;
            date[i] = new Date(moment(start_date).add(1, 'days'));
            do {
                date[i + 1] = new Date(moment(date[i]).add(1, 'days'));
                i++;
            } while (date[i] < end_date);
            end_date = moment(end_date).add(1, 'days');
            var resultData;
            var values = new Array;

            values[1] = new Array;
            values[2] = new Array;
            labelDisplay = true;

            var array1 = function () {
                return new Promise(function (resolve, reject) {
                    arrayFill(values[1], document.querySelectorAll('div.try1 span'));
                    console.log('Первый массив');
                    resolve();
                });
            };

            var array2 = function () {
                return new Promise(function (resolve, reject) {
                    arrayFill(values[2], document.querySelectorAll('div.try2 span'));
                    console.log('Второй массив');
                    resolve();
                });
            };

            var chartSettings = function () {
                return new Promise(function (resolve, reject) {
                    var firstData = {
                        label: subtitle1,
                        data: values[1],
                        backgroundColor: 'rgba(233,202,145,0.9)',
                        borderColor: 'rgba(175,119,33, 1)'
                    };

                    var secondData = {
                        label: subtitle2,
                        data: values[2],
                        backgroundColor: 'rgba(184,202,222,0.9)',
                        borderColor: 'rgba(37,78,136, 1)'
                    };

                    resultData = {
                        labels: date,
                        datasets: [firstData, secondData]
                    };
                    console.log('Настройки '+ resultData.datasets);
                    resolve();
                });
            };

            var chartCreation = function () {
                return new Promise(function (resolve, reject) {
                        var options = {
                            responsiveAnimationDuration: 1000,
                            scales: {
                                yAxes: [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Значения',
                                        fontSize: 17
                                    },
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }],
                                xAxes: [{
                                    type: 'time',
                                    time: {
                                        min: start_date,
                                        max: end_date,
                                        unit: 'day',
                                        unitStepSize: 2
                                    }
                                }]
                            },
                            legend: {
                                display: true
                            },
                            title: {
                                display: true,
                                text: title,
                                fontSize: 19
                            }
                        };
                        var canvas = document.querySelector('canvas#canvas');
                        var ctx = canvas.getContext('2d');
                        mainChart = new Chart(ctx, {
                            type: 'bar',
                            data: resultData,
                            options: options
                        });
                        console.log('Создание графика: ' + mainChart.data);
                        resolve();
                    }
                )
            };

            array1().then(function () {
                return array2();
            }).then(function () {
                return chartSettings();
            }).then(function () {
                return chartCreation();
            }).then(function () {
                console.log('Двойной график построен'+ mainChart.data);
            }) }

    <canvas id="canvas"></canvas>
    <div class="water">
            <span class="date">Дата: 20-04-2018</span>
    </div>
    <div class="try1">
      <span>1</span><span>2</span><span>1</span><span>3</span><span>2</span>
      <span>6</span>
    </div> <div class="try2">
     <span>5</span><span>6</span><span>3</span><span>2</span><span>5</span>
     <span>1</span>
    </div>