Hi I'm using jqplot and is there a way to shorten the tick labels on numeric axis. Suppose there is a y series like this [100,250,125000000,14000000,300,..]. here according to the biggest values axis is scaled and rendered with large tick values. I want to simplify this ticks to millions or billions rendered with mill or bill with the axis. Any ideas?
Thanks in advance.
I use this on my initialization, pay attention at the "formatString" option, ".2F" means that the number (a float) will be rounded after the 2nd decimal (####.##), it's just a matter of finding the right format string you need.
Plot = $j.jqplot('divPerformancePlot',[Data],{
title: Title,
axes: {
xaxis: {
renderer: $j.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d, %T'
},
numberTicks: 4
},
yaxis: {
tickOptions: {
formatString: '%.2f '
}
}
},
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
cursor: {
show: true,
zoom: true
}
});
Related
I am using jqplot 1.0.8 and experience problems with the CategoryAxisRenderer. The y-axis displays numeric values and the x-axis displays either numeric values or string values. That is why I chose the CategoryAxisRenderer. Basically, everything is rendered correctly except for the highlighter. If I hover over a point, I do not get the value for the x-axis, but instead, I get only the index of the value.
Initialization
PLOT = $.jqplot(that.getId() + '-CONTENT', [array], {
width: $('#' + elemId).width() - 30,
height: 500,
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90,
fontSize: '8pt'
}
},
yaxis:{
min:1
}
},
highlighter: {
show: true,
tooltipLocation: 'ne',
sizeAdjust: 7.5,
useAxesFormatters: false,
formatString: '%s, %d'
},
cursor: {
show: false
}
});
Output
Expected results
1) 1978, 1
2) University of Ljubljana, 37
I got the exactly same problem and my own solution is that customize the tooltip using tooltipContentEditor.
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
var content = plot.axes.xaxis.ticks[pointIndex] + ", " + str.split(',')[1];
return content;
}
},
If you want to display the categorized x-axis values, you have to follow this workaround: https://groups.google.com/d/msg/jqplot-users/ZeXgxATxMyI/Fs3DnBAecu0J
I have a bar chart where the first three series represent the expenses and the last series represent the revenue. I want to show the profit or loss for each month in percentage. Below is the image of current graph.
Here is my code for the same.
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I want it to show the profit or loss as shown below
I'm trying to achieve this by three different approaches.
1) First approach is with pointLabels. With pointLabel I have to use 'stackedValue:true' which does not give me individual value of the series in a stack. Secondly, the position of the pointLabel is above the stacked bar and not above the group.
2) Second approach is to add a trendline. But the problem is y-axis values are in absolute number and the values of the trendline will be in percentage. Is it possible to show the percentage series in the same chart ?
2) Third approach is to calculate the % profit or loss for each month and then display it by inserting a div into the graph for each month. Sounds tricky but is it feasible ?
Any different approach from your side most welcome.
I need to generate a horizontal bar chart like given code but with Y-axis as some string not numbers.
What are the changes I need to do to this code for my work. It is working fine with numbers from 1-4 but once I put some string in place of numbers for Y-Axis, graph is not getting plotted.
My Code:
plot4 = $.jqplot('chartdiv', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]]], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
I need to plot plot4:
$.jqplot('chartdiv', [[[2,'a'], [6,'b'], [7,'c'], [10,'d']], [[7,'a'],
[5,'b'],[3,'c'],[2,'d']]], {
What you want to use for this are the so called "ticks".
You want the data in the plot to stay the same, however you want to edit the yaxis options:
var ticks = ['axis1', 'axis2', 'axis3']; //String array for each axis
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
Here a list of the full option list: http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
Hope this was usefull :)
In chart I want to get integer values on Y-axis and X-axis in place of decimal value (1 in place of 1.0).
so please give me solution
I have used this...
"axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions:
{ formatString: '%d'
}
}
}"
Try this formatString: "%.0f". This will display whole numbers.
I'm trying to generate a bar chart with jqplot. All of my values are floating numbers as below:
var s1 = [17.1, 18.2];
var s2 = [50.2, 53];
var s3 = [93.9, 93];
var s4 = [34.1, 34];
But it's rounding them to integers.
Here is the working example: http://jsfiddle.net/JkBKs/
How can I fix this?
try this,it works
axes:
{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0 ,
tickOptions: {
formatString: '%.1f'
}
}
},
please see the ‘formatString’ content
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15, formatString: '%.1f' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}