So, I was looking for a way to do this and found this post, but it only works for vertical bars chart. Does anybody knows what changes I need to do on the code so it can work with horizontal chart?
Pierre,
Can't get it running =/. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<!--Morris Chart CSS -->
<link rel="stylesheet" href="assets/plugins/morris.js-0.6.4/morris.css">
</head>
<body>
<div id='myfirstchart'></div>
<!--Morris Chart-->
<script src="assets/plugins/morris.js-0.6.4/examples/lib/raphael.min.js"></script>
<script src="assets/plugins/morris.js-0.6.4/morris.min.js"></script>
<script>
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on the chart.
data: [
{ year: '2014', value: 20 },
{ year: '2015', value: 10 },
{ year: '2016', value: 5 },
{ year: '2017', value: 5 },
{ year: '2018', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the chart.
labels: ['Value']
});
</script>
</body>
</html>
Related
I have a datatable, in which there is valid tasks and non-valid tasks. I have the table working otherwise just fine, but issue is that I want to color rows that are non-valid as red so that users will know to fix them (no, fixing them on my end does not work).
I had read that item-class prop would work, however it does not seem to work in my case?
Here is the data-table setup:
<v-data-table
disable-pagination
hide-default-footer
:headers="headers"
:items="tasks"
:hide-default-header="tasks == 0"
:item-class="getRowClass"
>
In methods:
getRowClass(val) {
if(val.in_use && !this.isTaskValid(val)){
return 'invalid-row';
}
},
In styles:
.invalid-row {
background-color: rgb(255, 0, 0) !important;
}
If I use console.log to test out, I can see that getRowClass correctly identifies when the task is valid and when not, so it will enter correct if statement. However, I still do not see any rows colored red. I have read that other alternative is to replace entire section if <tr> and <td> tags, but I feel that kinda breaks the whole idea of using vuetify, especially since I need to specify each column separately now.
EDIT
I am using Vuetify 2.6.12 and Vue 2.6.14
You need something like this
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Task',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Valid/not valid', value: 'isValid' },
],
tasks: [
{
id: 1,
name: 'This is task 1',
isValid: false,
},
{
id: 2,
name: 'This is task 2',
isValid: true,
},
{
id: 3,
name: 'This is task 3',
isValid: false,
},
{
id: 4,
name: 'This is task 4',
isValid: true,
},
],
}
},
methods: {
getRowClass(item) {
if(item.isValid== false){
return 'red'
}
},
},
})
.invalid-row {
background-color: red !important;
border-color: red !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="tasks"
class="elevation-1"
:item-class="getRowClass"
>
</v-data-table>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I am trying to use tail.select from https://github.com/pytesNET/tail.select.
On the first page load its running well like what I want.
but when I call the row.add method from datatables, each dropdown not working anymore.
Hope somebody can help me to solve this issue.
Best Regards
Thankyou.
In the question's code, I assume that $('#master-row').html() is returning a fragment of HTML - possibly the contents of a <td>.
However, the DataTable row.add() function expects a JavaScript data structure - a JS array or object.
You can provide a variable containing "master row" data using something like this:
var masterRow = [
"",
"<select class=\"select2\"><option>first</option><option>second</option><option>third</option></select>",
"<textarea rows=\"3\" cols=\"20\"></textarea>"
];
It doesn't have to be hard-coded JS like this. It could also be sourced from an ajax call. But for this demo, I will use the above approach.
You can now use this "master row", containing three column values, as follows:
Here is the full HTML page for the demo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- tail.select -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tail.select#latest/css/tail.select-default.css" />
<script src="https://cdn.jsdelivr.net/npm/tail.select#latest/js/tail.select.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<button type="button" class="btn-add">New Row!</button>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
</div>
<script type="text/javascript">
var masterRow = [
"",
"<select class=\"select2\"><option>first</option><option>second</option><option>third</option></select>",
"<textarea rows=\"3\" cols=\"20\"></textarea>"
];
var dataSet = [];
dataSet.push(masterRow);
$(document).ready(function() {
var table = $('#example').DataTable( {
data: dataSet,
paging: false,
searching: false,
ordering: false,
columnDefs: [
{
targets: 0,
title: "Num",
render: function(data, type, row, meta) {
console.log(data);
return meta.row + 1;
}
},
{
targets: 1,
title: "Select Column"
},
{
targets: 2,
title: "Textarea Column"
}
]
}).on('draw', function() {
tail.select(".select2", {
search: true
});
});
table.draw();
$('.btn-add').click(function() {
table.row.add(masterRow).draw();
});
} );
</script>
</body>
</html>
Notes:
The dataSet variable takes the master row array and adds it into another outer array. This is needed so that we have a full 2-dimensional data structure for DataTables to use when it first loads the table. It is a 2D structure, but with only one (initial) row of data:
When we click on the "new row" button, it uses the masterRow variable as its source for the contents of the new row, resulting in this:
As you can see, the table has a new row, and the drop-downs are working as expected.
You can see the official documentation here for more details about the row.add() API call.
I would like to display multiple items in a bootstrap-vue b-table. Is it possible to do so with a stacked table? The documentation only shows examples of stacked tables with a single item.
How would I specify the fields or items? This does not work. This code creates a stacked table with two columns (column headers on the left and values on the right). Instead of displaying the two items side by side on the left half of the table, the column headers repeat and everything is organized in the same 2 vertical columns.
<template>
...
<b-table
small
stacked
:fields="fooParameters"
:items="foos"
:busy="true"
show-empty
empty-text="No duplicates"
>
</b-table>
...
</template>
<script>
...
duplicates: [{fooName: "Alice", fooAge: "25"}, {fooName: "Bob": fooAge: "24"}]
...
</script>
The stacked prop will generate a row for each item, but since that's not what you're looking for, you will have to create the functionality of having items be horizontal each having they own column.
I believe the below snippet is what you're looking for, and if not you can maybe use it as a starting reference.
new Vue({
el: "#app",
computed: {
fields() {
//'isRowHeader: true' to render it as a TH instead of TD
// Formatter to capitalize the first letter, can be removed
let fields = [{
key: "type",
stickyColumn: true,
isRowHeader: true,
formatter: this.ucFirstLetter
}];
Object.keys(this.results).forEach((key) => {
// Since the key is just an index, we hide it by setting label to an empty string.
fields.push({
key: key,
label: ""
});
});
return fields;
},
items() {
const items = [];
/* map our columuns */
const cols = Object.keys(this.results);
/*
map our types based on the first element
requires all the elements to contain the same properties,
or at least have the first one contain all of them
*/
const types = Object.keys(this.results[cols[0]]);
/* create an item for each type */
types.forEach((type) => {
const item = {
type: type
};
/* fill up item based on our columns */
cols.forEach((col) => {
item[col] = this.results[col][type];
});
items.push(item);
});
return items;
}
},
data() {
return {
results: [{
correct: 0.007,
errors: 0.081,
missing: 0.912
},
{
correct: 0.008,
errors: 0.098,
missing: 0.894
},
{
correct: 0.004,
errors: 0.089,
missing: 0.91
},
{
correct: 0.074,
errors: 0.07,
missing: 0.911
}
]
};
},
methods: {
ucFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
});
<link href="https://unpkg.com/bootstrap#4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table :items="items" :fields="fields" small bordered striped sticky-header no-border-collapse responsive>
</b-table>
</div>
I have defined dgrid and a button for removing row:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
});
});
</script>
</body>
</html>
The dgrid shows up, you can sort it, edit name or value.
The problem is, that when you click on the "remove" button, row is deleted, but then, at the end of the gird is 9x written: "No data found" and the dgrid stops to work (you cant delete any other row).
If you set showLoadingMessage: to true, then everything works without a problem.
Edit: I have simplified the example. Problem persists.
The grid may have been encountering error while updating the row data after the row has been removed. As the editor tries to update the row after the button loses focus. Try using the grid.removeRow method to remove the row. It might still encounter some other issues, but worth a try.
Editor might not be the best solution to achieve what your are trying to do.
User renderCell to add button to the grid, to remove the row/record. This might be a better solution.
Update: Just refresh the grid that should solve the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
grid.refresh();
});
});
</script>
</body>
</html>
I am trying to put a dojo dgrid into a titlepane as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<link rel="stylesheet" href="/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="/dojo/dgrid/css/dgrid.css">
<link rel="stylesheet" href="/dojo/dgrid/css/skins/claro.css">
<link rel="stylesheet" href="/dojo/dijit/themes/claro/claro.css">
<!-- this configuration assumes that the dgrid package is located
on the filesystem as a sibling to the dojo package -->
<script src="/dojo/dojo/dojo.js">
data-dojo-config={async: true, parseOnLoad: true}
</script>
<script>
require(["dijit/TitlePane", "dgrid/Grid", "dojo/domReady!"], function(TitlePane,Grid){
var data = [
{ first: "Bob", last: "Barker", age: 89 },
{ first: "Vanna", last: "White", age: 55 },
{ first: "Pat", last: "Sajak", age: 65 }
];
var grid = new Grid({
columns: {
first: "First Name",
last: "Last Name",
age: "Age"
}
}, "grid");
grid.renderArray(data);
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1'">
<div id="grid"></div>
</div>
</body>
</html>
And I am just not getting the TitlePane to show up. The grid shows up nicely. Any ideas what I am doing wrong here?
Ultimately I am going to be generating a page with a number of grids on it, and looking fora nice way to put the grids into containers...
When I put in "dojo/parser" it worked for me:
<script>
require(["dijit/TitlePane", "dojo/parser","dgrid/Grid", "dojo/domReady!"],
function(TitlePane, parser, Grid) {
parser.parse();
var data = [{
first : "Bob",
last : "Barker",
age : 89
}, {
first : "Vanna",
last : "White",
age : 55
}, {
first : "Pat",
last : "Sajak",
age : 65
}];
var grid = new Grid({
columns : {
first : "First Name",
last : "Last Name",
age : "Age"
}
}, "grid");
grid.renderArray(data);
});
</script>