I followed the other question's answer and made absolutely sure jquery.jqplot.css is properly included but I still can't get the colors to show. I tried with a lot of rendereres (default, bar, funnel) and none of them work. I've even tried using the enhanced legend renderer to no avail.
This is the code I'm using to render the chart. Everything shows up okay except for the legend
plot2 = $j.jqplot('chart_palnie', [serie], {
seriesDefaults: {
renderer:$j.jqplot.FunnelRenderer,
rendererOptions:{
sectionMargin: 8,
widthRatio: 0.3,
showDataLabels: true,
dataLabels: serie_labeluri,
dataLabelThreshold: 0
//dataLabelFormatString: '%s, %d'
}
},
legend: {
show:true,
location: 'e',
showLabels: true,
showSwatch: true
}
});
include CSS file jquery.jqplot.css .. this solved for me
try adding the placement option. I also include the renderOptions, but that is mostly for IE support in my case.
legend: {
show: true,
location: 'n',
placement: 'inside',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 1,
disableIEFading: true
}
}
Related
I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.
I am using Highmaps and I limit the zoom range by setting the minRange property in the xAxis property.
This limits the zoom in factor as expected, but when zooming in too much, it does not let you zoom out again until you drag the map. To be more precise, it lets you zoom out until the x-axis is completely visible, but if your viewport is too wide to display the whole y-range of the map at this particular zoom step, you only get a horizontal stripe.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
minRange: 5000 // <- prevent zooming in too much
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
});
You can see a working demo here: http://jsfiddle.net/b9d0ry3t/
This is a standard Highmaps demo, where I simply added the minRange on the xAxis, nothing else.
This and many other problems have been fixed with the most recent Highmaps update (Feb. 2015).
I am using jqplots to show data graphically in my website. I am able to plot the chart as per our requirement. Now I need to place those graphs in jQuery UI tabs.
I am able to get the graph in the first tab which is active on page load.But I am not able to get the remaining graphs, which are present in other tabs, they are invisible.
I am not able to figure out the reason please help me in this regard.
from your questions there is no code attached, so compare your code with this on JSFiddle http://jsfiddle.net/meccanismocomplesso/9fdJm/1/
I hope this could be useful (It is an example of the book "Beginning JavaScript Charts with jqPlot, Highcharts and D3").
It is perfectly working. There are three different type of charts each in a different tab, and they are all visible.
.
Mention the jqPlot code first, followed by the tabs code. Even I faced the same issue, now fixed.
//$.jplot code
//$("#tabs").tabs();
#meccanismo.complesso Interesting! I am using your jsfiddle (http://jsfiddle.net/meccanismocomplesso/9fdJm/1/) to explore the possibility to run as well the jqplot objects into the jQuery UI tabs. As I was facing the same issue of only showing up only the content in one tab (The active initially), and seeing that the provided example has all the logic all together, thought this could help someone in the near future as well..
[http://jsfiddle.net/zpLxbue8/][1]
Rather than just executing the function as soon as it loads after or before the jQuery UI tabs, used the activate and create to trigger the jqplot
http://jsfiddle.net/zpLxbue8/ [jsFiddle working fine example... jQuery UI tabs displaying different types of graphs by using jQplot plugin][1]
The js content -- omitted due to platform abstraction layer.. script type="text/javascript
jQuery(document).ready(function($){
var $=$.noconflict();
function render(){
var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];
var data1 = [3,1,2,3,5,4];
var data2 = [4,3,3,4,5,6];
var data3 = [9,10,8,7,4,6];
var data4 = [9,8,7,12,9,10];
var pie1 = [
['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
];
var plot1 = $.jqplot ('chart1', [bar1],{
title: 'Example of a bar chart',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0,
fontSize: '12px'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});
var plot3 = $.jqplot ('chart3', [pie1],{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 6,
lineWidth: 5
}
}
});
}
$("#tabs").tabs({
collapsible: true,
//0 is the first tab´s content
active:1,
hide: { effect: "slideUp", duration: 'slow' },
show: { effect: "slideDown", duration: 'slow' },
create: function( event, ui ) {
return render();
},
activate: function( event, ui ) {
return render();
}
});
});
I am working with a bar chart in jqPlot where I need to show the average with a separate line on the chart. My question is how to do that? Would I need to use a Line chart for this? I have looked at few Line chart examples but they are shown as a trend in the bar chart which starts from the very first bar on the chart rather than showing the average.What I need is plotting a line using the average of all those bars displayed on the chart (screen shots as below)
My JSON string to plot the data is as follows:
var commonOption= {
title: ''
,stackSeries: true
,captureRightClick: true
,seriesDefaults:{
renderer:$.jqplot.BarRenderer
,rendererOptions: {
barMargin: 15
,highlightMouseDown: true
,fillToZero: true
},
pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:1
,hideZeros:false
}
}
,seriesColors: ['#A9CB5E']
,axes: {
xaxis: {
tickOptions:{angle:-45}
,tickRenderer: $.jqplot.CanvasAxisTickRenderer
,renderer: $.jqplot.CategoryAxisRenderer
,ticks: []
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
,padMin: 0
,pad: 1.1
, label: 'Percentage (%)'
,rendererOptions: { forceTickAt0: true}
//,min: 0
//,tickOptions:{formatString: '%.0f'},
}
}
,negativeSeriesColors:['#F08080']
/*,legend: {
show: true
,location: 'e'
,placement: 'outsideGrid'
}*/
,highlighter:{
show: true
,tooltipLocation: 's'
,yvalues: 2
,bringSeriesToFront:true
,showMarker:false
,tooltipAxes: 'y'
,formatString: "%n%s"
}
,cursor:{
show: true
,zoom:true
,showTooltip:false
,constrainZoomTo: 'y'
}
,grid:{
background: '#f8f8f8'
}
};
I believe what you are looking for is the jqplot CanvasOverlay functionality http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html
After declaring all of you options and data in the function (in your example after "grid" option):
grid:{
background: '#f8f8f8'
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'avergae',
y: 20.8, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: 'black',
shadow: false
}}
]
}
EDIT:
Yes, sorry about that. be sure not to forget to include "jqplot.canvasOverlay.min.js "
Hi I think it is better to implement a function that automatically calculates the average of the data points into the array. In fact the average of your bar char is about 18 and not 20!!
I suggest to implement a function for doing thi. See this jsFiddle example.
There is an article where it is shown how to draw and calculate the statistics for a bar chart: average, median, mode and standard deviation at this link:
http://www.meccanismocomplesso.org/en/mean-mode-median-barchart/ .
Array.prototype.average=function(){
var sum=0;
var j=0;
for(var i=0;i<this.length;i++){
if(isFinite(this[i])){
sum=sum+parseFloat(this[i]);
j++;
}
}
if(j===0){
return 0;
}else{
return sum/j;
}
}
...
canvasOverlay: {
show: true,
objects: [
{dashedHorizontalLine: {
name: 'average',
y: data.average(),
lineWidth: 3,
color: 'black',
shadow: false
}}
]
}
I am working with jqPlot's Line chart where data should be displayed for last 12 months. If current month is September then X axis will show 2012 August till 2013 September. However, I have data starting from January 2013. Therefore the lines will start from the middle of the chart till the most recent available month's data.
Problem: Lines are started from the correct position, but the pointables have not moved accordingly. Although the lines show correctly the pointables are shown from beginning of the chart.
Question: How can I move the pointables which should be on the dots instead?
Update: Seems line known issue in jqPlot (issue log)
var json= {
title: ''
,stackSeries: false
,captureRightClick: true
,seriesDefaults:{
//renderer:$.jqplot.BarRenderer
rendererOptions: {
highlightMouseDown: true
}
,pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:null
,hideZeros:true
}
,markerOptions: {
show: true,
style: 'filledCircle',
}
}
,series: [
{label: 'A', color:'#FDC12E'}
,{label: 'B', color:'#C9198D'}
,{label: 'C', color:'#56B9F9'}
,{label: 'D', color: '#F1683C'}
,{label: 'E', color: '#000000'}
]
,axes: {
xaxis: {
tickOptions:{angle:-45}
,tickRenderer: $.jqplot.CanvasAxisTickRenderer
,renderer: $.jqplot.CategoryAxisRenderer
,ticks: []
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
,padMin: 0
,pad: 1.05
,min: 0
,tickOptions:{formatString: '%.0f'},
}
}
,legend: {
show: true
,location: 's'
,placement: 'outsideGrid'
}
,highlighter:{
show: true
,tooltipLocation: 's'
,yvalues: 2
,bringSeriesToFront:true
,showMarker:false
,tooltipAxes: 'y'
,formatString: "%n%s"
}
,cursor:{
show: true
,zoom:true
,showTooltip:false
,constrainZoomTo: 'y'
}
,grid:{
background: '#f8f8f8'
}
I found a workaround until jqPlot fixes their bug. Apparently adding breakOnNull: true to seriesDefaults fixes the issue. This can be used either for pointLabels or for highlighter in JSON part.