d3.json('data/some_percentage.json', function(data) {
for (var i = 0; i < data.length; i++) {
data[i] = MG.convert.date(data[i], 'date');
}
var markers = [{
'date': new Date('2014-02-01T00:00:00.000Z'),
'label': '1st Milestone'
}, {
'date': new Date('2014-03-15T00:00:00.000Z'),
'label': '2nd Milestone'
}];
MG.data_graphic({
title: "Markers",
description: "Markers are vertical lines that can be added at arbitrary points. Markers that are close to each other won't collide.",
data: data,
width: 600,
height: 200,
right: 40,
markers: markers,
format: 'percentage',
target: '#markers'
});
});
d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Baselines",
description: "Baselines are horizontal lines that can added at arbitrary points.",
data: data,
baselines: [{value: 160000000, label: 'a baseline'}],
width: 600,
height: 200,
right: 40,
target: '#baselines'
});
});
d3.json('data/fake_users1.json', function(data) {
data = MG.convert.date(data, 'date');
var markers = [{
'date': new Date('2014-03-17T00:00:00.000Z'),
'label': 'Look, a spike!'
}];
MG.data_graphic({
title: "Annotating a Point",
description: "By setting the graphic's target a class name of main-area-solid, markers don't extend down to the bottom of the graphic, which better draws attention to, say, spikes.",
data: data,
width: 600,
height: 200,
right: 40,
markers: markers,
target: '#spike'
});
});