I want to show Legends in multiple columns and just one row, but even after setting these properties in Legend rendererOptions, its not getting changed, and showing in only one column.
This is the code I am using:
$(document).ready(function () {
var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
$.jqplot.config.enablePlugins = true;
plot2 = $.jqplot('chart1', obj, {
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 2,
shadow: false,
},
pointLabels: {
show: true,
}
},
series: [
{ label: 'English' },
{ label: 'Hindi' },
{ label: 'Maths' },
{ label: 'Science' },
{ label: 'Computers' },
{ label: 'History' }
],
seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
legend: {
show: true,
location:'s![enter image description here][1]',
placement: 'outsideGrid',
shrinkGrid: true,
rendererOptions: {
numberColumns: 3,
numberRows : 1
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ['FA 1', 'FA 2'],
tickOptions: {
angle: -90,
textColor: "#000000",
showGridline: true
},
},
yaxis: {
min: '0',
max: '100',
renderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
tickOptions: {
textColor: "#000000",
showGridline: true,
formatString: "%d"
}
}
}
});
});
Set renderer: $.jqplot.EnhancedLegendRenderer in Legend options
JSFIDDLE
Code
$(document).ready(function () {
var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
$.jqplot.config.enablePlugins = true;
plot2 = $.jqplot('chart1', obj, {
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 2,
shadow: false,
},
pointLabels: {
show: true,
}
},
series: [
{ label: 'English' },
{ label: 'Hindi' },
{ label: 'Maths' },
{ label: 'Science' },
{ label: 'Computers' },
{ label: 'History' }
],
seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location:'s![enter image description here][2]',
placement: 'outsideGrid',
shrinkGrid: true,
rendererOptions: {
numberRows : 1
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ['FA 1', 'FA 2'],
tickOptions: {
angle: -90,
textColor: "#000000",
showGridline: true
},
},
yaxis: {
min: '0',
max: '100',
renderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
tickOptions: {
textColor: "#000000",
showGridline: true,
formatString: "%d"
}
}
}
});
});
If you set numberColumns : 1 the legend is look like this FIDDLE
It will only show first 3 series
Related
I want to display total of men and woman from learnings table in chart using Chartjs in Laravel.
My controller
public function index()
{
$men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
$women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
$learning = $men_learning + $women_learning ;
return view('home', compact('learning'));
}
My script in blade view.
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['total'],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
How can I propagate loaded statistic from my script to the chart?
public function index()
{
$men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
$women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
return view('home', compact('men_learning', 'women_learning'));
}
<script type="text/javascript">
$(function(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Men', 'Women'],
datasets: [{
label: 'Men',
data: [{!!$men_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(40,167,69,1)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0 ,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(254,86,83,.8)',
},
{
label: 'Women',
data: [{!!$women_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(220,53,69,.8)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(63,82,227,.8)',
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: true,
drawBorder: false,
color: '#f2f2f2',
},
ticks: {
beginAtZero: true,
stepSize: 100,
callback: function(value, index, values) {
return value;
}
}
}],
xAxes: [{
gridLines: {
display: false,
tickMarkLength: 15,
}
}]
},
}
});
});
</script>
I am using jqplot CategoryAxisRenderer for my x-axis data. I need zooming also. But I am able to zoom only y axis. Please suggest a solution. I am new to charts. I searched a lot but didnt get a proper answer. Please provide an answer.
This is my code.
function renderBarChart(){
barChartData = [["abcd",56], ["efgh",60], ["ghij",79],["klmn",20],["opqr",34],["stuv",67],["wxyz",42],["adfg",77],["ghjy",29]];
plot2 = $.jqplot('barChart', [barChartData], {
seriesColors: ["#4fb3ce"],
animate: !$.jqplot.use_excanvas,
highlighter: {
show: true,
showMarker:false,
tooltipLocation:'n',
tooltipOffset: 6,
tooltipContentEditor:tooltip_formatter_bar
},
grid: {
background: '#f7fafa',
drawBorder: false,
shadow: false,
gridLineColor: '#eceeee',
gridLineWidth: 1
},
legend: {
show: false
},
seriesDefaults:{
showMarker:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding: 0,
barMargin: 0,
barWidth:20,
shadowAlpha: 0.04,
shadowOffset:1.5,
highlightMouseOver: false,
dataLabels: 'percent'
},
pointLabels:{
show: true,
ypadding : 5,
color: '#7c7c7c',
}
},
axesDefaults: {
rendererOptions: {
baselineWidth: 1,
baselineColor: '#eceeee',
drawBaseline: true
}
},
axes: {
xaxis: {
showMark: false,
renderer: $.jqplot.CategoryAxisRenderer,
//ticks: barTicks,
//pad: 0,
label:'Associate ID',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelOptions: {
fontFamily: 'Arial',
fontSize: '12px'
},
tickOptions: {
angle: 0,
textColor: '#7c7c7c',
showMark: false,
fontSize: '10px'
}
},
yaxis: {
tickOptions: {
showMark: false,
fontSize: '10px'
},
min:0,
max:100,
tickInterval:10,
label: 'Incident',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
cursor:{
show: true,
zoom:true
}
});
}
Have you tried using contrainZoomTo: 'x'.
cursor: {
show: true,
showTooltip: true,
zoom: true,
constrainZoomTo: 'x'
},
I am using jqplot to create a graphic.
I have an issue about the nonexisting values.
I create a graphic with 5 lines as shown http://www.popularjava.net/wp-content/uploads/statisticGraphic.png
As you see from the picture, there is only one value for some lines such as orange line.
However, I would like to show such nonexisting values with y=0.
I mean, I want to put y=0 for all dates if there is no point for any date.
Here is my code.
var minGraphicXValue = response.minGraphicXValue;
var maxGraphicXValue = response.maxGraphicXValue;
var dataSeriesList = response.dataSeriesList;
var plot1 = $.jqplot('countGraphicGrid', response.countArray, {
title: 'Count/Time Graphic - ' + selectedItemType + ":" + itemValue + " - " + StatisticGraphic.selectedGraphicPeriod,
axes: {
xaxis: {
label: "Time",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Helvetica',
fontSize: '14pt'
},
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: StatisticGraphic.tickFormatPattern,
angle: -30
},
tickInterval: StatisticGraphic.tickIntervalTime,
min: minGraphicXValue,
max: maxGraphicXValue,
drawMajorGridlines: false
},
yaxis: {
label: "Count",
tickOptions: {
formatString: '%d'
},
min: 0,
max: 100,
autoscale: true
}
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
},
showMarker: true
},
series: dataSeriesList,
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipOffset: 9
},
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#666666',
gridLineWidth: 1
}
});
I think the best way to do it is to format your data before your render them on your plot.
I mean add values for your nonexisting ones. You can use your (min|max)GraphicXValue and set them to 0 if non existing.
Is it possible for jqplot to have two y axis for one series in line chart: one for decimal values another for percentages?
Here is my code. There are two lines and their values are in percentages. I need to show two y-axis.
var irr1 = [['2008-09-30', -100], ['2008-10-30', -99.81], ['2008-11-30', -95.73],
['2008-12-30', -80.28], ['2009-01-30', -56.67], ['2009-02-28', -41.54],
['2009-03-30', -30.33], ['2009-04-30', -23.31], ['2009-05-30', -19.93],
['2009-06-30', -8.57], ['2009-07-30', 0.14], ['2009-08-30', 11.24], ['2009-09-30', 20.35]];
var irr2 = [['2008-09-30', -100], ['2008-10-30', -99.10], ['2008-11-30', -86.44], ['2008-12-30', -60.00], ['2009-01-30', -34.43],
['2009-02-28', -20.80], ['2009-03-30', -12.54], ['2009-04-30', -7.88], ['2009-05-30', -5.52],
['2009-06-30', -0.96], ['2009-07-30', 2.09], ['2009-08-30', 5.47], ['2009-09-30', 7.92]];
var data = [irr1, irr2];
var plot1 = $.jqplot(elem.attr('id'), data, {
animate: true,
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
//title: 'Default Date Axis',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'n',
placement: 'outsideGrid',
//shrinkGrid: true,
rendererOptions: {
numberRows: 1
}
},
//legend: {
// renderer: $.jqplot.EnhancedLegendRenderer,
// show: true,
// rendererOptions: {
// numberRows: 1
// }
//},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%Y-%m-%d' },
min: '2008-09-01',
tickInterval: '1 month'
}
},
series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
series: [
{ label: 'IRR' },
{ label: 'MIRR' }
],
});
Does anyone see the problem in my code why this border apears?
I know that asking for the solution of a problem is not "best practice" but I have wasted some hours already and could not fix it...
I'm sure its just a simple config problem I just can not see but someone with more practice in jqplot can find in a few seconds...
Here is the code I'm using:
jQuery.jqplot(this.getNonHasheContainerName(), chartDrawingData, {
animate: false,
seriesColors: barChartColors,
seriesDefaults: barChartSeriesDefaults,
grid: ChartGridDefaults,
series: this.getBarChartSeriesLabels(chartMetadata.series),
legend: barChartLegendDefaults,
title: { show: false },
axes: barChartAxisDefaults(ticks, chartMetadata.showGrid)
});
var barChartColors = ['#9FC0DF', '#EFAD81'];
var barChartSeriesDefaults = {
renderer: jQuery.jqplot.BarRenderer,
rendererOptions: {
barMargin: 10,
highlightMouseOver: true,
animation:
{
speed: 2500
}
},
pointLabels: { show: true },
shadow: false
};
var barChartLegendDefaults = {
show: true,
location: 'e',
placement: 'outsideGrid'
};
var barChartAxisDefaults = function (ticks, showGrid) {
return {
xaxis: {
show: false,
renderer: jQuery.jqplot.CategoryAxisRenderer,
tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions: {
angle: 45,
fontSize: "11px",
showGridline: false,
showMark: true,
//labelPosition: 'end',
mark: 'inside',
markSize: 10
},
},
yaxis: {
show: false,
min: 0,
tickOptions: {
showMark: false,// showGrid,
showLabel: false,// showGrid,
showGridline: false,
tickInterval: 1,
formatString: '%d',
//borderWidth: 1
},
},
x2axis: {
show: false
},
y2axis: {
show: false
}
};
};
var ChartGridDefaults = {
shadow: false,
background: '#ffffff',
borderWidth: 1,
drawGridlines: false,
drawBorder: false
};
var pieChartSeriesDefaults = {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: true,
sliceMargin: 2,
lineWidth: 5
},
shadow: false
};
var pieChartLegendDefaults = {
show: true,
location: 'e'
};
I HAVE GOT IT!!!
There is an other hidden (or i have overseen it in the documentation...) setting for the renderer:
yaxis: {
show: false,
min: 0,
tickOptions: {
showMark: false,// showGrid,
showLabel: false,// showGrid,
showGridline: false,
tickInterval: 1,
formatString: '%d',
},
**rendererOptions: {
drawBaseline: false
}**
}