We Keep Coding

How to change the flot bar fill and border color?

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

Space between jqplot bar chart does not change

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>

jqplot link in legend

I have a basic pie chart made with jqplot:
$(document).ready(function(){
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
Now I want to add links in the legend. Is that possible and if so how?

You can put HTML in labels:
$.jqplot(..., {
series : {
...
label : "<a href='URL'>click me</a>"
}
});
(or put the equivalent in the legend section of the jqPlot configuration object).
However, you might need to adjust the z-index of the legend before they are clickable:
.jqplot-table-legend { z-index: 1000 }
Also, I noticed some settings (like enabling zoom) block the clickability of the labels.

//I used the below method to bring hyperlink on legends, it worked for me. I did the same thing for bar chart also.
This is the string which I used to form the array.
strArr = "[<' a onclick = GoToSearch("100") href=# > NY <'/a> ' , 8561 ]"
arrOwner= eval("[" + strArr + "]")
$.jqplot.config.enablePlugins = false;
plotCAP_EquipCount1 = $.jqplot('piechartOwner', [arrOwner], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#ffffff',
shadow: false
},
axesDefaults: {
},
title: 'Ownership Data',
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
sliceMargin: 1,
startAngle: -90,
dataLabels: 'value',
highlightMouseOver: true,
highlightMouseDown: true
}
},
legend: {
show: true,
placement: 'outsideGrid',
rendererOptions: {
numberRows: 10
},
location: 'ne'
}
});

Format jqPlot point labels like: number (percent)

this is my first question.
I need to format a jqPlot chart point labels like this: 50 (100%)
Formating number and show percentage.
var s1 = [32, 28, 18, 6];
var ticks = ['0-20 kph', '21-40 kph', '41-60 kph', '61+ kph'];
plot1 = $.jqplot('bar-graph', [s1], {
animate: !$.jqplot.use_excanvas,
title: 'Gráficos de velocidade',
captureRightClick: true,
seriesColors: ['green', 'yellow', 'orange', 'red'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
formatString: '%s (?%%)'
},
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: {
show: false
}
});
On jsFinddle: http://jsfiddle.net/evandroprogram/r3PUE/10/
Thanks.

You can probably implement a function which returns a proper format string instead of setting the format explicitly. Something like this:
formatString: function(){return '%s (100%)';}()
You can do your calculations inside that function to come up with the appropriate string.

Show Y axis on right side of chart with jqPlot

I am using below code to show Y axis of jqPlot at right side but its only showing me at left side:
$.jqplot.config.enablePlugins = true;
var test2 = readXML(posi);
plot2 = $.jqplot('chart2', [test2], {
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: true, wickColor: '282828',
upBodyColor: '00C000', fillUpBody: true, downBodyColor: 'F81700',
fillDownBody: true, lineWidth: 1.5, tickLength: true, background: 'C8C8C6',
closeColor: '282828', openColor: '282828'
}
}, { xaxis: 'x2axis', yaxis: 'y2axis'}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
autoscale: true
},
y2axis: {
autoscale: true
}
}
});
Please tell me where I am where my mistake is.
I have got the code above from the reference: http://www.jqplot.com/tests/canvasAxisTests.php in this the third example is showing values of at right side. I am using candlestick chart of jqPlot.
Thanks

Take a look at the CSS file that comes with the jqplot. It defines the settings for the jqplot-yaxis, and so you can use that for setting the desired location.