I am using NoUiSlider 8.1.0 and though the value returned is a correctly a decimal with two places, the values shown in the scale as:
+-----------+-----------+-------------+-----------+-------------+
1 1 1 1 1 1
instead of:
+-----------+-----------+-------------+-----------+-------------+
0.5 0.6 0.7 0.8 0.9 1
How can I achieve the desired scale?
This is my code:
noUiSlider.create(slider, {
start:0.5,
step: 0.05,
range:{
'min':[0.5],
'max':[1]
},
connect:'lower',
pips:{
mode:'steps',
density:4
},
format: wNumb({decimals:2}),
});
Thanks!
You need to move the format options to pips and it will work!
noUiSlider.create(slider, {
start:0.5,
step: 0.05,
range:{
'min':[0.5],
'max':[1]
},
connect:'lower',
pips:{
mode:'steps',
density:4,
format: wNumb({ decimals: 2 }),
},
});
Related
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 am using the FLOT charting library to plot calories consumed over time. I would like the y-axis to use autoscaling (to just show values that are +/- the min and max in the dataset).
However, the chart always uses 0 as the minimum for my bar chart rather than autoscaling the y-axis values. Here is my code:
function DrawCalorieChart(calorieData) {
plot = $.plot($("#CalorieHistoryChart"), [calorieData],
{
series: {
bars: { show: true, barWidth: 0.8, align: "center" }
},
legend: {
show: false
},
xaxis: { tickDecimals: 0, tickSize: 1, mode: "categories", tickLength: 0 },
yaxis: { autoscaleMargin: 0.025 },
grid: { labelMargin: 10 }
});
}
I can manually set a minimum value but the problem is that I don't know what the minimum might be after new data is entered. I have tried removing the yaxis spec altogether, setting an autoscaleMargin (as shown) and setting the min to null. But nothing works - the minimum is either a static value or zero! Any help would be greatly appreciated.
Currently there's no way to do this within the library's own API. You'll need to write some JS to iterate over your values and find a min/max manually. This could be done either outside your plot/redraw calls, or in a processRawData hook, which might work better if you're constantly adding values and redrawing.
Addressing this is actually an active project that I expect will be merged into the Github master branch within the next 2-3 weeks. So depending on whether you're able to wait, and willing to use less-stable code, that's another option.
Current answer after the change mentioned in DNS' answer has been implemented:
Set zero: false in the bar options.
From the official documentation:
Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.
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"] }]