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.
Related
I am using jqplot for showing graph.
following is the code :
tempArr1 = [9189.539999999999, 10170.039999999999, 980.5]
plot2 = $.jqplot('bar_chart_id1', [tempArr1], {
title:{
text: chatTitle2,
textColor: '#B66B09'
},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
varyBarColor: true,
barPadding: 2,
barMargin: 3,
barWidth: 30,
},
pointLabels: {show: true},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: lblArray,
label:'Manufacturer',
},
yaxis:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0,
tickInterval:1000,
label:'Amount',
tickOptions: {formatString: '$%#.2f'}
}
},
highlighter: { show: true },
});
As you can see the point label is showing many decimal points (9189.539999999999).
I need to show the label as '$91890.54'.
I have tried the formatString option in pointLabels as '$%#.2' buts its not working.
Any help is greatly appreciated.
Thank you.
tempArr1 = [9189.539999999999, 10170.039999999999, 980.5];
tempArr1 = tempArr1.map(i => { return parseFloat(i.toFixed(2)); });
Round to at most 2 decimal places in JavaScript
Math.round(num * 100) / 100
Source
pointLabels: { show: true, location: 'n', lables: tempArr1 , formatString: "$%#.2f" },
Should meet your exact needs
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
How can I format y axis ticks strings to be integer and not decimal.
At the moment the tickets are showing with numbers such as 076165412.654666666666 and I would like them to show as 76165412 instead.
var data = [['2013/02/11',20130211],['2013/02/10',20130210],['2013/02/12',20130212],['2013/02/15',20130215],['2013/02/16',71],['2013/02/17',81],['2013/02/18',71],['2013/02/06',735],['2013/02/19',90]];
var options = {
title: 'Monthly statistics for EnrAll',
autoscale:true,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
min:'Feb 01, 2013',
max:'Feb 20, 2013',
numberTicks: 15,
tickOptions: {
formatString:'%b %#d',
angle: 15
}
},
yaxis: {
label: 'Count',
min:'0'
}
},
highlighter: {
show: true,
tooltipFadeSpeed: 'fast'
}
};
All I did to fix this one was to change the way the minimum y-axis value is specified.
Currently you have min:'0', change it to min:0 (i.e., a number rather than a string). For further insurance you could set tickOptions and force an integer representation, though I didn't need this myself:
tickOptions: {
formatString: '%d'
}
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'
}
});
I want to add the plot's legend name to the mouse over tool tip for a series line. I've used one of the solutions to this jqplot tooltip on bar chart.
Specifically I used the following function:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
However, the problem I have is that it does not use the legend name 'My legend name' instead it will use the JQPlot default of 'Series 1' or 'Series 5' (number depending on series position).
The second problem is that I lose my date formatting once I start using the above function. So I get a number e.g. something like 123672378328 instead of it being converted to the format I specified in tickOptions.
My code to generate the chart is below:
var plot;
function buildChart(chartDivId, graphData, chartTitle, graphSeriesNames, labelNames) {
var id = "#" + chartDivId;
$(id).empty();
var seriesLine = { lineWidth:1, markerOptions: { show:false } };
plot = $.jqplot(chartDivId, graphData,
{
title: chartTitle,
axes:
{
xaxis:
{
label:'Date',
renderer:$.jqplot.DateAxisRenderer,
tickOptions: { formatString:'%b %#d %H:%M' }
},
yaxis: { label: 'Parameter Values', tickOptions: { formatString:'%.2f' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions : { angle: 270, fontFamily: 'Arial, Verdana, Helvetica', fontSize: '8pt' }, autoscale: true },
},
seriesDefaults: {
markerOptions: {
show: true, style:'filledCircle', size: 4.5
}
},
highlighter:
{
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor //new code added to attempt to add legend name to mouse over tool tip
},
cursor:
{
show: true,
zoom: true,
showTooltip: false
},
legend:
{
labels: labelNames ,
show: true,
location: 's',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:
{
numberColumns: 10,
numberRows: 5,
seriesToggle: 900,
disableIEFading: false
},
marginTop: '100px',
marginBottom: '100px',
placement: 'outside'
}
}
);
}
FURTHER UPDATE:
After being a bit silly and digging down deep into the plot object of JQPlot I realised that the str variable passed into the tooltipContentEditor method has what I need. So the following is the solution:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label with x and y values value
return plot.legend.labels[seriesIndex] + ", " + str;
}
No help or advice provided so I thought I'd provide the solution I found after spending a few hours trying to fix.