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>