d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Line Chart",
        description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('fake_users1'),
        x_accessor: 'date',
        y_accessor: 'value'
    });
});

d3.json('data/confidence_band.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Confidence Band",
        description: "This is an example of a graphic with a confidence band and extended x-axis ticks enabled.",
        data: data,
        format: 'percentage',
        width: 600,
        height: 200,
        right: 40,
        area: false,
        target: '#confidence_band',
        show_secondary_x_label: false,
        show_confidence_band: ['l', 'u'],
        x_extended_ticks: true
    });
});

d3.json('data/small-range.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Small Range of Integers",
        description: "When we have a data object of integers and a small range of values, the auto-generated set of y-axis ticks are filtered so that we don't include fractional values.",
        data: data,
        interpolate: d3.curveLinear,
        width: 600,
        height: 200,
        right: 40,
        target: '#small-range'
    });
});

d3.json('data/brief-1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Linked Graphic",
        description: "The two graphics in this section are linked together. A rollover in one causes a rollover in the other.",
        data: data,
        linked: true,
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#briefing-1'
    });
});

d3.json('data/brief-2.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Other Linked Graphic",
        description: "Roll over and watch as the graphic to the left triggers.",
        data: data,
        area: false,
        linked: true,
        width: 600,
        height: 200,
        right: 40,
        xax_count: 4,
        target: '#briefing-2'
    });
});

MG.data_graphic({
    title: "Singleton",
    description: "Handling a solitary data point.",
    data: [{'date': new Date('2015-03-05T21:00:00Z'), 'value': 12000}],
    width: 600,
    height: 200,
    right: 40,
    target: '#singleton'
});

d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Changing Single Line Color",
        description: "For single line charts, there are two simple ways to change a line color. The first is to change the css (described on the wiki). The other is to specify a color value using color: string or colors: string.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        color: '#8C001A',
        target: 'div#custom-color',
        x_accessor: 'date',
        y_accessor: 'value'
    });
});

d3.json('data/fake_users1.json', function(data) {

    var max = d3.max(data, function (d) {
        return d.value;
    });
    var min = d3.min(data, function(d) {
        return d.value;
    });

    var offsetForNegativeValues = ((max - min) / 1.75);

    for (var i = 0; i < data.length; i++) {
        data[i].value = (data[i].value - offsetForNegativeValues) / 1000000;
    }

    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Flipped area under Y value baseline",
        description: "This is a line chart having a flipped area under a Y value baseline",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        area: true,
        flip_area_under_y_value: 0,
        target: document.getElementById('area_flipped_users_gain_loss'),
        x_accessor: 'date',
        y_accessor: 'value'
    });
});