gistfile1.js

// jslint configuration
/*jslint browser: true */
/*global $, window */

var console = console || {
  log:function() {},
  warn: function() {},
  dir: function() {},
  error: function() {}
};

var setPlaceholderTop;
var setPlaceholderControl;

var options = {
    xaxis: {
        position: "top"
    },
    grid: {
        clickable: true,
        borderWidth: 1
    },
    legend: {
        show: true,
        noColumns: 4,
        container: $("#placeholder_top_legend"),
        labelFormatter: function(label, series) {
            var cb = label;
            return cb;
        }
    }
};


function setFlotSeries(url) {
    var data;
    $.ajax({
        type: "POST",
        url: url,
        dataType: 'json',
        success: function(data) {
            // Fetch data and feed to the setPlaceholder functions.
            setPlaceholderTop(data.basecase_data, data.result_data);
            setPlaceholderControl(data.measure_control_data);
            console.log(data);
        },
        error: function(data) {
            console.log("No data from " + url);
        }
    });
}

function refreshGraph(url) {
    var data;
    $.ajax({
        type: "POST",
        url: url,
        dataType: 'json',
        success: function(data) {
            
            pl_lines.setData([data.basecase_data, data.result_data]);
            pl_lines.setupGrid();
            pl_lines.draw();
        },
        error: function(data) {
            console.log("No data from " + url);
        }
    });
}
    

function setPlaceholderTop(basecase_data, result_data) {
    var d1, d2, d3, d4, d5, area_labels, options, ed_data, pl, x_min, x_max, y_min, y_max;

    options = {
        xaxis: {
            position: "top"
        },
        grid: {
            clickable: true,
            borderWidth: 1
        },
        legend: {
            show: true,
            noColumns: 4,
            container: $("#placeholder_top_legend"),
            labelFormatter: function(label, series) {
                var cb = label;
                return cb;
            }
        }
    };
    
    ed_data = [
    {
        data: basecase_data,
        points: {
            show: true,
            symbol: "diamond"
        },
        lines: {
            show: true
        },
        color: "blue"
    },
    {
        label: "Serie 1",
        data: result_data,
        points: {
            show: true,
            symbol: "triangle",
            radius: 1
        },
        lines: {
            show: true,
            lineWidth: 2
        },
        color: "red"
    }
    ];


    pl_lines = $.plot($("#placeholder_top"), ed_data, options);
}

function setPlaceholderControl(control_data) {

    var d1, d2, d3, d4, d5, area_labels, options, options2, ed_data, pl, x_min, x_max, y_min, y_max;
    options = {
        xaxis: {
            position: "bottom"
        },
        grid: {
            clickable: true,
            borderWidth: 1
        },
        legend: {
            show: true,
            noColumns: 4,
            container: $("#placeholder_control_legend"),
            labelFormatter: function(label, series) {
                var cb = label;
                return cb;
            }
        }
    };
    measures_controls = [
    {
        label: "Serie 2",
        data: control_data,
        points: {
            show: true,
            symbol: "square",
            radius: 2
        },
        lines: {
            show: false
        },
        color: "red"
    },
    {
        label: "Serie 3",
        data: d4,
        points: {
            show: true,
            symbol: "triangle",
            radius: 1
        },
        lines: {
            show: false
        },
        color: "green"
    },
    {
        data: d5,
        points: {
            show: false
        },
        lines: {
            show: true,
            lineWidth: 1,
            radius: 1
        },
        color: "gray",
        shadowSize: 0
    }
    ];

    pl_control = $.plot($("#placeholder_control"), measures_controls, options);

    $("#placeholder_control").bind("plotclick",
    function(event, pos, item) {
        if (item) {
            pl_lines.unhighlight(item.series, item.datapoint);
            result_id = item.series.data[item.dataIndex][2].id;
            refreshGraph(FLOT_URL + "&selected_measure_id=" + result_id);
        }
    });
}


function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 35,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        backgroundcolor: '#fee'
    }).appendTo("body").fadeIn(200);
}


$(document).ready(function() {
    setFlotSeries(FLOT_URL);
});

This is the graph styled the way I intend:

But this is how it gets reset everytime I click on a point in the lower graph (which is the 'interaction pane', so to speak):