Just as the title says. Have a look at the screen-shot below the see what I mean. Version is 0.9.7r635. Any ideas?
Screenshot
There is a years worth of data, that is, a plot for every single day. Here is a sample:
[[["01-01-2012", 0], ["01-02-2012", 0], ["01-03-2012", 0],...]]
And here is the javascript:
$.jqplot('jqplot', chartData, {
seriesDefaults: {
color: '#09c',
showMarker: false,
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
pad: 0,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90
},
tickInterval: ( 'year' == duration ) ? '1 month' : '1 day'
},
yaxis: {
min: 0,
tickOptions: {
formatString: '%d',
}
}
}
});
In this instance, the tickInterval is set to '1 month'.
Try without this $.jqplot.CanvasAxisTickRenderer. When this is there the date values are treated as labels. So the dateaxis renderer cannot render the dates well. I had this same problem.
For me updating jqplot (as this question is quite old) solves a lot of issues, in order to get tickinterval working the accepted answer here helped me:
jqPlot DateAxis tickInterval not working
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.
The labels I use on axis for my graph contains text with more than one word. Like this:
and it looks bad. I tried (as you can see on the graph) to replace the wit spaces with brs or with \n in order to render the text in multiple lines. The result is not what I was expected to get.
How to split the ticks text into words and to draw each word on a row?
The <br/> is working will trying to split your text into two lines. See a working example here.
In order to make it work, don't forget to load some jqplot plugins : CanvasAxisTickRenderer, CategoryAxisRenderer.
You then need to apply tickRenderer: $.jqplot.CanvasAxisTickRenderer to your serie(s). You need as weel to apply renderer: $.jqplot.CategoryAxisRenderer onto your yaxis.
For me, <br/> didn't work and \n did.
My configuration:
jQuery.jqplot(element, configuration.series, {
stackSeries: true,
animate: false,
captureRightClick: false,
seriesColors: ['green', 'blue', 'yellow', 'orange', 'red'],
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer,
rendererOptions: {
shadowOffset: 0,
barDirection: 'horizontal',
highlightMouseDown: false,
barWidth: 20,
},
pointLabels: {
show: false
}
},
axesDefaults: {
min: 0,
minorTicks: 0,
tickOptions: {
formatString: '%d'
}
},
highlighter: {
show: false
},
axes: {
yaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: configuration.labels
},
xaxis: {
ticks: configuration.ticks,
label:'Hours',
labelOptions:{
fontFamily:'Helvetica',
fontSize: '10pt'
},
}
}
});
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
}
}
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
}
});