Flotr2
Graphs and Charts for Canvas in JavaScript.
flotr2 flotr2 html5 and canvas graphing library examples page.
When I change the color for a line in a graph, the legend does not update with the same color. It stays the same as default color. Is there something I need to do to update the color in the legend to display the same color as the graph?
Both the code and the jsfiddle is the same example.
http://jsfiddle.net/ye0ny57j/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flotr2 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flotr2.min.js"></script>
</head>
<body>
<div id="container" style="width:840px;height:400px"></div>
<script>
var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
var container = document.getElementById('container');
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ {"label" : "d1","lines" : {"lineWidth" : "1", "color" : "#f00"}, "data" : d1},{"label" : "d2", "data" : d2} ], {
title: "Flotr2 test",
subtitle: "Subtitle",
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
},
legend: {
position: 'ne'
}
});
</script>
Source: (StackOverflow)
I'm using Flotr2 and I want to be able to show the total for the points on a line in a chart by hovering over the colour-filled area for the line.
I have the chart drawing and showing the total monthly repayments for a loan and the interest paid per month is graphed as a filled line below this. Hovering on the line at any point will show the interest paid for that month. I want to show the total interest paid over the life of the loan when a user hovers over the filled area of the line. Is this possible?
If this is possible is it possible to do the same for principal ( total - interest ) for the area between the total amount and the interest paid?
Source: (StackOverflow)
How to draw vertical line with Flotr2?
Like this:
Imgur
Sorry, i don't have enough reputation.... :(
This is my code: (JavaScript)
var graphBar = {
data: [1419910644, 0],
color: '#ffbc66',
lines: {
lineWidth: 1,
},
mouse: {
track: false,
}
};
setInterval(function(){
drawGraph();
}, 1000);
function drawGraph(){
padded = adjustRange();
console.log(lastJudge, nextJudge);
Flotr.draw($('#graph').get(0), [graphData, graphBar], {
color: '#ccc',
shadowSize: 0,
xaxis: {
minorTickFreq: 4,
mode: 'time',
timeMode: 'local',
timeUnit: 'second',
min: lastJudge,
max: nextJudge
},
yaxis: {
min: padded.paddedMin,
max: padded.paddedMax
}
});
}
(graphData is for a line chart)
Thanks.
Source: (StackOverflow)
Long time reader, first time posting a question.
Problem: My bar chart using flotr2 is not loading in Firefox or Chrome (IE is off the table at the moment).
This test page is based on the first example in "Data Visualization with JavaScript" (No Starch). Yes, I'm stuck on Chapter 1 and need help.
The setup: I've downloaded the flotr2.min.js file from github and have it in the "js" folder in my working folder. I have outlined the div where the graph is supposed to be, and per book example I am using a window.onload to start the function.
Can someone please help me figure out why the heck this isn't working? Thanks!
<html>
<head>
<title>Flotr2 Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div[id=chart] {
border:1px solid blue;
}
</style>
</head>
<body>
<div id="chart" style="width:600px;height:300px;"></div>
<script language="javascript" type="text/javascript" src="js/flotr2.min.js"></script>
<script type="text/javascript">
var wins=[[[2006,13],[2007,11],[2008,15],[2009,15],[2010,18],[2011,21], [2012,28]]];
window.onload=function() {
Flotr.draw(
document.getElementById("chart"), wins, {
title: "Manchester City Wins",
colors: ["#89AFD2"],
bars:{
show:true,
barWidth:0.5,
shadowSize:0,
fillOpacity:1,
lineWidth:0
},
yaxis:{
min:0,tickDecimals:0
},
xaxis:{
ticks:years
},
grid:{
horizontalLines:false,verticalLines:false
}
}
)
};
</script>
</body>
</html>
Source: (StackOverflow)
I am using Flotr2 with great success. Now we implemented it, with the time mode. Which works like a charm. But now the client wants to show only the quarters (ie 20013-1, 2013-2).
Now Flotr2, auto scales the data to fit the graph. But because no quarter is the same size this fails.
So my question is, is it possible to add quarters in Flotr2 (on the x axis). And if so, is there an example some where in the universe that i did not find?
Source: (StackOverflow)
Hi I'm coding a website that displays a chart using flotr2, I want it to print the graph in realtime each 30 seconds and showing the timestamp in the XAxis.
Currently I'm getting the data from a third party API with the following format:
{
"timestamp": "Thu, 19 Dec 2013 07:14:39 -0000",
"value": 50
}
The Y axis shows the "value" and the X axis should print the timestamp value each time I update the chart.
Any idea how could I get this working propperly?
Regards.
Source: (StackOverflow)
I try to plot a histogram showing the number of events within different months (or other quantities of time). I have some ugly-as-hell code at http://jsfiddle.net/dbwjpvkm/4/ that I would like to replace or improve somehow.
I calculate the bins myself:
function bucketIdFor(marker) {
return marker.date; // really: extract date Object and put in a bin
}
function calculateTimeBuckets(markers) {
// dict with: BucketnameId => Marker[]
var buckets = {};
markers.forEach(function (marker) {
var myBucket = bucketIdFor(marker);
if (!(myBucket in buckets)) {
buckets[myBucket] = [];
}
buckets[myBucket].push(marker);
});
console.log("returning "); console.log(buckets);
return buckets;
}
and then plot more-or-less basic bar plots with a custom tickFormatter
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 30
},
tickFormatter: function (x) {
if (isNaN(x)) {
return "";
} else {
var xx = parseInt(x * 10000000, 10);
var myDate = new Date(xx);
return myDate.getFullYear().toString() + "-" + myDate.getMonth().toString() + "-" + myDate.getDay().toString();
}
}
In http://www.humblesoftware.com/flotr2/index#!basic-time I saw that there is something like mode : 'time', but I could not get it to work with bar charts, only with line charts.
- So how do use time mode with bar charts in flotr2?
- Is there some option that flotr2 also calculates the bins for me?
Source: (StackOverflow)
I just got a book called Data Visualization With Javascript by Stephen A. Thomas, and I'm working through the exercises. The first chapter is on Flotr2. Here is what the book told me to do:
var wins = [[[0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28]]];
var wins2 = [[[0,28], [1,28], [2, 21], [3,20], [4,19]]];
var years = [[0, "2006"], [1, "2007"], [2, "2008"], [3, "2009"], [4, "2010"], [5, "2011"], [6, "2012"]];
var teams = [[0, "MCI"], [1, "MUN"], [2, "ARS"], [3, "TOT"], [4, "NEW"]];
window.addEventListener('load', function() {
Flotr.draw(document.getElementById('chart2'), wins2, {
title: "Premier League Wins (2011-2012)",
colors: ['#89afd2', '#1d1d1d', '#df021d', '#0e204b', '#e67840'],
bars: {
show: true,
barWidth: 0.5,
shadowSize: 0,
fillOpacity: 1,
lineWidth: 0
},
yaxis: {
min: 0,
tickDecimals: 0
},
xaxis: {
ticks: teams
},
grid: {
horizontalLines: false,
verticalLines: false
}
});
});
Now the only difference between this and what was in the book is that the book told me to do window.onload, and I used addEventListener instead. The book says that this should make a bar graph with multiple colors (the colors listed) but all my bars are the same color, which is the first color listed. I've tried everything, but nothing seems to make it work. Has anyone else encountered this problem with Flotr2? I'm using the latest version, so is it just a problem with Flotr2 that's new since the book came out? Or am I doing something wrong?
Source: (StackOverflow)
I've merged positive and negative data to one data set called yAxis (multiple columns for both positive and negative). Here's the code:
//...
var yAxis = [wololoTotalValues];
var xAxis = wololoTotalKeys;
window.onload = function () {
Flotr.draw(document.getElementById("chart"), yAxis, {
title: "wololo",
bars: {
show: true,
barWidth: 0.8
},
yaxis: {
min: 0,
max: wololoMaxValue + 10,
tickDecimals: 0
},
xaxis: {
ticks: xAxis
}
});
};
//...
<div id='chart' style="width:1200px;height:500px;"></div>
I would like 'bad' and 'ble' to be red. I found some manuals how to handle this problem with flot, but not flotr(flotr2).
Is there any way to make it somehow like below? Or maybe I must split the data like here?
colors: (yAxis[0-lastGood] : "#0000FF"), (yAxis[lastGood+1-lastBad] : "#FF0000")
Source: (StackOverflow)
I am trying to reproduce an introductory example from the book Data Visualization with JavaScript by Stephen A. Thomas (No Starch Press, 2015)
JSFIDDLE.
Here is the code:
HTML
<div id="chart" style="width:600px;height:300px;"></div>
JS
var wins = [[
[2006, 13],
[2007, 11],
[2008, 15],
[2009, 15],
[2010, 18],
[2011, 21],
[2012, 28]
]];
var years = [
[0, "2006"],
[1, "2007"],
[2, "2008"],
[3, "2009"],
[4, "2010"],
[5, "2011"],
[6, "2012"]
]
Flotr.draw(document.getElementById("chart"), wins, {
bars: {
show: true,
barWidth: 0.5
},
yaxis: {
min: 0,
tickDecimals: 0
},
xaxis: {
ticks: years
}
});
The problem I am facing is that the label (years) are not showing for the xaxis.
What is causing the years data not to populate?
EDIT: The years are not showing in Firefox, and the screen is completely blank in Chrome.
Source: (StackOverflow)
I have several graphs, and when I hover over dots I make use of "trackformatter" function to display data. Problem is that the z-index of the tooltip is to low, so it appears behind other graphs. And I can't seem to find the css class of it so that I can set its z-index to a high number. Does anyone of you guys know what class this tooltip is making use of in the graph library flotr2?
trackFormatter: function(obj) {
var test = ResultPresenter.getTooltip(data, result, "test");
return test;//What css class is used here?
},
http://humblesoftware.com/flotr2/index#!mouse-drag
Source: (StackOverflow)
I have a flotr2 graph that is supposed to display some data in it:
Edit: Chrome users: Please note, this jsfiddle does not seem to work me in chrome, not sure why
http://jsfiddle.net/1jgb2k6r/7/
My problem is that my bars aren't center-aligned over the date they represent.
$(function () {
(function color_gradients(container) {
var myData = [];
myData.push([new Date('1/1/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/8/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/15/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/22/2014').getTime(), Math.ceil(Math.random() * 10)]);
var
bars = {
data: myData,
bars: {
show: true,
barWidth: 0.8,
lineWidth: 20,
}
};
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
mode: 'time',
timeMode: 'local',
min: (new Date('1/1/2014').getTime() - (7 * 24 * 60 * 60 * 1000)),
max: (new Date('1/22/2014').getTime() + (7 * 24 * 60 * 60 * 1000))
}
});
})(document.getElementById("editor-render-0"));
});
Is there a way in flot to realign these bars?
Source: (StackOverflow)
I am plotting a point graph and the graph should get update with new data for every 5 secs. Here min and max range are always fixed
Currently, when I get new data from server, I do merge the new data to the existing source.data and plotting the complete graph.
So, I dont want to redraw the complete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw complete data, can I add only the new data to the existing graph
Please find the source code here
var source = [
{
data: [],
show: true,
label: "Constellation",
name: "Constellation",
color: "#0000FF",
points: {
show: true,
radius: 2,
fillColor: '#0000FF'
},
lines: {
show: false
}
}
]
var options = {...}
$.getJSON(URL , function(data) {
...
$.merge(source[0].data, new_data);
plotObj = $.plot("#placeholder", source, options);
}
Source: (StackOverflow)
I'm trying to create a chart page that updates every 5 seconds based on flotr2. But I'm having some problems with the return from the server, I get
[object, Object],[object, Object],[object, Object],[object, Object],[object, Object],[object, Object],[object, Object]
The javascript looks like:
function updateFunc() {
new Ajax.Request('http://localhost:53083/Home/Data', {
method: 'get',
onSuccess: function (transport) {
var json = transport.responseText.evalJSON();
alert(json);
}
});
}
updateFunc();
And the asp.net/c# looks like:
//
// GET: /Home/Data
public string Data()
{
dt.Rows.RemoveAt(0);
dt.Rows.Add(rand.Next(1, 50));
return JsonConvert.SerializeObject(dt);
}
dt is just a static datatable where i remove the first and add a new, creating a feel of continuous update.
What is wrong? As posted all i get is the [object, Object] from the alert.
Source: (StackOverflow)
Is it possible to change the fill color of a point (linear graph) in Flotr2 ?
my code:
<script>
/* globals*/
var lineColor = '#717171';
var baseLineColor = '#a3d06e';
var titleText = []; /* [title1, title2,...] */
var xticks = []; /* [ [0.9, ""], [1, "strValue1"], ..., [n, strValueN], [n+0.1, ""] ] */
var title = document.getElementById('title');
var data = [ /* the chart data */
[1, 2],
[2, 3],
[3, 3],
[4, 4],
[5, 5],
[6, 5],
[7, 5],
[8, 2],
[9, 3],
[10, 3],
[11, 4],
[12, 5],
[13, 5],
[14, 5],
[15, 5],
[16, 2],
[17, 3],
[18, 3],
[19, 4],
[20, 5],
[21, 5],
[22, 5],
[23, 2],
[24, 3],
[25, 3],
[26, 4],
[27, 5],
[28, 5],
[29, 5],
[30, 5],
];
var container = document.getElementById('chart');
/*Test - remove for real data*/
for(var i=1; i<31; i++){
xticks.push([i, ("label " + i)]);
titleText[i] = "Title " + i;
}
/* chart options */
var personal = { data : data, /* @data@ */
lines : { show : true, fill : false, color: lineColor, lineWidth: 4},
points : { show : true, color: lineColor, radius: 20, fillColor:'#ff0000'}
};
var baseline = { data: [[-50,3],[50,3]],
mouse: {track: false},
lines : { show : true, fill : false, color: baseLineColor, lineWidth: 4}
}
setTimeout(setDimentions, 300);
function setDimentions(){
var w = window.innerWidth * 0.8;
var h = window.innerWidth * 0.45;
container.style.width = w + "px";
container.style.height = h + "px";
drawChart();
}
function drawChart(){
var f = Flotr.draw(container, [baseline, personal],
{
resolution: 2, HtmlText: true,
xaxis : { ticks: xticks /* @xticks@ */, tickDecimals: true, min:0.8, max: (data.length+0.2)/*@xmax@*/ },
yaxis : { ticks: [1,2,3,4,5], tickDecimals: true, min:0.9, max: 5.1 },
mouse : { track : true, sensibility: 10, trackFormatter: showTitle}
});
}
function showTitle(point){
title.innerHTML = titleText[parseInt(point.x)];
}
Source: (StackOverflow)