Google Chart没有显示趋势线,也没有显示错误

时间:2018-02-03 11:49:19

标签: javascript charts google-visualization google-chartwrapper

我尝试在Google LineChart中添加趋势线。它没有显示,没有任何提示,为什么不在我的浏览器控制台中。

刚从Googles示例中复制了选项设置。表数据通过ajax加载,我禁用了它,并为示例添加了一个静态字符串。

我认为我可能已经定义了一个系列,但我不能真正理解系列是什么,以及如何定义一个系列;我的初衷是,它会被自动识别。

我的代码:



/* global google */

google.charts.load('current', {'packages': ['gauge', 'corechart', 'line']});
google.charts.setOnLoadCallback(drawAll);

function drawAll() {
    
    drawTrendlines();
}

var temp_line;

function drawTrendlines() {

    var line_data = jsonString;


    function ajaxLines() {
        console.log("updated lines");
        temp_line.setDataTable(jsonString);
        temp_line.draw();
        setTimeout(ajaxLines, 60 * 1000);
    }

    var data = new google.visualization.DataTable(line_data);
    var options = {
        lineWidth: 3,
        trendlines: { 0: {} },
        height: 400,
        hAxis: {
            title: 'Zeit',
            titleTextStyle: {
                color: '#cccccc'
            },
            baselineColor: '#cccccc'
        },
        vAxis: {
            title: 'Temperatur',
            minValue: 20,
            maxValue: 29,
            titleTextStyle: {
                color: '#cccccc'
            },
            baselineColor: '#cccccc'
        },
        colors: ['#AB0D06', '#007329'],
        curveType: 'function',
        backgroundColor: '#000'
    };


    temp_line = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataDataTable: data,
        options: options,
        containerId: 'temp_line'
    });

    temp_line.draw();


    ajaxLines();

}

//Those data will be loaded via ajax when running on server
var jsonString = '{"cols":[{"label":"Mins","type":"string"},{"label":"Temp","type":"number"}],"rows":[{"c":[{"v":"02.02, 18:18"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:22"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:26"},{"v":"27.4","f":"27.4\u00b0"}]},{"c":[{"v":"02.02, 18:30"},{"v":"27.0","f":"27.0\u00b0"}]},{"c":[{"v":"02.02, 18:34"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 18:38"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 23:34"},{"v":"24.2","f":"24.2\u00b0"}]},{"c":[{"v":"02.02, 23:38"},{"v":"24.4","f":"24.4\u00b0"}]},{"c":[{"v":"02.02, 23:42"},{"v":"24.7","f":"24.7\u00b0"}]},{"c":[{"v":"02.02, 23:46"},{"v":"24.8","f":"24.8\u00b0"}]},{"c":[{"v":"02.02, 23:50"},{"v":"24.9","f":"24.9\u00b0"}]},{"c":[{"v":"02.02, 23:54"},{"v":"25.0","f":"25.0\u00b0"}]},{"c":[{"v":"02.02, 23:58"},{"v":"25.1","f":"25.1\u00b0"}]},{"c":[{"v":"03.02, 0:02"},{"v":"25.2","f":"25.2\u00b0"}]},{"c":[{"v":"03.02, 0:06"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:10"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:14"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:18"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:22"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:26"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:30"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:34"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:38"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:42"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:46"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:50"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:54"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:58"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:02"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:06"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:10"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:14"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:18"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 1:22"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:26"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:30"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:58"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:14"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:58"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:02"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:06"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:10"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:14"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:18"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:26"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:38"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:42"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:50"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:26"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:54"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:02"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:06"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:10"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:14"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:18"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:30"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 10:34"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:38"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 11:26"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 11:30"},{"v":"26.2","f":"26.2\u00b0"}]},{"c":[{"v":"03.02, 11:34"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:38"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:42"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:46"},{"v":"26.4","f":"26.4\u00b0"}]},{"c":[{"v":"03.02, 11:50"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:54"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:58"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 12:02"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:06"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:10"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:14"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:18"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:22"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:26"},{"v":"26.7","f":"26.7\u00b0"}]},{"c":[{"v":"03.02, 12:30"},{"v":"26.7","f":"26.7\u00b0"}]}]}';

body {
	background-color: black;
}

.gauge {

    display: inline-block; 
    margin-top:20px;
    
}

#gauges {
    max-width:900px;
    margin:auto;
    text-align:center;
}

#lines {
    margin:auto;
    position:relative;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
        <div id="lines">
            <div id="temp_line"></div>
        </div>
