Use of jquery plugin Flot

Features: Easy to use, good interactive effect, support dynamic display

Use: 1.view<div id= "Flot" ></div>2.jsvar dataSet = [];//places where graphical objects are stored

var obj1 = {label"Obj1", Color:"#00FFFF", data:d atas, linesshow}};

Data: Is what you want to show the graph object, support JSON format

Dataset.push (Obj1,...);

varOptions= {//Chart presentation style
    Grid: {
        BackgroundColor: "#000000",
Tickcolor: "#008040",
Hoverable: True
Clickable: True
    },
YAxis: { Min: 0},
Xaxis: { Mode: ' Time ',
Ticksize: [5, "Minute"],
TimeFormat: "%h:%m%p",//format string to use
Min: currenttime-3600000,//1 Hour
Max: CurrentTime,
TimeZone: "Browser",
Twelvehourclock: True//or time in time mode
    },
Series: {
        Lines: {
            LineWidth: 1,
Fill: True
FillColor: {
                Colors: [
{
                        Opacity: 0.4
                    },
                    {
                        Opacity: 0
                    }
]
},
Steps: False
        }
}
};

Chart initialization

$ (document). Ready (function () {

     $.plot ($ (' #flot '), dataset,options);

});

Displays the node data information when the mouse is moved to the graph data node

VarPreviouspoint =Null
$("#flot").Bind("Plothover",
function(Event,POS,Item) {
        If(item) {
            If(Previouspoint! = Item. )Dataindex) {
Previouspoint = Item.Dataindex;

                $("#tooltip").Remove();
VarItem_series_label = Item.Series.Label;
Varx = Item.Datapoint[0].ToFixed(2),
                    y = Item.Datapoint[1].ToFixed(2);
Varx_date =NewDate (number (x));
Showtooltip(
Item.PageX,
                    Item.Pagey,
"Item:"+ Item_series_label +"</br>value:"+ y + item_p
+ "</br>time:"+ x_date.toLocaleString()
);
            }
}Else{
$("#tooltip").Remove();
            Previouspoint =Null
        }
}
);

Show coordinate follow
function Showtooltip(x,y,contents) {
$(' <div id= ' tooltip > '+ contents +' </div> ').Css( {
        Position: ' Absolute ',
Display: ' None ',
Top: Y +5,
Left: X +5,
Border: ' 1px solid #000 ',
Padding: ' 2px ',
' Background-color ': ' #fee ',
Opacity: 0.80
    }).AppendTo("Body").FadeIn(1);
}

Dynamic display

Encapsulate the chart, request data periodically and refresh the chart (the code is a bit ...). )

Use of jquery plugin Flot