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

    MG.data_graphic({
        title: "Multi-Line Chart",
        description: "This line chart contains multiple lines.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#fake_users2',
        legend: ['Line 1','Line 2','Line 3'],
        legend_target: '.legend'
    });
});

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

    MG.data_graphic({
        title: "Broken Multi-Lines",
        description: 'Setting missing_is_hidden works with multiple lines too.',
        data: data,
        width: 600,
        height: 200,
        right: 40,
        missing_is_hidden: true,
        target: '#missing_is_hidden_multi',
        show_secondary_x_label: false
    });
});

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

    MG.data_graphic({
        title: "Multi-Line Linked",
        description: "Demoing linked multi-line charts.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#linked_multi1',
        linked: true
    });
})

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

    MG.data_graphic({
        title: "Multi-Line Linked 2",
        description: "Demoing linked multi-line charts.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#linked_multi2',
        linked: true
    });
});

d3.json('data/fake_users3.json', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }
    // set this to an empty array.
    // data[0] and data[2] both still arrays of objects.
    data[1] = [];

    MG.data_graphic({
        title: "Missing Time Series Don't Get Drawn",
        description: "We set the second array to [] instead of the loaded data. The line color order is preserved.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#missing-multi'
    });
});
});

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

    data[1][data[1].length-1].value = 50000000;
    data[2][data[2].length-1] = MG.clone(data[1][data[1].length-1]);
    data[2][data[2].length-1].value += 10000000;

    MG.data_graphic({
        title: "Labeling Lines",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        legend: ['US', 'CA', 'DE'],
        target: '#multi-labelled'
    });
});

d3.json('data/fake_users2.json', function(data){
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    };
    MG.data_graphic({
        title: "Custom Line Coloring",
        description: "By passing in an array of hex / rgb / rgba / html strings, you can specify the colors of the lines. NOTE: this feature may have an API change before it is fully in Metrics Graphics. Use at your own risk.",
        data: [data[0], data[1], data[2]],
        width: 600,
        height: 200,
        right: 40,
        target: '#custom-colors',
        legend: ['Team A','Team B','Team C'],
        legend_target: 'div#custom-color-key',
        colors: ['blue', 'rgb(255,100,43)', '#CCCCFF'],
        aggregate_rollover: true
    });
})

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

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

    MG.data_graphic({
        title: "Select lines of your multi-line chart having areas",
        description: "By passing in an array of booleans in 'area' property, you can choose which lines has an area or not.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: '#multiline_area_select',
        area: [false, true, false],
        y_extended_ticks: true,
        x_accessor: 'date'
    });
});