client1.html

<div id="app">
    <div style="width: 600px; height: 300px;margin: 0 auto;">
        <line-chart v-bind:chart-data="chartData"></line-chart>
    </div>
</div>

client2.html

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1/dist/vue-resource.min.js"></script>

client3.html

<script>
    Vue.component('line-chart', {
	    extends: VueChartJs.Line,
	    //mixins: [VueChartJs.mixins.reactiveProp],
	    props: ['chartData'],
	    data: function() {
	        return {
	            options: {
	                tooltips: {
	                    mode: 'index', // so all three tooltips appear
	                    intersect: false, // so don't need to be precise with the cursor on the point
	                },
	                scales: {
	                    xAxes: [{ // configs for our X axis
	                        display: true,
	                        scaleLabel: {
	                            display: true,
	                            labelString: 'Time'
	                        }
	                    }],
	                    yAxes: [{ // configs for our Yaxis
	                        display: true,
	                        scaleLabel: {
	                            display: true,
	                            labelString: 'Value'
	                        }
	                    }]
	                },
	                responsive: true,
	                maintainAspectRatio: false,
	            }
	        }
	    },
	    watch: { // this will be our flag for update
	        'chartData.update_flag': function(new_val, old_val) {
	            this.$data._chart.update();
	        }
	    },
	    mounted() {
	        this.renderChart(this.chartData, this.options); // Initialize and render the chart
	    }
	})

client4.html

    new Vue({
	    el: '#app',
	    data() {
	        return {
	            chartData: {
	                'update_flag': 0, // our flag for update
	                'labels': [], // our labels
	                'datasets': [] // our datasets
	            },
	        }
	    },
	    methods: {
	        fillData(limit, offset) {
	            Vue.http.get('http://127.0.0.1:5000/?limit=' +limit+ '&offset=' +offset).then(res => {
	                if (offset === 0) { // if first request let's receive 20 rows of data/labels
	                    this.chartData.labels = res.body.chart_data.labels;
	                    this.chartData.datasets = res.body.chart_data.datasets;
	                } else {
	                    this.chartData.labels.splice(0, limit); // remove the first label
	                    this.chartData.labels.push(...res.body.chart_data.labels); // like python unpack
	                    for (var i = 0; i < res.body.chart_data.datasets.length; i++) {
	                        this.chartData.datasets[i].data.splice(0, limit);
	                        this.chartData.datasets[i].data.push(...res.body.chart_data.datasets[i].data);
	                    }
	                }
	                this.chartData.update_flag ^= 1; // toggle 0 or 1 just to trigger watch in line-chart component
	            }, err => {
	                console.log(err);
	            }).then(() => { // this will happen always
	                setTimeout(this.fillData, 1000, 1, offset+limit); // preparing next request
	            });
	        }
	    },
	    created() {
	        this.fillData(20, 0); // let's ask for the first 20 rows
	    },
	})
</script>

gen_data.py

import pandas as pd
from datetime import datetime, timedelta
import random

now = datetime.now()
configs = {
	'Y1': (0, 250),
	'Y2': (0, 500),
	'Y3': (0, 750),
}

df_num_rows = 10000
y_vals = {i: [random.randint(*configs[i]) for j in range(df_num_rows)] for i in configs}
df = pd.DataFrame({
	'X': ['{:%Y-%m-%d %H:%M:%S}'.format(now + timedelta(seconds=i)) for i in range(df_num_rows)],
	**y_vals
})

df.to_csv('test_data.csv', index=False)

server1.py

@app.route('/')
def hello():
	offset = request.args.get('offset', default = 1, type = int) # rows to skip
	limit = request.args.get('limit', default = 1, type = int) # number of rows
	df = pd.read_csv('test_data.csv', # here we just import the data we need from the csv, accordding with client parameters
		skiprows=range(1, offset+1), # ignore rows in the interval
      		nrows=limit, # limited to n rows, 1 after the first request
      		parse_dates=['X']) 

	cols = [col for col in df.columns if col.startswith('Y')]

	configs = {
		'Y1': {'color': '#483D8B', 'col_name': 'name_Y1'},
		'Y2': {'color': '#f87979', 'col_name': 'name_Y2'},
		'Y3': {'color': '#00BFFF', 'col_name': 'name_Y3'},
	}

	datasets = []
	for k, c in enumerate(cols):
		datasets.append({ # our datasets configs
			'label': configs[c]['col_name'],
			'borderColor': configs[c]['color'],
			'backgroundColor': configs[c]['color'],
			'borderWidth': 2,
			'pointBorderColor': '#000000',
			'lineTension': k*0.23, # line curve
			'pointRadius': 2,
			'pointBorderWidth': 1,
			'fill': False,
			'data': df[c].tolist()
		})

	chart = {
		'labels': df['X'].dt.strftime('%H:%M:%S').tolist(),
		'datasets': datasets
	}

	return jsonify({'chart_data': chart})

app.run()