diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js
index 2fb5b93..0c3d641 100644
--- a/src/components/widget-plot.js
+++ b/src/components/widget-plot.js
@@ -37,7 +37,9 @@ class WidgetPlot extends React.Component {
       //const model = simulation.models.find( model => model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator );
       //const chosenSignals = this.props.widget.signals;
 
-      simulatorData = this.props.data[simulator.node][simulator.simulator].values[0];
+      simulatorData = this.props.data[simulator.node][simulator.simulator].values.filter((values, index) => (
+        this.props.widget.signals.findIndex(value => value === index) !== -1
+      ));
 
       // Query the signals that will be displayed in the legend
       /*legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js
index ce30589..7749f48 100644
--- a/src/components/widget-plot/plot.js
+++ b/src/components/widget-plot/plot.js
@@ -14,47 +14,75 @@ import { line } from 'd3-shape';
 import { axisBottom, axisLeft } from  'd3-axis';
 import { select } from 'd3-selection';
 
-class Plot extends React.Component {
-  render() {
-    // check if data is valid
-    if (this.props.data == null || this.props.data.length === 0) return false;
-    
-    // only show data in requested time
-    let data = this.props.data;
+const leftMargin = 30;
+const bottomMargin = 20;
 
-    const firstTimestamp = data[data.length - 1].x - this.props.time * 1000;
-    if (data[0].x < firstTimestamp) {
-      const index = data.findIndex(value => value.x >= firstTimestamp - 100);
-      if (index > 0) {
-        data = data.slice(index - 1);
-      }
+class Plot extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: null
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // check if data is valid
+    if (nextProps.data == null || nextProps.data.length === 0 || nextProps.data[0].length === 0) {
+      this.setState({ data: null });
+      return;
+    }
+
+    // only show data in requested time
+    let data = nextProps.data;
+    
+    const firstTimestamp = data[0][data[0].length - 1].x - this.props.time * 1000;
+    if (data[0][0].x < firstTimestamp) {
+      // only show data in range (+100 ms)
+      const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
+      data = data.map(values => values.slice(index));
     }
 
     // calculate paths for data
-    const leftMargin = 30;
-    const bottomMargin = 20;
-
-    let xRange = extent(data, p => new Date(p.x));
-    if (xRange[1] - xRange[0] < this.props.time * 1000) {
-      xRange[0] = xRange[1] - this.props.time * 1000;
+    let xRange = extent(data[0], p => new Date(p.x));
+    if (xRange[1] - xRange[0] < nextProps.time * 1000) {
+      xRange[0] = xRange[1] - nextProps.time * 1000;
     }
+
+    let yRange = [0, 0];
+
+    data.map(values => {
+      const range = extent(values, p => p.y);
+      if (range[0] < yRange[0]) yRange[0] = range[0];
+      if (range[1] > yRange[1]) yRange[1] = range[1];
+
+      return values;
+    });
     
-    const xScale = scaleTime().domain(xRange).range([leftMargin, this.props.width]);
-    const yScale = scaleLinear().domain(extent(data, p => p.y)).range([this.props.height, bottomMargin]);
+    const xScale = scaleTime().domain(xRange).range([leftMargin, nextProps.width]);
+    const yScale = scaleLinear().domain(yRange).range([nextProps.height, bottomMargin]);
 
     const xAxis = axisBottom().scale(xScale).ticks(5);
     const yAxis = axisLeft().scale(yScale).ticks(5);
 
     const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
-    const linePath = sparkLine(data);
+
+    // generate paths from data
+    const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} />);
+
+    this.setState({ data: lines, xAxis, yAxis });
+  }
+
+  render() {
+    if (this.state.data == null) return false;
 
     return(
       <svg width={this.props.width + leftMargin} height={this.props.height + bottomMargin}>
-        <g ref={node => select(node).call(xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
-        <g ref={node => select(node).call(yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
+        <g ref={node => select(node).call(this.state.xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
+        <g ref={node => select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
 
         <g style={{ fill: 'none', stroke: 'blue' }}>
-          <path d={linePath} />
+          {this.state.data}
         </g>
       </svg>
     );