jQuery chart | flot

Recently I have got a chance to implement chart for a reporting system.

I have chosen flot (http://code.google.com/p/flot/)

my problem statement was:

I have a impression count for creatives, which are under a campaign,
and wanted to show the legend as creative name and impression which a line draw of campaign.

I did a tweet while plotting:

var datasets_imp =
{
4 "campaign1": {"label":"campaign1","cr_name":{"1":"campaign1","2":"asdadsad","3":"asdadsad","4":"asdadsad","5":"asdadsad","6":"asdadsad","7":"asdadsad"},
"data":[[1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]]},
5 "campaign2": {"label":"campaign2","cr_name":{"1":"test ad 1","2":"creative08"},"data":[[1,"8175"],[2,"8314"]]},
6 "Sky andy": {"label":"Sky andy","cr_name":{"1":"Sky bogoff"},"data":[[1,0]]},
7 "creative09": {"label":"creative09","cr_name":{"1":"creative09"},"data":[[1,0]]},
8 "creative07": {"label":"creative07","cr_name":{"1":"creative07"},"data":[[1,0]]},
9 "campaign12": {"label":"campaign12","cr_name":{"1":"campaign12"},"data":[[1,0]]},
10
};

Here is the solution:

<script>

    var choiceContainer = $("#campaign_checkbox");
    choiceContainer.find("input").click(plotAccordingToChoices);
    var previousPoint = null;



    function plotAccordingToChoices(choice) {
        var data = [];
        var chart_id = "#placeholder_"+choice;
        var datasets = eval("datasets_"+choice);





        // hard-code color indices to prevent them from shifting as
        // countries are turned on/off
        var i = 0;
        $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
        });


        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($(chart_id), data, {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
        yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 },
               grid: { hoverable: true, clickable: true }
             });




    $(chart_id).bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                    $("#tooltip").remove();
                    var x = item.datapoint[0],
                        y = item.datapoint[1];

                    showTooltip(item.pageX, item.pageY,
                                item.series.cr_name[x] + " : " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
    });

    $(chart_id).bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });

    }



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


    plotAccordingToChoices('imp');
    plotAccordingToChoices('click');

});
<script>

--
Regards,
Pavan Agrawal