I have created a user graph for my codeigniter project. The bar fill is set at the default. But I would like the BARS to change it so it looks like the bars on this image: http://www.riwakawebsitedesigns.com/offsite/images/userchart.PNG
I echo the data from my controller. But just would like to know how to make bars and bar-border look like the image above.
When I add these shadowSize: 0, colors: ['#9FD5F1', '#1065D2'], to the series bar it does not work.
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
bars: {
shadowSize: 0,
show: true,
fill: true,
//fillColor: '#9FD5F1'
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>
I had to do this below to make it work added color below series
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
color: '#1065D2',
bars: {
shadowSize: 0,
show: true,
fill: true,
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>
I finally found an answer to this. For Bars you specify the fillColor for each series. Then the global Series Colors. The Bar will be filled with the fillColor and use the Colors for the lines.
The below example is using 2 different data arrays d1 (Absent Time), d2 (Time Worked) and stacks for each bar for different time spans
E.g:
var chartOptions = {
xaxis: {
min: 0,
max: 100,
ticks: [[25, '25%'], [50, '50%'], [75, '75%'], [100, '100%']]
},
yaxis: {
ticks: [[1, 'Today'], [2, 'Yesterday'], [3, 'This Week'],[4, 'Last Week']],
position: 'right',
font: { size: 12 }
},
series: {
stack : true,
bars: {
horizontal: true,
show: true
}
},
colors: ['rgb(52,95,14)', 'rgb(108,105,19)'],
};
$.plot($('#placeHolder'), [{ data:d1, bars:{fillColor: 'rgb(194, 238, 155)', fill: 0.9}}, { data:d2, bars:{fillColor: 'rgb(241, 239, 177)', fill: 0.9}}], chartOptions);
The displayed chart
Related
I use a flotcharts JS linechart to display the value of different stock tradepositions. The user can show/hide each trade on the chart via a checkbox above the chart.
By default, linecharts use default or predefined colors from me in the order the series are created. So the first line gets color1, the second color 2 etc.
This is not very good for this situation, because when the user hides the line for trade one, the previously trade two becomes the new "first line" and also changes its color from color 2 to color 1.
As the data represented by the line are still the same this behaviour is very irritating.
To solve this I would like to assign a color to a series by it's name, id or similar rather than by the order it was created on the chart, as this identifier stays the same even after adding/removing other lines from the chart.
How can I do this?
Currently I use a code like this to set the color for the first, second etc line.
var datatoprint=[];
for(var key in arrTradeSymbols){
if (arrTradeSymbols[key].visible==true){
datatoprint.push(arrTradeSymbols[key].data);
jQuery("#symb_"+arrTradeSymbols[key].tradeid).prop("checked",true);
}
}
var plot = $.plot(jQuery("#kt_flotcharts_pl"), datatoprint, {
legend: {
position: "nw",
},
series: {
lines: {
show: true,
lineWidth: 2,
fill: false,
},
points: {
show: true,
radius: 3,
lineWidth: 1,
color: '#00ff00'
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
colors: ['#0083d0', '#1dc9b7'],
xaxis: {
mode: "time",
tickSize: [5, "day"],
tickLength: 0,
tickColor: "#eee",
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
}
});
That's easy: just supply an array of objects with the color along with the data instead of only the data as an array.
Example snippet:
var arrTradeSymbols = {
trade1: {
color: "red",
data: [
[1, 3],
[2, 4],
[3.5, 3.14]
]
},
trade2: {
color: "green",
data: [
[1, 4],
[2, 11.01],
[3.5, 5.14]
]
}
};
function run() {
var datatoprint = [];
for (var key in arrTradeSymbols) {
if ($("#" + key).is(":checked")) {
datatoprint.push(arrTradeSymbols[key]);
}
}
$.plot($("#kt_flotcharts_pl"), datatoprint, {
legend: {
position: "nw",
},
series: {
lines: {
show: true,
lineWidth: 2,
fill: false
},
points: {
show: true,
radius: 3,
lineWidth: 1
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
xaxis: {
ticks: 5
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
}
});
}
run();
$("input").on("input", run);
#kt_flotcharts_pl {
width: 400px;
height: 200px;
border: 1px solid black;
}
label {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<label><input type="checkbox" id="trade1" checked> Red</label>
<label><input type="checkbox" id="trade2" checked> Green</label>
<div id="kt_flotcharts_pl"></div>
Thanks in advance for your time.
I have the following code for a Flot Chart
<script src="js/plugins/flot/jquery.flot.js"></script>
<script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/plugins/flot/jquery.flot.spline.js"></script>
<script src="js/plugins/flot/jquery.flot.resize.js"></script>
<script src="js/plugins/flot/jquery.flot.categories.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
var data = [{
"label": "Commission",
"color": "#1ab394",
"data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]
}, {
"label": "EPL",
"color": "#1C84C6",
"data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", 0],["Apr", 0],["May", 1.75],["Jun", 0.00],["Jul", 0.17],["Aug", 0.39],["Sep", 0.35]]
}];
var options = {
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 0,
show: true
},
shadowSize: 2
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fff'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
tickColor: '#eee'
},
shadowSize: 0
};
var chart = $('.dashchart');
if(chart.length)
$.plot(chart, data, options);
});
})(window, document, window.jQuery);
</script>
The docs state...
By default, the labels are ordered as they are met in the data series.
If you need a different ordering, you can specify "categories" on the
axis options and list the categories there:
https://code.google.com/p/flot/source/browse/trunk/jquery.flot.categories.js?r=341
However the x axis ordering is not the same as the data series, as seen in the screenshot below
Any idea why this may be.
I figured this out. Hope it helps someone some day
Seems Flot doesnt like empty values in the data series
"data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]
changed to this and it works fine
"data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", ]0,["Apr", 0],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]
I tried to change the spacing between jqplot barchart using both barMargin and barPadding but both did not help. Please help me out in figuring out what I am missing out.
Let me know a way to reduce the space between each bars.
<script>
$(document).ready(function(){
var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6],['Maserati',3],['Ferrari',3]];
$('#chart3').jqplot([line1], {
title:'Test with Custom Colors :)',
// Provide a custom seriesColors array to override the default colors.
seriesColors:['#3366cc', '#dc3912', '#ff9900', '#109618', '#ffc607'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set varyBarColor to tru to use the custom colors on the bars.
varyBarColor: true,
barWidth: 25,
barPadding:-10,
barMargin: -10
}
},
grid:{
drawGridLines: true,
gridLineColor: '#000000',
background: '#ffffff',
borderColor: 'transparent',
borderWidth: 2.0,
shadow:false,
},
tickOptions:{
// markSize: 1,
showMark: false,
showGridline: false,
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
drawMajorGridlines: false
}
}
});
});
</script>
I'm trying to display a flot chart with 3 arrays. To make things simple the arrays are all the same:
[[1,1],[2,3],[3,6],[4,10],[5,15],[6,21]]
I create the arrays with the following ruby code:
def flot_chart_series
total=0
foo=[]
(1..6).each do |number|
foo.push [number, total+=number]
end
foo
end
Here is my Erb processed Javascript code:
var fb_shares = <%= flot_chart_series %>;
var twitter_shares = <%= flot_chart_series %>;
var email_shares = <%= flot_chart_series %>;
var plot = $.plot($("#statsChart"),
[ { data: fb_shares, label: "Facebook shares"},
{ data: twitter_shares, label: "Twitter shares" },
{ data: email_shares, label: "Email shares" }], {
series: {
lines: { show: true,
lineWidth: 1,
fill: true,
fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 }, { opacity: 0.15 } ] }
},
points: { show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: true
},
grid: { hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 0
},
legend: {
// show: false
labelBoxBorderColor: "#fff"
},
colors: ["#3071eb", "#30a0eb", "#a7b5c5"],
xaxis: {
ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"],
[7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]],
font: {
size: 12,
family: "Open Sans, Arial",
variant: "small-caps",
color: "#697695"
}
},
yaxis: {
ticks:3,
tickDecimals: 0,
font: {size:12, color: "#9da3a9"}
}
});
The problem is that the chart doesnt plot 3 of the same lines, it creates lines that are increasing in value. Here is a screen shot of the graph: flot chart screen shot
Any ideas what I'm doing wrong?
As #captain hints at in his comment this is because you are using the stacking plugin with stack: true. This is going to stack the 3 identical lines on top of each other.
Compare these fiddles: stack true and stack false.
If you don't want to stack just get rid of the plugin (less javascript == faster loading) and the stack: true option.
I am hoping someone out there can tell me if what I am trying to do is even possible with the FLOT Javascript library. I am trying to show a chart (below) with dual axis and three data sets. One data set is on the left axis and two data sets on the right axis. What I really want to be able to do is stack the two data sets on the right axis since they should show cumulatively. Thus far I have been unable to get this chart to respond to the stack: true setting at all.
If anyone could help me out with it I would GREATLY appreciate it. My code and a snapshot of the chart currently. I am trying to stack the blue and green areas which correspond to the right axis (y2).
$(function () {
var previousPoint;
var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];
var ds = new Array();
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 3,
}
});
//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
var rootElt = 'body';
$('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 35,
left: x - 5,
border: '1px solid #000',
padding: '1px 5px',
'z-index': '9999',
'background-color': '#202020',
'color': '#fff',
'font-size': '11px',
opacity: 0.8
}).prependTo(rootElt).show();
}
//Display graph
$.plot($("#placeholder1"), ds, {
grid:{
hoverable:true
},
xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
yaxes: [ { min: 0,
tickFormatter: function numberWithCommas(x)
{
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
},
}
],
y2axis: [ ],
legend: { show: true }
});
});
This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.
Two or more series are stacked when their "stack" attribute is set to
the same key (which can be any number or string or just "true"). To
specify the default stack, you can set
series: {
stack: null or true or key (number/string) }
or specify it for a specific series
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
In this case, we want to specify it within the two series objects that we want stacked, which would look like this:
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 3,
}
});
Add those two stack:true bits and include the stack plugin into your javascript sources and that will do it. See it in action here: http://jsfiddle.net/ryleyb/zNXBd/