flot | 易学教程

How to plot a date range on X-axis in Flot Charts?

阅读更多关于 How to plot a date range on X-axis in Flot Charts?

I'm using Flot charts to display data for a certain period (to be selected by the user, e.g. last 30 days, last 7 days, from 1st Jan 2013 to 3rd Mar 2013 etc) So I want to display a line chart with x-axis as the date. E.g. if I've two days, startDate and endDate how do I make the X-axis display something like: 1 Jan 2013 | 2 Jan 2013........................3 Mar 2013 My code is as follows: The data (currently it's static). var mydata = [ [1, 2.4], [2, 3.4 ], [3, 4.5 ], [4, 5 ], [5, 5], [6, 5], [7, 2 ], [8, 1 ], [9, 1.5 ], [10, 2.5 ], [11, 3.5], [12, 4 ], [13, 4 ], [14, 2.4], [15, 3.4 ], [16, 4

Pass null values to SVG path (using d3.js) to suppress missing data

阅读更多关于 Pass null values to SVG path (using d3.js) to suppress missing data

问题 Using jQuery Flot, I can pass a null value to the plotting mechanism so it just won't draw anything on the plot. See how the missing records are suppressed: I'm looking to move to d3js , so that I can have deeper low level control of the graphics using SVG. However, I have yet to find out how to do that same process of suppressing missing records. The image below is an attempt to do this, using a value of 0 instead of null (where the d3 package breaks down). Here is some code to give you an

flot - show time axis without gaps

阅读更多关于 flot - show time axis without gaps

问题 I'm trying to customize jQuery Flot to remove gaps between dots on time axis. Look at the top image: It shows the data for two days, and I bet you spot the night. What I want to do is to get rid of this annoying gap in the middle of the chart. Any suggestions how to do this? 回答1: Too bad I can't accept a comment as an answer, since the answer from George Roberts from Mark's link worked smoothly. So what I had to do is to change the mode of the flot from 'time' to null and then emulate a time

Flot With “String” x-axis

阅读更多关于 Flot With “String” x-axis

问题 When using flot I would like to have a string based x-axis. For example I have a list of customers "Bob", "Chris", "Joe" and would like to plot their revenue on the Y-Axis. (this is a bar graph) It seems at first glance flot only supports numeric types on the x-axis. Is this true? 回答1: @Matt is close, but it would make more sense to just use the ticks option to directly specify what ticks should have what labels: var options = { ... xaxis: { ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']] } ... };

Parsing JSON with special characters

阅读更多关于 Parsing JSON with special characters

问题 I am using flot to do some graphing and I am having some trouble passing the tickSize with my json. I am using MVC and pass the json in a model. Here is some code to grab the json within my javascript function: var json = '<%=Model.Json %>'; var data = jQuery.parseJSON(json); Here is how the Json looks leaving the controller: {\"GraphData\":[{\"X\":1333929600000,\"Y\":0.0},{\"X\":1333670400000,\"Y\":0.46}],\"Max\":1333324800000,\"Min\":1333929600000,\"TickSize\":\"[1, 'day']\"} The part that

Dynamic Flot graph - show hide series by clicking on legend text or box on graph

阅读更多关于 Dynamic Flot graph - show hide series by clicking on legend text or box on graph

I am working on dynamic flot graph with 3 series. My need is to hide/show series when clicked on legend. I have seen different examples that will work fine for static graphs but for dynamic graph, even it works first time but when graph is updated with new data values then everything is displaying with default options. once I hide the series, I want it to be hided until I click again to show it. Here's a quick example I put together for you. somePlot = null; togglePlot = function(seriesIdx) { var someData = somePlot.getData(); someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;

flot display the date in flot based on timestamp

阅读更多关于 flot display the date in flot based on timestamp

Does anyone know how to display the date in flot based on timestamp <script id="source" language="javascript" type="text/javascript"> $(function () { var d1 = [ [1262818800,100],[1262732400,100],[1262646000,100],[1262559600,100],[1262473200,100],[1262386800,100],[1262300400,100],[1262214000,100],[1262127600,100],[1262041200,100],[1261954800,100],[1261868400,100],[1261782000,100],[1261695600,100],[1261609200,100],[1261522800,95],[1261436400,110],[1261350000,110],[1261263600,110],[1261177200,100]; var d2 = [ [1262818800,23],[1262732400,23],[1262646000,23],[1262559600,23],[1262473200,23],

Refresh/Reload Flot In Javascript

阅读更多关于 Refresh/Reload Flot In Javascript

Hey Guys, does anyone know how to reload a flot graph in javascript? For instance, I want to redraw the graph every time an input value is changed. I tried experimenting with a few methods found in the flot API , such as draw() and setupGrid() without any luck. Here's some example code: $("#some_input_box").change(function(){ plot.draw(); // redraw graph }); You are on the right track with draw and setupGrid , here's what you need to do: var plot = $.plot($('#placeholder'),data,options); //time passes, you now want to replot var newData = [[0,2],[1,3],[2,5]]; plot.setData(newData); plot

jquery flot xaxis time

阅读更多关于 jquery flot xaxis time

In this example in xaxis will compare the days... $.plot($("#placeholder"), data, { yaxis: {}, xaxis: { mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true }); How I can print time? This is the result that I wanna: 22:00 23:00 00:00 01:00 02:00 ...... 23:00 00:00 01:00 02:00 .... 06:00 Is it possible? $.plot($("#placeholder"), data, { yaxis: { }, xaxis: { mode: "time",minTickSize: [1, "hour"], min: (new Date("2000/01/01")).getTime(), max: (new Date("2000/01/02")).getTime() }, "lines": {"show": "true"},

How to save a jQuery FLOT Graph to a .png or other image format?

阅读更多关于 How to save a jQuery FLOT Graph to a .png or other image format?

I'm using a plugin for Jquery called FLOT http://code.google.com/p/flot/ Once the graph is rendered I want the client to be able to save the graph to a file for later. Any idea on how this can be done without requiring the client to download some tool or image capture device? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Graph</title>