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>
Related
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
I'm trying to set the colors to a jqplot donut chart with multiple rings. I need that each slice be filled with a specific color like the example below:
I read in the documentation that I need to set the "varyBarColor" to true, and use "series" with an array of many "seriesColors" however it only shows the default colors.
Here's the code I have so far:
var s1 = [['a',8], ['b',12]];
var s2 = [['a',3], ['b',17]];
var s3 = [['a',6], ['b',14]];
var s4 = [['a',10], ['b',10]];
var s5 = [['a',2], ['b',18]];
var plot4 = $.jqplot('divId', [s1, s2, s3, s4, s5], {
seriesDefaults: {
series: [
{seriesColors: [ "#8156a1", "#000"]},
{seriesColors: [ "#418cc8", "#ec79c0"]},
{seriesColors: [ "#ec79c0", "#f69c44",]},
{seriesColors: [ "#f69c44", "#fadb48"]},
{seriesColors: [ "#fadb48", "black"]}
],
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
lineWidth: 0,
startAngle: 90,
showDataLabels: false,
shadowAlpha: 0,
ringMargin:2,
varyBarColor: true,
thickness: 7
}
},
grid: {
background: 'transparent',
borderColor: 'transparent',
shadow: false,
drawGridLines: false,
gridLineColor: 'transparent',
borderWidth: '0'
}
});
Any idea on how to make it work?
Thanks in advance.
Ok, I managed to solve the problem, (a very stupid one in fact). The series value should be outside of seriesDefaults, not inside like I was doing it:
var plot4 = $.jqplot('divId', [s1, s2, s3, s4, s5], {
series: [
{seriesColors: [ "#8156a1", "#000"]},
{seriesColors: [ "#418cc8", "#ec79c0"]},
{seriesColors: [ "#ec79c0", "#f69c44",]},
{seriesColors: [ "#f69c44", "#fadb48"]},
{seriesColors: [ "#fadb48", "black"]}
],
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
lineWidth: 0,
startAngle: 90,
showDataLabels: false,
shadowAlpha: 0,
ringMargin:2,
varyBarColor: true,
thickness: 7
}
},
grid: {
background: 'transparent',
borderColor: 'transparent',
shadow: false,
drawGridLines: false,
gridLineColor: 'transparent',
borderWidth: '0'
}
});
I'm using some code based on jqplot which draws a barchart and allows toggling the series of the chart by clicking on the legendnames, see function code below.
Is it possible to control the series of various charts by means of only one legend? If so, how?
function drawBarchart(name,ticks,labels,s11,s12,s21,s22){
var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div>
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart
rendererOptions: {fillToZero: true},
pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars
},//seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[ //define labels
{label:labels[0], shadow: false},
{label:labels[1], shadow: false},
{label:labels[2], shadow: false},
],//series
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends
},//legend
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false}
},//xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks:false,
label: 'axis1',
pad: 1.05,
tickOptions: { showGridline: false}
},//yaxis
y2axis: {
showTicks:false,
label: 'axis2',
pad: 1.05,
tickOptions: {showGridline: false}
}//yaxis
},//axes
series:[
{yaxis:'yaxis', label:'s11[0]'},
{yaxis:'y2axis', label:'s11[1]'},
{yaxis:'yaxis', label:'s12[0]'},
{yaxis:'y2axis', label:'s12[1]'},
{yaxis:'y2axis', label:'s21'},
{yaxis:'y2axis', label:'s22'},
]
}); //$.jqplot('chart1', [s1, s2, s3],
}//barchart
I have done it. here is the implementation on your code Jsfiddle Link
Take into consideration that you have to draw Legends by your self and not by using jqplot.
if you can do that then my code will take care of the rest.
$(document).ready(function () {
var graphObj = [];
var s11 = [["a",1],["b",1],["c",5],["d",2]];
var s12 = [["a",2],["b",2],["c",6],["d",5]];
var s21 = [["a",3],["b",3],["c",7],["d",1]];
var s22 = [["a",4],["b",4],["c",8],["d",8]];
drawBarchart("chart1", s11, s12, s21, s22, 0);
drawBarchart("chart2", s11, s12, s21, s22, 1);
$(".jqplot-table-legend tr").click(function(){
var index = this.rowIndex;
for(var j =0; j<graphObj.length; j++){
graphObj[j].series[index].show = !graphObj[j].series[index].show;
graphObj[j].redraw();
}
});
function drawBarchart(name, s11, s12, s21, s22, i) {
graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid: {
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //choose bar chart
rendererOptions: {
fillToZero: true
},
pointLabels: {
show: false,
location: 'e',
edgeTolerance: -15
} //adds values+labels to bars
}, //seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: false
}
}, //xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks: false,
label: 'axis1',
pad: 1.05,
tickOptions: {
showGridline: false
}
}, //yaxis
y2axis: {
showTicks: false,
label: 'axis2',
pad: 1.05,
tickOptions: {
showGridline: false
}
} //yaxis
}, //axes
series: [{
yaxis: 'yaxis',
label: 's11[0]'
}, {
yaxis: 'y2axis',
label: 's11[1]'
}, {
yaxis: 'yaxis',
label: 's12[0]'
}, {
yaxis: 'y2axis',
label: 's12[1]'
}, {
yaxis: 'y2axis',
label: 's21'
}, {
yaxis: 'y2axis',
label: 's22'
},
]
});
}
});
I am unable to create legend with all items I need for given jqplot.
I am using jqplot firs time and it was difficult for me to dreate barchart data array in correct format. I have come to the solution, but not I do not have legend labels as I need.
var chartData = [
[
['Portfolio Risk', 1],
['Model Risk', 4],
['Recovery Risk', 1],
['Capability Risk', 1],
['Process Risk', 1],
['Forward flow risk', 5]
]
];
//var ticks = ['Portfolio Risk'], ['Model Risk'], ['Recovery Risk'], ['Process Risk'], ['Forward flow risk'];
plot2 = $.jqplot('chart1', chartData, {
seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: true
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: 90
},
//ticks: ticks
},
yaxis: {
//renderer: $.jqplot.CategoryAxisRenderer
tickOptions: {
stringFormat: "%d"
}
},
},
legend: {
show: true,
placement: 'outside',
//labels: ticks
},
});
JSFiddle is here: http://jsfiddle.net/renatevidruska/7dn86/
You can see missing labels in legend (there should be more items).
I was trying to create ticks array using different formats, no success.
Your tick is not rotate because you didn't include some of <script>. Please see an example of tick.
And your legend is missing some of labels becuase your chartData(array) is not correct. Here is an example of legend.
Here is the working code. http://jsfiddle.net/7dn86/3/
I am trying to draw a PIE using jqPlot.
I am using the property of lineLabels to show a label with line outside the PIE.
The problem is that the value of these labels is: (for example) Overdue(34%)
Instead i want this to show Overdue(42).
42 is the value of the field, and not the percentage.
Please help me, i have searched the internet everywhere.
This is my code:
var plot1 = jQuery.jqplot (graphContainerId, [data], {
gridPadding: {top:0, bottom:0, left:50, right:50},
seriesColors: COLOURS_ARRAY,
seriesDefaults:{
shadow:false,
enableMouseTracking: false,
animation: false,
renderer:$.jqplot.PieRenderer,
rendererOptions: {
startAngle: -90,
padding:50,
paddingColor:'#FFFFFF',
lineLabels: true,
lineLabelsLineColor: '#777',
showDataLabels: true,
dataLabels: 'value',
}
},
legend: { show:false},
}
Try this:
$(document).ready(function(){
var data = [['A',40],['B',25],['C',35],['D',90]];
var plot1 = $.jqplot ('chart1', [data], {
gridPadding: {top:0, bottom:0, left:50, right:50},
seriesDefaults:{
shadow:false,
enableMouseTracking: false,
animation: false,
renderer:$.jqplot.PieRenderer,
rendererOptions: {
startAngle: -90,
padding:50,
paddingColor:'#FFFFFF',
lineLabels: true,
lineLabelsLineColor: '#777',
showDataLabels: true,
dataLabels: data,
dataLabelNudge: 70
}
},
legend: { show:false}
});
});
http://jsfiddle.net/pabloker/wMy5v/3/