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.
Related
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.
I want to be able to change the colour of this exact entire map. I am using map bubble I want a darker color for the countries and continents. how can i achieve this as colorAxis will change the data representation(bubble) colour not the map colour.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/map-bubble/
apparently this does not work :(
colorAxis : {
color: 'red'
},
You can try replacing color property with nullColor. What it does is changing the color of all shapes to red.
Please check my fiddle: JSFIDDLE
{
name: 'Countries',
mapData: mapData,
//color: '#E0E0E0',
nullColor: 'red',
enableMouseTracking: false
}
Thanks
Is there any way to set specific background colors for the mekko chart in jqplot?
Examples on the jqplot website always show the same set of colors.
I haven't used that particular chart in jqPlot, but this usually works for assigning colours:
series: [
{ color: "#aaff11" }, // series 1 color
{ color: "#991166" }, // series 2 color
{ color: "#33ff66" } // series 3 color (and so on)
]
where series above is a key in the options object passed to $.jqplot(id, data, options).
See the docs for more info.
How can i fill a flot line graph with no opacity?
lines: {
show: true,
fill: true,
lineWidth:1
}
I think you've mixed-up the terms 'opacity' and 'transparency'. It sounds like what you actually want is no transparency, i.e. a solid color that doesn't allow anything in the background to show through.
To control transparency in Flot, change the 'fill' option from 'true' to a number from 0 to 1, where 0 is fully-transparent and 1 is fully opaque. See customizing the data series in the API docs for more info.
Flot documentation agrees with DNS's answer, but at least in current stable version (0.8.1) I couldn't make it work.
Checking the Flot source I came up with this solution:
'bars': {
show: true,
fill: 1.0,
fillColor: 'rgba(255,230,230,0.5)',
lineWidth: 1,
}
I didn't test it for lines, but it should work with them too.
If you're using flotr2, you'll notice that none of these solutions work. Instead, try:
lines: {
fillOpacity:1.0,
show: true,
fill: true,
lineWidth:1
}
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"] }]