Seaview/linechart.html at master · vihari/Seaview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="d3/d3.v3.js"></script>
<script>

data=[12,30,1,234,56,78,90,12];
var load = localStorage.getItem("line");
var dataset = []
var num = 0;
for(var i=0;i<load.length;i++){
    if(load[i]!=',')
	num = num*10+parseInt(load[i]);
    else if(load[i]==','){
	dataset.push(num)
	num=0;
    }
}
data = dataset;

var width = 140;
var height = 40;

var x = d3.scale.linear()
.domain([0,data.length])
.range([0, width]);

var y = d3.scale.linear()
.domain([d3.min(data),d3.max(data)])
    .range([height,0]);

var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" +0 + "," + 0 + ")");

svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);

</script>