&#13;
&#13;
&#13;

提前谢谢。

1 个答案:

答案 0 :(得分:2)

趋势线仅由连续的x轴(数字,日期等)支持 不是离散轴(字符串值)

请参阅以下工作片段,
数据视图用于将第一列转换为实际日期

google.charts.load('current', {
  packages: ['gauge', 'corechart', 'line']
}).then(drawTrendlines);

var temp_line;

function drawTrendlines() {
    var line_data = jsonString;

    function ajaxLines() {
        temp_line.setDataTable(view);
        temp_line.draw();
        setTimeout(ajaxLines, 60 * 1000);
    }

    var data = new google.visualization.DataTable(line_data);
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        var today = new Date();
        var value = dt.getValue(row, 0).replace(' ', '').split(',');
        var valueDate = value[0].split('.');
        var valueTime = value[1].split(':');
        var newValue = new Date(today.getFullYear(), valueDate[1], valueDate[0], valueTime[0], valueTime[1]);
        return newValue;
      },
      label: data.getColumnLabel(0),
      type: 'date'
    }, 1]);

    var options = {
        lineWidth: 3,
        trendlines: { 0: {} },
        height: 400,
        hAxis: {
            title: 'Zeit',
            titleTextStyle: {
                color: '#cccccc'
            },
            baselineColor: '#cccccc'
        },
        vAxis: {
            title: 'Temperatur',
            minValue: 20,
            maxValue: 29,
            titleTextStyle: {
                color: '#cccccc'
            },
            baselineColor: '#cccccc'
        },
        colors: ['#AB0D06', '#007329'],
        curveType: 'function',
        //backgroundColor: '#000'
    };

    temp_line = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataDataTable: view,
        options: options,
        containerId: 'temp_line'
    });

    temp_line.draw();
    ajaxLines();
}

var jsonString = '{"cols":[{"label":"Mins","type":"string"},{"label":"Temp","type":"number"}],"rows":[{"c":[{"v":"02.02, 18:18"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:22"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:26"},{"v":"27.4","f":"27.4\u00b0"}]},{"c":[{"v":"02.02, 18:30"},{"v":"27.0","f":"27.0\u00b0"}]},{"c":[{"v":"02.02, 18:34"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 18:38"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 23:34"},{"v":"24.2","f":"24.2\u00b0"}]},{"c":[{"v":"02.02, 23:38"},{"v":"24.4","f":"24.4\u00b0"}]},{"c":[{"v":"02.02, 23:42"},{"v":"24.7","f":"24.7\u00b0"}]},{"c":[{"v":"02.02, 23:46"},{"v":"24.8","f":"24.8\u00b0"}]},{"c":[{"v":"02.02, 23:50"},{"v":"24.9","f":"24.9\u00b0"}]},{"c":[{"v":"02.02, 23:54"},{"v":"25.0","f":"25.0\u00b0"}]},{"c":[{"v":"02.02, 23:58"},{"v":"25.1","f":"25.1\u00b0"}]},{"c":[{"v":"03.02, 0:02"},{"v":"25.2","f":"25.2\u00b0"}]},{"c":[{"v":"03.02, 0:06"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:10"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:14"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:18"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:22"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:26"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:30"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:34"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:38"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:42"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:46"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:50"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:54"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:58"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:02"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:06"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:10"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:14"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:18"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 1:22"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:26"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:30"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:58"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:14"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:58"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:02"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:06"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:10"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:14"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:18"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:26"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:38"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:42"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:50"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:26"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:54"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:02"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:06"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:10"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:14"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:18"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:30"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 10:34"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:38"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 11:26"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 11:30"},{"v":"26.2","f":"26.2\u00b0"}]},{"c":[{"v":"03.02, 11:34"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:38"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:42"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:46"},{"v":"26.4","f":"26.4\u00b0"}]},{"c":[{"v":"03.02, 11:50"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:54"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:58"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 12:02"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:06"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:10"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:14"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:18"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:22"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:26"},{"v":"26.7","f":"26.7\u00b0"}]},{"c":[{"v":"03.02, 12:30"},{"v":"26.7","f":"26.7\u00b0"}]}]}';
body {
  	background-color: black;
}

.gauge {
    display: inline-block; 
    margin-top:20px;
}

#gauges {
    max-width:900px;
    margin:auto;
    text-align:center;
}

#lines {
    margin:auto;
    position:relative;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lines">
  <div id="temp_line"></div>
</div>