I have a flot chart with 5 series of data. Each series is one year with each split into months. The Y-Axis is cost and the X-axis months. Sometimes there is a user message within the data for a particular month(s) within any of the series. What I would like to do is show points on any particular series but only if the user message is not null, For example if June 2012 has a user message show a point for this month in that year only. Is this possible as at the moment I can only turn plot points on or off for each complete series, i.e 12 plot points.
Split your data into two seperate series.
The first is all the data with only lines showing.
The second has only those points with "userMsg" and has only points showing.
Set the color of the two series to the same color.
var myData = [{point: [1,Math.random() * 100], userMsg: "One"},
{point: [2,Math.random() * 100]},
{point: [3,Math.random() * 100], userMsg: "Three"},
{point: [4,Math.random() * 100], userMsg: "Four"},
{point: [5,Math.random() * 100]}];
var series1 = {data: $.map(myData, function(i){return [i.point];}),
points: {show: false},
lines: {show: true},
color: 'rgb(255, 100, 123)'};
var series2 = {data: $.map(myData, function(i){if (i.userMsg) return [i.point];}),
points: {show: true, radius: 8},
lines: {show: false},
color: 'rgb(255, 100, 123)'};
somePlot = $.plot($("#placeholder"), [ series1, series2 ], {});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:300px; height:300px"></div>
Related
I draw a line, then try to change it, leaving the same starting point with x1(left) and x1(top) and moving the endpoint by changing the line's width (x2-x1 - negative when moved left of originating point) and height (determined by y2-y1).
The line is drawn repeatedly with positive width value but 90% of the time it has gaps in the stroke as if the line is not fully stretched from border to border.
Below I define the line, it works well and connects my 2 points. Then, I modify the line when one of the flow objects is moved. When I move the bottom object to the right (positive width), it works fine, when I move to the left (negative width) the line does not reach its borders. The line has borders: true so I can see that the borders are lined up perfectly with the flow objects they are trying to connect (visible in the images).
//[startleft, starttop, endleft, endtop]
canvas.add(new fabric.Line(
[globalConnect[0], globalConnect[1], globalConnect[2], globalConnect[3]], {
stroke:'black',
strokeWidth:3,
lockScalingX:true,
lockScalingY:true,
lockRotation:true,
hasControls:true,
hasBorders:true,
lockMovementX:true,
lockMovementY:true
})
);
canvas.item(tempObjectIdx + 1).left = tempX1;
canvas.item(tempObjectIdx + 1).top = tempY1;
canvas.item(tempObjectIdx + 1).width = tempX2-tempX1;
canvas.item(tempObjectIdx + 1).height = tempY2-tempY1;
Example of the line when it's not fully drawn: screenshot
Example of what line looks like with positive width or negative width when it works fine: screenshot
Anybody having similar problems with negative widths when redrawing a line? Is there something to do with origination point - or recalculating coordinates, I do redraw canvas after setting these values - works great for positive value, but the line does not span the border box when width is negative (I have tried redrawing line from bottom origin with positive width and negative height - no better?)
If you just need the line to connect two points and update it whenever those two points are updated, you only have to set the line's x1,y1 and x2,y2 on each appropriate event. Here's an example where such line is updated when the boxes fire moving events:
const canvas = new fabric.Canvas('c')
const box1 = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'green'
})
const box2 = new fabric.Rect({
left: 250,
top: 250,
width: 100,
height: 100,
fill: 'red'
})
const box1point = box1.getPointByOrigin('center', 'bottom')
const box2point = box2.getPointByOrigin('center', 'top')
const connector = new fabric.Line(
[box1point.x, box1point.y, box2point.x, box2point.y],
{
stroke: "black",
strokeWidth: 3,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: true,
hasBorders: true,
lockMovementX: true,
lockMovementY: true
}
)
box1.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'bottom')
connector.set({
x1: connectPoint.x,
y1: connectPoint.y
})
})
box2.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'top')
connector.set({
x2: connectPoint.x,
y2: connectPoint.y
})
})
canvas.add(box1, box2, connector)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>
I created Flot time series with pan functionality. Now i want my initial x-aixs hold only 10 data, when scrolled remaining will appear.
This is possible by adding max to x-axis.
In normal chart if i pass max: 10 then first 10 records will appear first and rest available when scrolled.
But in timeseries am not able to understand what to pass as max. Please give some solution.
xaxis: {
mode: "time",
timeformat: "%m/%d",
tickSize: [1, "day"],
panRange:[min_date,max_date],
max: ???,show: true
}
,pan: {interactive: true}
I have 2 ranges on the graph, so called ; green and red zones.
You can see it in the fiddle.
What I am out after is to have a graph where the green range should be between 2-4 (y-axis) specifically for the 11-13 values of x axis. Basically I would like to have 2 different ranges .
Anyone knows how to do it ?
Edit :
To make it more clear with Michel's solution; I basically would like to add another green zone that is located in up-right of the previously located green zone (let it be in x(13,16) and y(4,6) ).
Please check the newer version ;
http://jsfiddle.net/shamaleyte/4zmgrpwz/
I've created a simple plugin for Flot to use in order to get shamaleyte his desired result.
Either create a new file and copy-paste the contents in it or download the plugin
Refer to it just as every other javascript file
<script type="text/javascript" src="path/to/file.js"></script>
And add areaMarkings to the grid object in the options.
You were on the right track!
The way Flot draws the markings of the chart is simply to overlap everything! Layer upon layer upon layer.
What I've done to accomplish it is the following:
#1: First of I drew the xaxis between x=11 and x=13 for the green area. It's a giant area that spans from the y=0 all the way to y=12 on the yaxis.
#2: Then I filled in the entire yaxis between y=0 and y=2, this overlapped the green area on the yaxis to create a red area spanning from left(x=10) to right(x=15)
#3: With the bottom yaxis row being red now, I then did the exact same for the top yaxis. Once again from left(x=10) to right(x=15) I filled in the entire y=4 to y=12 with a red area.
#4: I was now left with 2 white areas on the left and right side of the green area and between the red areas. All I had to do was fill those with red aswell. I did the same as I did with the green area, draw the red areas from the bottom to top. From x=0 to x=2 and from x=13 to x=15.
....
markings: [{
xaxis: {
from: 11,
to: 13
},
color: "#D7EEE1" // Green
}, {
yaxis: {
from: 0,
to: 2
},
color: "#F2CDEA" // Red - Bottom Row
}, {
yaxis: {
from: 4,
to: 12
},
color: "#F2CDEA" // Red - Top Row
}, {
xaxis: {
from: 10,
to: 11
},
color: "#F2CDEA" // Red - Left Column
},{
xaxis: {
from: 13,
to: 15
},
color: "#F2CDEA" // Red - Right Column
}]
....
Here's an updated fiddle that I think comes close to your expectations.
How to fill color below or above the threshold. currently threshold plugin changes the line of the color but i need to fill the color on the dataseries (eg: below : 5 or above :5 ) when the line is drawing on the canvas using flot line chart. can anyone suggest me. thanks
Are you saying your fill color doesn't change above/below a certain threshold, or that you only want to show fill if it is above/below a certain threshold? If its the former, this works for me just by setting fill to true in the series options:
$.plot("#placeholder", [{
data: d1,
threshold: {
below: 5,
color: "rgb(200, 20, 30)"
}}], {
series: {
lines: {
show: true,
fill: true
}
}
});
See this fiddle for working example.
I'm trying to set the colours of my jqplot bar chart bars. There will always be six bars present, grouped into sets of 2 bars. Here is an example of the data being plotted:
line1 = [6000, 5000, 5500];
line2 = [16000, 10000, 14000];
I've used the following so far:
seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501", "#027997", "#CF3501", "#027997"],
But jqplot alternates between the first 2 bars each time instead of using all of the declared colours. This is probably as it only determines 2 series being present, one per set of data.
Is there a way to set the bar colours explicitly?
I do this using the varyBarColor method so you can list the different colours for the bars in a simple array like you have done already but if there is only one series it will use these colors for each bar instead. Here is an example of my code:
plot1 = $.jqplot('chart1', [s1], {
title: 'Example Income Graph',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true },
pointLabels: { show : true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label:'Net Growth (%)',
ticks: ticks
},
yaxis:{
label:'Income (£)',
tickOptions:{ formatString:'%d'},
autoscale:true,
min:0,
max:10000
}
},
seriesColors: [ "#eee", "#ccc", "#999"],
highlighter: { show: false }
});
In this graph I had one series with 3 bars and they are each a different colour grey.
This is pretty old, but still doesn't have the right answer, and it took me a while to figure it out, so here it goes.
You need two things:
Set the varyBarColor and a series array that contains the series colors for each series, passed at the same level as seriesDefaults, such as:
plot1 = $.jqplot('chart1', [s1, s2], {
title: 'Example',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true },
pointLabels: { show : true }
},
series: [{seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"]},
{seriesColors: ["#027997", "#CF3501", "#027997"]}]
}
try like this
series:[{renderer:$.jqplot.BarRenderer , seriesColors: ["#F3CBBF", "#BFDDE5", #CF3501","#eee", "#ccc", "#999"] }]