I have a morris.js graph. I have a table with 3 columns id with values such as 1,2,3 etc, usernames with values such as sophie, nick, Paul etc and timesloggedin with values such as 69, 58, 4 etc.
I created a chart that has the ids on x and the timesloggedin on y.
What I want is instead of displaying the id number on the bottom of the chart under the bars, to have their usernames. You can see the chart here:
http://kleanthisg.work/chartsnew2.php
CODE:
http://kleanthisg.work/CODE.TXT
table:
user list:
You need to provide the username and set it as xkey
Morris.Bar({
element : 'chart_line_1',
data:[{ id:'1', timesloggedin:65, username: 'Paul'},
{ id:'5', timesloggedin:10, username: 'John'},
{ id:'7', timesloggedin:4, username: 'Steve' }],
xkey:'username',
ykeys:['timesloggedin'],
labels:['timesloggedin'],
hideHover:'auto',
});
Related
Afternoon all, I'm trying to compare two SQL columns values against each to work out the percentage and then display this output in Google charts
I have the following query..
SELECT Count(lineAudited) as total_count, 121 as total_required FROM SMT_24_Point_Check.dbo.auditRecord which displays two columns, one value is 111 and the second column is 121, therefore the percentage is 91%, When I try to input this query into Google Chart, it's only displaying the second columns value
This displays two columns, one value is 111 and the second column is 121, therefore the percentage is 91%, When I try to input this query into Google Chsart, it's only displaying the second columns value
function drawChartCategory() {
var data = google.visualization.arrayToDataTable([
['total_count', 'total_required'],
<?php
while($row = odbc_fetch_array($result1))
{
echo "['".$row["total_count'"]."', ".$row["total_required"]."],";
}
?>
]);
var options = {
title: 'Total audits completed',
width: 900,
height: 500,
backgroundColor: '#E8E8E8',
pieSliceText: 'value',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechartCategory'));
chart.draw(data, options);
}
How can I get it to show a segment of 91% and 9%?
check the data format for a PieChart
there should be two columns for each row / slice.
first column should be a string for the name of the slice,
the second a number for the value.
as such, try formatting your data as follows...
'Required', 111
'Not Required', 10
you cannot add the total as a slice or it will throw off the percentage.
while($row = odbc_fetch_array($result1))
{
echo "['Required', ".$row["total_required"]."],";
echo "['Not Required', ".($row["total_count'"] - $row["total_required"])."],";
}
Let's say I have an array of users:
usersData = [
{ id: 21, name: 'John Dean' },
{ id: 3, name: 'Mike Brine' },
{ id: 6, name: 'Tom Kalvi' }
]
names in userData are generated from another array with full user information: user.first_name + user.last_name
When I build Vue-Chart Bar, labels array store this data with indexes:
labels = { 0: "John Dean", 1: "Mike Brine", 2: "Tom Kalvi" }
And when I want to get original ID from Bar event onClick, I receive only index.
I need to load additional information for each user based on Bar click, but I need to have original ID.
What is the easiest way to get it?
Thank you in advance
Well if you have an index clicked just do like this:
usersData[clickedIndex].id
I have a collection of mongodb, which contains "MoviesID, UserID, Rating", so this is to describe the how the users rate different movies, and a user can rate different movies, and certainly a movie can be rated by different users. Now I want to find all the users who rate similar movies with target user(For example : user 5). Rating similar movies means that they rate at least same movie, or more. So how should I find all the users who rate similar movie with user 5? I just start learning mongodb. Thanks!
Let's say you have a collection like this:
{
movie: 1,
user: 1,
rating: 5
}, {
movie: 2,
user: 5,
rating: 5
}, {
movie: 3,
user: 5,
rating: 3
}
What you can do here is to find all the movies that is rated by user 5, like this:
db.collection.distinct("movie", { user: 5 }, function(err, movies) {
// Will return array of distinct values for movies, where user is equal to 5.
// From our collection above, this query will return [ 2, 3 ].
})
then:
db.collection.find({ movie: { $in: movies } }, function(err, result) {
// Then we'll find the documents where movie is in the movies which
// returned on our first query.
// This will return [{ user: 5, ... }, { user: 1, ... }]
})
I can only think of doing this in two queries. I'm still thinking if this can be done by using aggregate.
I hope this helps.
To query data from MongoDB collection, you need to use MongoDB's find() method.
The basic syntax of find() method is as follows −
>db.COLLECTION_NAME.find()
I have two different JSON structures. One represent the individual users of the system and other represents groups made of these users. So, I created two memory stores with these (each has different idProperty - userId and groupId, respectively).
I have a filteringSelect dropdown and my requirement is to add both of these as the data store of the list, so that either a valid user or a valid group could be selected from the dropdown.
Two possible ways I could think of doing this :
1) by creating one common memory store of two JSONs - but idProperty is different so not sure how this is possible
2) by adding both the memory stores to the widget but again different idProperty so not sure.
I am very new to using Dojo so any help would be really appreaciated. Thanks in advance!
I think that, if you use a store to represent something (model data), it should be formed so that it can be used properly within a widget.
So in your case I would add both of them to a single store. If they have a different ID (for example when it's a result of a back-end service), then you could map both types of models into a single object structure. For example:
var groups = [{
groupId: 1,
groupName: "Group 1",
users: 10
}, {
groupId: 2,
groupName : "Group 2",
users: 13
}, {
groupId: 3,
groupName : "Group 3",
users: 2
}];
var users = [{
userId: 1,
firstName: "John",
lastName: "Doe"
}, {
userId: 2,
firstName: "Jane",
lastName: "Doe"
}, {
userId: 3,
firstName: "John",
lastName: "Smith"
}];
require(["dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/_base/array", "dojo/domReady!"], function(Memory, FilteringSelect, array) {
var filterData = array.map(groups, function(group) {
return {
id: "GROUP" + group.groupId,
groupId: group.groupId,
name: group.groupName,
type: "group"
};
});
Array.prototype.push.apply(filterData, array.map(users, function(user) {
return {
id: "USER" + user.userId,
userId: user.userId,
name: user.firstName + " " + user.lastName,
type: "user"
};
}));
});
In this example, we have two arrays groups and users, and to merge them I used the map() function of dojo/_base/array and then I concatenated both results.
They still contain their original ID and a type, so you will still be able to reference the original object.
From my previous experiences, I learned that your model data should not represent pure business data, but data that is easily used in the view/user interface.
By giving both arrays a similar object structure, you can easily use them in a dijit/form/FilteringSelect, which you can see here: http://jsfiddle.net/ut5hjbyb/
How can I write a dijit autocomplete combo box that contains multiple columns, such as this...
john, doe, cod 13, street sample 1
steve, smith, cod 14, street sample 2
micheal, james, cod 14, street sample 3
This is my code:
var filteringSelect = new dijit.form.ComboBox({
id: "managerSelect",
name: "managers",
value: "",
store: managerStore,
searchAttr: "serial"
},
"managerSelect");
}
However it only shows a single column like this:
john
steve
micheal
If I understand correctly,you need to override "labelFunc" for combo box. E.g.
// define combo box
var filteringSelect = new dijit.form.ComboBox({
id: "managerSelect",
name: "managers",
value: "",
store: managerStore,
searchAttr: "serial",
labelFunc:"myLabelFunc"
},
"managerSelect");
}
// define labelFunc
function myLabelFunc(item, store){
var label=store.getValue(item, 'first')+","+store.getValue(item, 'last');
return label;
}
HTML page - Example