d3.json('data/xnotdate.json', function(data) {
    MG.data_graphic({
        title: "Axis Labels",
        description: "A graphic where we're not plotting dates on the x-axis and where the axes include labels and the line animates on load. We've also enabled extended ticks along the y-axis.",
        data: data,
        animate_on_load: true,
        area: false,
        width: 600,
        height: 240,
        right: 40,
        left: 80,
        bottom: 50,
        y_extended_ticks: true,
        target: '#xnotdate',
        x_accessor: 'males',
        y_accessor: 'females',
        x_label: 'males',
        y_label: 'females',
    });
});
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: "Some Percentages",
        description: "Here is an example that shows percentages.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        format: 'percentage',
        target: '#percentage'
    });
});
d3.json('data/some_currency.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Some Currency",
        description: "Here is an example that uses custom units for currency.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#currency',
        yax_units: '$'
    });
});
d3.json('data/log.json', function(data) {
    data = [data];
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    MG.data_graphic({
        title: "Log Scale",
        description: "You can change the y-axis' scale to logarithmic by setting y_scale_type to log.",
        data: data,
        y_scale_type: 'log',
        width: 600,
        height: 200,
        right: 40,
        target: '#log1'
    });
});
d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "No X Axis",
        description: "You can hide either axis by setting x_axis or y_axis to false.",
        data: data,
        decimals: 0,
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#hidden1',
        area: false,
        x_axis: false,
        small_text: true
    });
});

d3.json('data/brief-1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "No Y Axis",
        description: "You can hide either axis by setting x_axis or y_axis to false.",
        data: data,
        decimals: 0,
        width: 600,
        height: 200,
        right: 20,
        xax_count: 4,
        target: '#hidden2',
        area: false,
        small_text: true,
        y_axis: false
    });
});
d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Rug Plots",
        description: "You can set rug plots either axis by setting x_rug or y_rug to true.",
        data: data,
        decimals: 0,
        width: 600,
        height: 200,
        right: 40,
        target: '#y_rug',
        area: false,
        y_rug: true
    });
});
d3.json('data/neg1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Negative Values 1",
        description: "MG defaults to 0 on the y-axis as min if there are no negative numbers. If there are negatives, should provide some buffer below.",
        data: data,
        width: 295,
        height: 150,
        right: 10,
        target: '#neg1'
    });

    var data2 = MG.clone(data).map(function(d) {
        d.value = d.value + 550;
        return d;
    });

    MG.data_graphic({
        title: "Y-Axis Not Zero",
        data: data2,
        width: 295,
        height: 150,
        right: 10,
        min_y_from_data: true,
        yax_units: '$',
        target: '#y-axis-not-zero',
        x_accessor: 'date',
        y_accessor: 'value'
    });
});

d3.json('data/neg2.json', function(data) {
    MG.data_graphic({
        title: "Negative Values 2",
        data: data,
        width: 295,
        height: 150,
        right: 10,
        xax_format: function(f) {
            var pf = d3.formatPrefix(f);
            return Math.round(pf.scale(f)) + pf.symbol;
        },
        target: '#neg2',
        x_accessor: 'subject',
        y_accessor: 'measure'
    });
});