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'
}
});
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
How do I specify my own colors for the bars in a jqPlot stacked bar chart? I am talking about setting different colors for single bars. I have gone through a couple of examples, but all of them use the default colors. Is there a way to explicitly set the colors for the bars in a stacked bar chart?
Here is the code I have now:
var s1=[11,28,22,47,11,11];
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];
var ticks = bcdarr;
var options = {
title: ' STATUS',
stackSeries: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min : 0,
tickInterval : 5,
max:50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each.
As almas shaikh implied, the setting which changes the colors of the sections of the bars in a stacked barchart is the seriesColors attribute. This is an array with the colors defined as text strings as you would provide for CSS, or a style.
In the example from which you took the above image to get (working JSFiddle):
You can add:
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
The complete function call would be:
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Additional (point labels):
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]
Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).
Specifically, the options to show the point labels are specified in
{
seriesDefaults:{
pointLabels: {show: true}
}
}
To show the labels, but not those that are zero, you would use:
{
seriesDefaults:{
pointLabels: {
show: true,
hideZeros: true
}
}
}
Try this:
Within your jqplot you are missing seriesColors. Use it something like below:
$.jqplot('chart3', [s1, s2, s3], {
seriesColors:['#000000', '#ffffff', '#000000'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
blah blah
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/
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/
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.