d3.json('data/float.json', function(data) {
    data = MG.convert.date(data, 'date');

    MG.data_graphic({
        title: "Changing Precision 1",
        description: "We can change the precision if the axis data type is a float. We can also change both the formatting, or hide the rollover text altogether. Here we set decimals: 3 to get three decimals in the rollover for percentages.",
        data: data,
        decimals: 3,
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#precision1'
    });

    MG.data_graphic({
        title: "Custom Rollover Text",
        description: "Here is an example of changing the rollover text. You could in theory actually update any DOM element with the data from that rollover - a title, for instance.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        mouseover: function(d, i) {
            // custom format the rollover text, show days
            var prefix = d3.formatPrefix(d.value);
            d3.select('#custom-rollover svg .mg-active-datapoint')
                .text('Day ' + (i + 1) + '   ' + prefix.scale(d.value).toFixed(2) + prefix.symbol);
        },
        target: '#custom-rollover'
    });
});

d3.json('data/some_percentage.json', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    MG.data_graphic({
        title: "Changing Precision 2",
        description: "Here we set decimals: 0 for percentages.",
        data: data,
        decimals: 0,
        format: 'percentage',
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#precision2'
    });

    MG.data_graphic({
        title: "... Or No Rollover Text",
        description: "By setting show_rollover_text: false, you can hide the default rollover text from even appearing. This, coupled with the custom callback, gives a lot of interesting options for controlling rollovers.",
        data: data,
        decimals: 0,
        show_rollover_text: false,
        format: 'percentage',
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#no-rollover-text'
    });
});
d3.json('data/fake_users2.json', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    var all_the_data = MG.clone(data[0]);
    for (i = 1; i < data.length; i++){
        for (var j = 0; j < data[i].length; j++){
            if (i === 2 && all_the_data[j].date < new Date('2014-02-01')) {
            } else {
                all_the_data[j]['value' + (i + 1)] = data[i][j].value;
            }
        }
    }

    MG.data_graphic({
        title: "Aggregated Rollover Information",
        description: "Aggregated information can be displayed with the aggregate_rollover option in order to clearly highlight the relationship between lines. Also handles non-contiguous data",
        data: all_the_data,
        width: 600,
        height: 200,
        right: 40,
        target: '#aggregate',
        y_extended_ticks: true,
        x_accessor: 'date',
        y_accessor: ['value', 'value2', 'value3'],
        aggregate_rollover: true
    });
});