Related
I am using keentheme's Metronic admin template. It has KTDatatables. I can see page length options now as:
5, 10, 30, 50, 100
I want to change it to, to show all records:
5, 10, 30, 50, 100, All
My datatable code:
var datatable = $("#attendance_datatable").KTDatatable({
data: {
type: "remote",
source: baseUrl + "/Hrms/AttendanceManagement/getEmployeesAttendance/",
pageSize: 10,
},
layout: {
scroll: true,
footer: false,
},
sortable: true,
pagination: true,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"],
],
search: {
input: $("#attendance_datatable_search_query"),
key: "generalSearch",
},
columns: [
{
field: "emp_name",
title: "Employee Name",
width: 120,
},
{
field: "attendance_date",
title: "Date",
width: 85,
},
],
});
};
I have tried following:
https://datatables.net/examples/advanced_init/length_menu.html
Change lengthMenu option
lengthMenu: [
[5, 10, 30, 50, 100, -1],
[5, 10, 30, 50, 100, "All"],
],
This should work
I edited as below and it worked code.
You changes "lengthMenu" -> toolbar needs to be added, changes it as follows to chage the pagination.
toolbar: {
// toolbar placement can be at top or bottom or both top and bottom repeated
placement: ['bottom'],
// toolbar items
items: {
// pagination
pagination: {
// page size select
pageSizeSelect: [5, 10, 20, 30, 50, 999], // display dropdown to select pagination size. -1 is used for "ALl" option
},
}
}
I am trying to build a stacked bar chart using c3.js.
The issue I have is that the bars that get generated are not coralated to the Y axis.
This is what I have so far: https://codepen.io/anon/pen/dZLMoY?editors=1010
And this is the code:
c3.generate({
bindto:'#chart',
data: {
type: 'bar',
columns: [
['Column 1', 2, 10, 22, 34, 9, 60],
['Column 2', 6, 15, 43, 36, 45, 75],
['Column 3', 10, 20, 79, 39, 50, 97],
['Column 4', 12, 27, 87, 76, 55, 150]
],
groups: [
['Column 1', 'Column 2', 'Column 3', 'Column 4']
],
},
bar: {
width: 15,
},
axis: {
x: {
show: true
},
y: {
show: true,
padding: {
top: 0,
bottom: 0
},
tick: {
//count: 6
},
min: 0,
max: 150
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
As you can see the bar chart is generated but it is not generated correctly. The last 4 bars are all equal even if the values that are provided are not.
Taking into consideration that the Y axis has the maximum value set to 150 then the 2nd, 3rd and 4th bars should not ocupy the same height as the 5th bar
What am I doing wrong?
Your axis.y.max value is less than stacked sum, so chart is clipped at the top.
Try this:
c3.generate({
...
axis: {
...
y: {
...
min: 0,
max: 500
}
}
}
Or see it in action.
I have create a simple XY Chart graph with percent as y axes and customers as x axes, I randomised the data between 0...100% with a set of 184 points. and have a bit of difficulty display the lower/upper region values. I have included an image for the demonstration.
Here my config file, I cant seem to find some sort of offset/padding ?
{
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineColorField: 'color',
}],
valueAxes: [
{
title,
borderThickness: 0,
axisThickness: 2,
maximum: 100,
labelFunction: (e,val) => { return val + "%"; },
},
{
title,
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
};
Thanks.
There isn't a way to pad this without modifying your minimum and maximum to be further outside your 0-100 range to accommodate. Since you're using a labelFunction, you can set it up so that you don't display any labels above and below 0-100% if you want, for example:
labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }
Demo below using -10 as a minimum and 110 as a maximum:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
If you want to remove the extra grid lines from the additional points generated by the new minimum and maximum, you'll have to use guides as your grid lines and labels instead of the ones auto-generated by the chart. For example:
valueAxes: [{
guides: [{
"value": 0,
"label": "0%",
"lineAlpha": .2,
"tickLength": 5
},
// repeat for each tick/grid line
],
"gridAlpha": 0,
"tickLength": 0,
"labelsEnabled": false,
// ...
Demo:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
guides: [{
value: 0,
label: "0%",
lineAlpha: .2,
tickLength: 5
},{
value: 20,
label: "20%",
lineAlpha: .2,
tickLength: 5
},{
value: 40,
label: "40%",
lineAlpha: .2,
tickLength: 5
},{
value: 60,
label: "60%",
lineAlpha: .2,
tickLength: 5
},{
value: 80,
label: "80%",
lineAlpha: .2,
tickLength: 5
},{
value: 100,
label: "100%",
lineAlpha: .2,
tickLength: 5
}],
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
I have a problem, I need to set kendo pie chart in Kendo grid with Asp.net mvc.
I have a grid that i want to set a pie chart in one of columns in client template.
Can i do it?If Yes How?
Tnx
Please refer the below forum on telerik in which a jsfiddle sample is provided for what you are looking for
Telerik Forum Link
Sample JS Fiddle
Try with like this
#(Html.Kendo().Grid<Model>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("method", "controller"))
)
.Pageable()
.Sortable()
.Scrollable()
.Events(e => e.DataBound("dataBound"))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Columns(columns =>
{
columns.Bound(p => p.ID).ClientTemplate("<div class='chart'></div>");
})
)
and script is
function dataBound() {
var grid = this;
grid.tbody.find("tr[role='row']").each(function () {
var model = grid.dataItem(this);
$(this).find(".chart").kendoChart({
title: {
text: "Olympic Medals won by USA"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
name: "Gold Medals",
data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
color: "#f3ac32"
}, {
name: "Silver Medals",
data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
color: "#b8b8b8"
}, {
name: "Bronze Medals",
data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
color: "#bb6e36"
}],
valueAxis: {
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
});
}
I had a special requirement. To make a single horizontal column inside a table. I thought that having a chart per table would be overkill so I customised the grid component. Basing it on a simple Html table styling it with some CSS and using KendoUI to make it into a grid.
This might be helpful if you want something very specific.
Visual example:
Here's a working example:
http://embed.plnkr.co/Hy2u4d/
For me Highcharts graphs are not showing in Internet Explorer. I searched and saw that extra comma might be a problem but I don't find extra comma in my script.
Following fiddle showing highcharts initialization part only.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
text: 'Reference: WHO Child Growth Standards (Birth-2 years in percentiles).'
},
xAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
gridLineWidth: 1,
gridLineColor: 'lightgray',
gridLineDashStyle: 'longdash',
title: {
text: 'Age (Completed months and years)'
}
},
yAxis: {
gridLineWidth: 1,
gridLineColor: 'lightgray',
gridLineDashStyle: 'longdash',
title: {
text: 'Length (cm)'
},
tickInterval: 5,
allowDecimals: false,
min: 45,
max: 95
},
plotOptions: {
spline: {
marker: {
radius: 0,
lineColor: '#666666',
lineWidth: 1
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0,
reversed: true,
y: 30,
width: 200,
itemMarginTop: 6,
itemMarginBottom: 6
},
exporting: {`enter code here`
enabled: false
}
});
http://jsfiddle.net/aparnaunny/RzyY8/
The problem I found is the version of jQuery, which for some reason makes errors on INternet Explorer.
Try an older version, e.g. jQuery 1.9.1
For me that worked
http://jsfiddle.net/RzyY8/2/
jQuery 1.9.1
In gerenal you should run jsfiddle.net/aparnaunny/RzyY8/1/show because fiddles are not supported by ie8. Secondly run your console in the ie8, and you will see that the prbolem is in the line 361.
if(age==2.0)
{
$("#median").append('Median height for this age is 87.1161 cm');
ind=malearr24.indexOf(height);
if(ind=='-1')
{