Related
I am having a problem with chart.js and a doughnut type chart. I want to apply some offset/margin or other solution for the margin between chart and labels. Please view the below image for the issue.
var chart1;
var config1 = {
type: 'doughnut',
data: {
labels: ["NPD Brief", "Gate 1", "Gate 2", "Gate 3"],
datasets: [{
data: [2, 3, 5, 4], // Specify the data values array
borderColor: ['#ffffff', '#ffffff', '#ffffff', '#ffffff'], // Add custom color border
backgroundColor: ['#2453ed', '#5b7ef2', '#91a9f6', '#c8d4fa'], // Add custom color background (Points and Fill)
borderWidth: 2 // Specify bar border width
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
legend: {
display: false,
position: 'left',
},
plugins: {
labels: [{
render: 'label',
position: 'outside',
//arc: true,
}, {
render: 'value',
fontColor: '#ffffff',
}]
},
title: {
display: true,
//text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
I am generating stacked bar chart using JQPlot where few stacks could have O values. my requirement is that I don't want to show O level of that stat which value is 0. please let me know what JQPLOT API I should use for that
My Code :
function getChart2()
{
var s1 = [32.40, 80.00, 80.00, 16.94, 72.12, 78.10, 80.00];
var s2 = [0.00, 12.34, 3.68, 0.00, 0.00, 0.00, 15.67];
var ticks = ['A', 'B', 'C', 'D','E','F','G'];
plot3 = $.jqplot('chartdiv', [s1, s2], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true, barDirection: 'horizontal'
},
pointLabels: {show: true}
},
axes: {
xaxis: {
pad: 1.05,
tickOptions: {formatString: '%.2f %'},
formatter:function() {if(this.x > 0.00) {
return this.x;
} }
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
}
I used hideZeros:true option for this and it is working now.
pointLabels: {show: true,hideZeros:true,labelsFromSeries:true,xpadding: 6}
Hey guys thanks for helping me
I managed to solve my problem
i used it for to solve my problem:
stackSeries: true,
captureRightClick: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true,
barWidth: 40,
},
pointLabels: {
show: true,
formatString: '%s',
formatter: function val(x, y) {
//my Solution
if (y != 0)
return y.toString().toHHMMSS();
},
},
},
Currently working with stack bar chart in jqplot. How to remove bar label, when bar size is smaller than label text?
Fiddle Link
$(document).ready(function(){
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"];
var legendValues = ["series1", "series2", "series3", "series4"];
var pLabels1 = ['70%','38%','71%','28%'];
var pLabels2 = ['27%','49%','27%','44%'];
var pLabels3 = ['2%','10%','2%','17%'];
var pLabels4 = ['1%','4%','1%','12%'];
var group4 = [52,528,129,264];
var group3 = [94,1388,394,401];
var group2 = [1446,7130,5591,1004];
var group1 = [3772,5512,14957,633];
var series = [
{ pointLabels: { labels: pLabels4 }},
{ pointLabels: { labels: pLabels3 }},
{ pointLabels: { labels: pLabels2 }},
{ pointLabels: { labels: pLabels1 } }];
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], {
stackSeries: true,
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true},
pointLabels: {
show: true, stackedValue: true, location: 'w', hideZeros: true
}
},
axes: {
xaxis: {
tickOptions: {
show: true,
mark: 'cross',
formatString: "%'d",
showGridline: true
},
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
shadowWidth: 0,
borderWidth: 0,
background: 'rgba(0,0,0,0)',
shadow: false
},
series: series
});
});
In the above picture, last bar has value as 2% which is displaying outside the bar. How to remove these type of elements while displaying outside bar?
there is a specific property for adjusting what you need:
edgeTolerance
with which you can set the minimum pixels distance between label and bar margin.
For instance...
pointLabels: {
show: true,
stackedValue: true,
location: 'w',
hideZeros: true,
edgeTolerance: 10
}
Is it possible to make the graph using jqplot, as given below? The closest possible graph to this is stacked but using that coloring as well as point labels are a problem.
This jsfiddle contains my effort to make this bar chart along with it's legend and point labels. So is it possible to make it look like the image.
var barchart = $.jqplot('chart1', [s1, s2, s3], {
animate: true,
grid: {
background: 'white',
drawBorder:false,
shadow: false
},
seriesColors: ['#73C6E8', '#F28570', '#727272'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 20,
barWidth: 25,
barMargin:10,
fillToZero: true
},
pointLabels: { show: true }
},
series: [
{ label: 'USA' },
{ label: 'India' },
{ label: 'South Africa' }
],
legend: {
show: true,
placement: 'outsideGrid',
location:'se',
background:'white',
border: 'white',
fontFamily: 'Gotham Medium',
fontSize:'12px',
renderer: $.jqplot.EnhancedLegendRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:xticks,
showTicks:false
},
yaxis: {
pad: 1.05,
ticks: yticks,
showTicks:false,
rendererOptions: {drawBaseline: false}
}
}
});
I believe it would be much easier to achieve with highchart: http://www.highcharts.com/demo/column-stacked
This is only stack bar example you customize everything, legend, color, size, label, etc etc.
good luck
I would like to provide tickInterval on jqPlot chart renderer to get linear distribution on xaxis.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
} PlotChart(chartData);
jsfiddle example
Above is an example of the chart how it currently look.
I would like to provide the points 1, 5, 10, 15, 20 on the xaxis (tickInterval - 5) and in relation to 1,3,5,15 plots needs to be in coordinate plane to map the values [[1, 224], [3, 672], [5, 1120],[15,2240]]
Where currently its distributed as per the xticks which is uneven. Any help is welcome!
I tried to get it using min/max and tickInterval property, but seems like its not coming up fine.
If you want to provide tickIntervals on your x-axis then you can do it this way.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
min:0,
max:20,
tickInterval:5,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData);
jsFiddle link
You can calculate min, max and tickInterval before plotting the graph.
I hope this helps.
By NOT using renderer: $.jqplot.CategoryAxisRenderer you'll get it going your way