flot
Attractive JavaScript charts for jQuery
Flot: Attractive JavaScript plotting for jQuery
I am new to Angular and Flot, but am experienced with Jquery and Javascript. I am a bit confused about how to go about binding a Flot chart to Angular data models, since Flot is a JQuery plugin. I've searched around, but haven't been able to find an example.
I would also be happy to use highcharts, google-charts, or any other charting solution.
Source: (StackOverflow)
Does anyone know how one can set the label or title of an axis in Flot?
I've read the API but it doesn't seem to have that feature...
Thanks :)
Source: (StackOverflow)
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?
Source: (StackOverflow)
I'm trying to produce a line chart using Flot, but I want the data labels to show up on the chart - meaning, I want the value of each point to appear next to that point. I feel like this should be an option, but can't find it in the API. Am I just missing something, or does someone know a workaround?
Thanks in advance.
Source: (StackOverflow)
So 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?
Thanks,
Josh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Graph</title>
<link rel='nofollow' href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="lib/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="lib/canvas2image/base64.js"></script>
<script language="javascript" type="text/javascript" src="lib/canvas2image/canvas2image.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="lib/gChart/jquery.gchart.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.crosshair.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.navigate.js"></script>
<style>
</style>
</head>
<body>
<div id="placeholder" style="width:1000px;height:400px;"></div>
<div id="test" style="display: none; background: #ff0; padding: 5px; border: 1px solid #ddd; position: absolute;"></div>
<script type="text/javascript">
$(function () {
var options0 = {
xaxis: {mode: "time"},
legend: {position: "nw"},
lines: {show: true},
grid: {hoverable: true}};
var grid_data0 = [[new Date(1286172000 * 1000), 1219], [new Date(1286258400 * 1000), 1583], [new Date(1286344800 * 1000), 1566], [new Date(1286431200 * 1000), 2191], [new Date(1286517600 * 1000), 2471], [new Date(1286604000 * 1000), 3128], [new Date(1286690400 * 1000), 2713], [new Date(1286776800 * 1000), 2117], [new Date(1286863200 * 1000), 3174], [new Date(1286949600 * 1000), 3051], [new Date(1287036000 * 1000), 3582], [new Date(1287122400 * 1000), 3472], [new Date(1287208800 * 1000), 3928], [new Date(1287295200 * 1000), 3688], [new Date(1287381600 * 1000), 2547], [new Date(1287468000 * 1000), 1549], [new Date(1287554400 * 1000), 3008], [new Date(1287640800 * 1000), 2309], [new Date(1287727200 * 1000), 2973], [new Date(1287813600 * 1000), 3805], [new Date(1287900000 * 1000), 3643], [new Date(1287986400 * 1000), 2310], [new Date(1288072800 * 1000), 2323], [new Date(1288159200 * 1000), 2399], [new Date(1288245600 * 1000), 2305], [new Date(1288332000 * 1000), 2393], [new Date(1288418400 * 1000), 3212], [new Date(1288504800 * 1000), 3348], [new Date(1288591200 * 1000), 2391], [new Date(1288677600 * 1000), 2130], [new Date(1288764000 * 1000), 1896], [new Date(1288850400 * 1000), 1765], [new Date(1288936800 * 1000), 2191], [new Date(1289023200 * 1000), 3008], [new Date(1289109600 * 1000), 3085], [new Date(1289199600 * 1000), 2151], [new Date(1289286000 * 1000), 2011], [new Date(1289372400 * 1000), 2016], [new Date(1289458800 * 1000), 1914]];
var plot = $.plot($("#placeholder"), [{data: grid_data0}, ], options0);
});
$("#placeholder").mouseout(function(e){
$("#test").hide();
});
function test() {
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//img=document.createElement("img");
//Save
//img.src=oCanvas.toDataUrl();
//Restore
//oCanvas.drawImage(img, 0, 0);
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//document.write(document.getElementById('placeholder').toDataUrl());
Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//Canvas2Image.saveAsPNG(oCanvas, true);
}
</script>
<a onClick="JavaScript:test();">Click</a>
</body>
</html>
Source: (StackOverflow)
I can't figure out how to get flot.pie to change the pie slice color, just the series color. Is this possible?
Source: (StackOverflow)
I'm trying to understand the tooltip functionality of Flot but not really getting my head around it!
I am trying to achieve a tooltip that displays the label and value of each section of a stacked bar chart
Would someone be able to point my towards an example of this or provide code for doing so?
Source: (StackOverflow)
In Flot.js, bar graphs and line graphs have numbers as the coordinates in the x and y axis by default.
How can you make the coordinates such that the numbers are only integers or at least only the integers are visible?
Source: (StackOverflow)
Hi i am trying to retrieve data from mysql database to create flot graph
can anyone walk me through this procedure or give me an idea of what to do
thanks
Source: (StackOverflow)
Apologies, but I'm a newbie at Flot.
I'd like to display my data in a horizontal bar chart rather a vertical bar chart which Flot seems to default to.
Is it possible to do this in Flot, and, if so, how do I do it?
Source: (StackOverflow)
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?
Source: (StackOverflow)
I have a chart, that displays bars which represent rainfall in 24h. Now the first problem I had, was the default 1px width for bars in flot, see this example:
I searched for a solution and found that specifing barwidth like this:
bars: {
show: true,
barWidth : 60*60*1000 //1h
}
solves the problem. Now that actually works, but with one bad result. On my example (chart that displays 24 rainfall discretly every one hour) now this happens:
As you can see from first example, where bars are 1px width, the time goes from 13:00 previous day to 13:00 next day. Now when bar width are fixed, the time goes from 13:00 to 14:00 for some reason. Now I have tried diffrent barWidth setting, for example 50*60*1000, but that does not scale right plus the margin starts to appear beetwen each bars.
Now I would like to know how to fix this issue, that the timeline would go as in first example and the bars would have 1 hour width?
Source: (StackOverflow)
I am looking for a charts library to be displayed on a website. I will use intensively this library (for area, line and bar charts mainly), so I prefer to secure my choice before starting implementing.
The list of website chart libraries that I have initially considered are:
However after some researches on this forum and investigations on the web, I have reduced my candidate list to these two libraries:
- Flot jQuery plugin
- Google Visualization
Which one do you advise me to use and why (if you have worked with one or two of them, please tell me your feedback)?
How do they compare one to each other regarding ease of use, performance and features?
Thank you
EDIT: Based-Flash Chart libraries were not eligible with my constraints
Source: (StackOverflow)
I've created a series of plots using the flot library, which are all displayed on a single page. Is there a way to update the X axis min and max options (options.xaxis.min, options.axis.max) values WITHOUT re-plotting the plots ($.plot('placeholder',data,options))?
I found this solution: http://osdir.com/ml/flot-graphs/2012-02/msg00064.html
Which suggests that the following line would do it, but it does not work for me - the plots visible min and max are not modified based on this call.
monitorGraph.getOptions().xaxes[0].max = xaxis.max;
Any tips on updating the graphs xaxis max and min values would be greatly appreciated!
EDIT: Solution Below
The following code will take an existing plot, update the range that is visible, and redraw it in a very light and efficient way.
plot.getOptions().xaxes[0].min = time.start;
plot.getOptions().xaxes[0].max = time.end;
plot.setupGrid();
plot.draw();
Source: (StackOverflow)
I use jquery flot for my pie charts and I have a problem with overlapping
labels when the pie chart pieces are very small. Is there a good
solution for that?
My pie chart:
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 5/8,
formatter: function(label, series){
return '<div style="font-size:12pt;text- align:center;padding:2px;color:black;margin-left:-80%;margin- top:-20%;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: { opacity: 0.5 }
}
}
},
legend: {
show: false
}
Thanks, Arshavski Alexander.
Source: (StackOverflow)