Skip to content

Commit

Permalink
angular example fixes #374 and for #477
Browse files Browse the repository at this point in the history
  • Loading branch information
@cesine
cesine committed Jul 30, 2017
1 parent 32af81d commit 7190da9
Showing 1 changed file with 144 additions and 111 deletions.
255 changes: 144 additions & 111 deletions examples/angular.html
View file
Expand Up @@ -4,131 +4,164 @@

<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
<style>
body {
font-family: Arial, sans-serif
}
#chart_container {
width: 960px;
}
.swatch {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px 0 0;
}
.label {
display: inline-block;
}
.line {
display: inline-block;
margin: 0 0 0 30px;
}
#legend {
text-align: center;
}
.rickshaw_graph .detail {
background: none;

.detail .item, .dot {
margin-top:-450px !important;
}
</style>
</head>
<body ng-app="d3chartsApp">
<div class="container" ng-view=""></div>


<div id="chart_container">
<div id="chart"></div><br>
<div id="legend"></div>
<div class="container" ng-controller="MainCtrl">
<div class="header">
<h3 class="text-muted">AngularJS Example</h3>
<p>
Based on <a target="_blank" href="https://github.com/hendrikswan">@hendrickswan</a>'s <a target="_blank" href="http://tagtree.io/d3-with-rickshaw-and-angular">Using D3 with Rickshaw and Angular</a> Tutorial and Screencast.
</p>
</div>

<select ng-options="renderer for renderer in renderers"
ng-model="renderer">
</select>

<table width="100%">
<tr>
<td width="70%">
<rickshaw-chart
data="chartData1"
renderer="renderer"
height="450"
>
</rickshaw-chart>
</td>
<td width="30%">
<rickshaw-chart
data="chartData1"
renderer="renderer"
height="450"
>
</rickshaw-chart>
</td>
</tr>
</table>
<rickshaw-chart
data="chartData1"
renderer="renderer"
height="450"
>
</rickshaw-chart>
</div>

<script src="../rickshaw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="../vendor/d3.v3.js"></script>
<script src="../vendor/angular.js"></script>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->

<script>

// set up our data series with 50 random data points

var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}

// instantiate our graph!

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
series: [
{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}
]
} );

graph.render();
<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>

var legend = document.querySelector('#legend');

var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {

render: function(args) {

legend.innerHTML = args.formattedXValue;

args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {

var line = document.createElement('div');
line.className = 'line';

var swatch = document.createElement('div');
swatch.className = 'swatch';
swatch.style.backgroundColor = d.series.color;

var label = document.createElement('div');
label.className = 'label';
label.innerHTML = d.name + ": " + d.formattedYValue;

line.appendChild(swatch);
line.appendChild(label);

legend.appendChild(line);

var dot = document.createElement('div');
dot.className = 'dot';
dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
dot.style.borderColor = d.series.color;

this.element.appendChild(dot);

dot.className = 'dot active';

this.show();
<script>
angular.module('d3chartsApp', [])
.config(function() {});
</script>

}, this );
}
});
<script>
angular.module('d3chartsApp')
.controller('MainCtrl', function($scope) {
$scope.renderers = [
'line',
'bar',
'scatterplot',
'area'
];
$scope.renderer = 'line';

// set up our data series with 50 random data points
var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}

var hover = new Hover( { graph: graph } );
$scope.chartData1 = [{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}];
});
</script>

<script>
angular.module('d3chartsApp')
.directive('rickshawChart', function() {
// for more info on how to customize a link function
// for a d3 render see also https://github.com/3DGenomes/angular-d3js
var link = function postLink(scope, element, attrs) {
var component = element[0].parentNode;

scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if (phase === '$apply' || phase === '$digest') {
if (fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};

var graph = new Rickshaw.Graph({
element: element[0],
width: component.clientWidth,
height: parseInt(attrs.height, 10) || 400,
series: scope.data,
renderer: scope.renderer
});

var yAxis = new Rickshaw.Graph.Axis.Y({ graph: graph });
var xAxis = new Rickshaw.Graph.Axis.Time({ graph: graph });
var hover = new Rickshaw.Graph.HoverDetail({ graph: graph });

scope.render = function() {
scope.safeApply(function() {
graph.width = component.clientWidth;
graph.setRenderer(scope.renderer);
graph.series = scope.data;
yAxis.render();
xAxis.render();
graph.render();
});
};

scope.$watchCollection('[data, renderer]', function(newVal) {
if (newVal[0] && scope.data === newVal[0]) {
scope.data = newVal[0];
}
if (newVal[1] && scope.renderer === newVal[1]) {
scope.renderer = newVal[1];
}
scope.render();
});
};

return {
scope: {
data: '=',
renderer: '='
},
template: '',
restrict: 'E',
link: link
};
});
</script>
</body>
</html>

0 comments on commit 7190da9

Please sign in to comment.