bendtherules/line_chart_demo
1
0
Fork 0
mirror of https://github.com/bendtherules/line_chart_demo.git synced 2026-08-18 13:52:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Init commit

Browse Source
This commit is contained in:
bendtherules
2017-02-23 08:29:27 +05:30
commit e9d3641f9f
5 changed files with 73 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
d3.v4.min.js
Vendored
+8
View File
File diff suppressed because one or more lines are too long
index.css
+34
View File
@@ -0,0 +1,34 @@
head,body
{
margin: 0;
padding: 0;
}
body
{
position: relative;
width: 100vw;
height: 100vh;
}
.chart-container
{
position: absolute;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,0.1);
}
line-chart
{
}
index.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Chart</title>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="d3.v4.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="chart-container">
<line-chart data-points="[[2,2],[3,4],[6,5],[40,3]]"></line-chart>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
+11
View File
@@ -0,0 +1,11 @@
var all_data_points = []
// gather all data
d3.selectAll("line-chart").each( function () {
var ele = d3.select(this)
all_data_points.push(JSON.parse(ele.attr("data-points")))
})
// ele_line_chart.append(".chart-clean-box").style({"padding":0}).node().getBoundingClientRect()
jquery.min.js
Vendored
+4
View File
File diff suppressed because one or more lines are too long