Sometimes my segments are too small to be visible enough to click/mouseover. Is it possible to trigger the same mouseover on the chart by mousing over the associated legend?
My legend & custom highlighter code:
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 's',
placement: 'insideGrid',
rendererOptions: {
numberRows: 2
}
},
highlighter: {
show: true,
tooltipLocation: 'sw',
useAxesFormatters: false,
tooltipAxes: 'y',
yvalues: 3,
formatString: '<table class="jqplot-highlighter">' +
'<tr><td>Impact:</td><td>%s</td></tr>' +
'<tr><td>Percentage:</td><td>%s</td></tr>' +
'<tr><td>Actual:</td><td>%s</td></tr></table>'
}
Works beautifully, would just like to have it activate from the legend too if possible?
You could define your own event handler for .jqplot-table-legend-label or some other selector and then do whatever you need to in that.
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 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 :)
I am using jqplot for plotting piechart,bar and line chart. It is work fine in IE9>=. But it is not working in IE8. It gives me above error when I am using both piechart and bar chart. and it is showing error at piechart plugin at e.jqplot.PieRenderer'. After blocking this plugin bar chart works fine but not piecharts. Below is my code. Please suggest on this.
var optionsObj = {
title: 'Item wise stock',
animate: !$.jqplot.use_excanvas,
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dates,
label: 'Item'
},
yaxis: {
tickOptions: { showMark: true, formatString: "%d" },
padMin: 0,
label: 'Stock',
angle: -30,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: { fontSize: '11px' }
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#e6e6e6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
series: [
{ label: 'Bar', renderer: $.jqplot.BarRenderer },
{ label: 'Line', renderer: $.jqplot.LineRenderer, color: '#ef8c08' },
],
legend: {
show: true,
location: 'ne'
},
seriesDefaults: {
shadow: false,
rendererOptions: {
barPadding: 0,
barMargin: 10,
barWidth: 25,
highlightMouseDown: true
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) {
return '<table class="jqplot-highlighter"><tr><td>Item:</td><td>' + data[pointIndex][0].toString() + '</td></tr> \
<tr><td>Stock:</td><td>' + data[pointIndex][1].toString() + '</td></tr></table>'
}
}
};
var plot2 = $.jqplot(location, values, optionsObj);
Include this tag in your html page:
<script type='text/javascript' src="excanvas.js"></script>
IE8 requires excanvas library to create canvas elements because IE8 doen't support canvas elements.
You can download the js file from here: Excanvas library
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)
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'
},
}
}
});