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/some_percentage.json', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    var clicker = function() {
        window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
    };

    var markers = [{
        'date': new Date('2014-02-01T00:00:00.000Z'),
        'label': "Click me",
        'click': clicker
    }, {
        'date': new Date('2014-03-15T00:00:00.000Z'),
        'label': "Nothing to see here"
    }];

    MG.data_graphic({
        title: "Clickable Markers",
        description: "You can assign arbitrary functions to markers' click events.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        markers: markers,
        format: 'percentage',
        target: '#markers-clickable'
    });
});

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 mouseover = function() {
        alert("You are over me!");
    };

    var markers = [{
        'date': new Date('2014-02-01T00:00:00.000Z'),
        'label': "Place your mouse here",
        'mouseover': mouseover
    }, {
        'date': new Date('2014-03-15T00:00:00.000Z'),
        'label': "Nothing to see here"
    }];

    MG.data_graphic({
        title: "Mouse Over Markers",
        description: "You can assign arbitrary functions to markers' mouseover events.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        markers: markers,
        format: 'percentage',
        target: '#markers-mouseover'
    });

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 mouseout = function() {
        alert("You just left me!");
    };

    var markers = [{
        'date': new Date('2014-02-01T00:00:00.000Z'),
        'label': "Place your mouse here and out!",
        'mouseout': mouseout
    }, {
        'date': new Date('2014-03-15T00:00:00.000Z'),
        'label': "Nothing to see here"
    }];

    MG.data_graphic({
        title: "Mouse Out Markers",
        description: "You can assign arbitrary functions to markers' mouseout events.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        markers: markers,
        format: 'percentage',
        target: '#markers-mouseout'
    });

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 mg-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'
    });
});