1 <!DOCTYPE html> 2 <!-- 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found in the LICENSE file. 6 --> 7 8 <link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html"> 9 10 <link rel="stylesheet" href="/tracing/ui/base/line_chart.css"> 11 12 <script> 13 'use strict'; 14 15 tr.exportTo('tr.ui.b', function() { 16 var ChartBase2DBrushX = tr.ui.b.ChartBase2DBrushX; 17 18 /** 19 * @constructor 20 */ 21 var LineChart = tr.ui.b.define('line-chart', ChartBase2DBrushX); 22 23 LineChart.prototype = { 24 __proto__: ChartBase2DBrushX.prototype, 25 26 decorate: function() { 27 ChartBase2DBrushX.prototype.decorate.call(this); 28 this.classList.add('line-chart'); 29 }, 30 31 isDatumFieldSeries_: function(fieldName) { 32 return fieldName != 'x'; 33 }, 34 35 getXForDatum_: function(datum, index) { 36 return datum.x; 37 }, 38 39 updateDataContents_: function(dataSel) { 40 dataSel.selectAll('*').remove(); 41 var dataBySeriesKey = this.getDataBySeriesKey_(); 42 var pathsSel = dataSel.selectAll('path').data(this.seriesKeys_); 43 pathsSel.enter() 44 .append('path') 45 .attr('class', 'line') 46 .style('stroke', function(key) { 47 return tr.ui.b.getColorOfKey(key); 48 }) 49 .attr('d', function(key) { 50 var line = d3.svg.line() 51 .x(function(d) { return this.xScale_(d.x); }.bind(this)) 52 .y(function(d) { return this.yScale_(d[key]); }.bind(this)); 53 return line(dataBySeriesKey[key]); 54 }.bind(this)); 55 pathsSel.exit().remove(); 56 } 57 }; 58 59 return { 60 LineChart: LineChart 61 }; 62 }); 63 </script> 64
