Is there anyway that we can show milliseconds of vis timeline in points for ex: 0.2 instead to 200 and 0.00 istead of 000
The format of the time axis can be controlled with the format configuration option, this is described in this section of the documnetation. Full details on the supported formatting syntax can be found in the moment.js documentation. If the syntax you'd like isn't supported you can write your own function to complete the formatting.
From your description I believe you'd like to display in the format <second>.<fractional seconds>. This would be achieved with the millisecond format s.SSS.
An example options object for vis-timeline with this option set:
var options = {
format: {
minorLabels: {
millisecond: 's.SSS',
}
}
};
Code snippet with this option set:
// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: "item 1", start: "2022-07-20 13:52:10.001"},
{id: 2, content: "item 2", start: "2022-07-20 13:52:10.250"},
{id: 3, content: "item 3", start: "2022-07-20 13:52:11.100"},
{id: 4, content: "item 4", start: "2022-07-20 13:52:10.000", end: "2022-07-20 13:52:10.900"},
{id: 5, content: "item 5", start: "2022-07-20 13:52:10.800"},
{id: 6, content: "item 6", start: "2022-07-20 13:52:10.990", type: "point"},
{id: 7, content: "item 7", start: "2022-07-20 13:52:10.000", end: "2022-07-20 13:52:11.200"},
]);
// Configuration for the Timeline
var options = {
format: {
minorLabels: {
millisecond: 's.SSS',
}
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
body,
html {
font-family: sans-serif;
}
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<div id="visualization"></div>
Related
I receive an array of product objects like such from my backend.
products = [
{id: 1, price: 10, category: "food", name: "apples"},
{id: 2, price: 5, category: "supplies", name: "spoons"},
{id: 3, price: 15, category: "pets", name: "cat treats"},
{id: 4, price: 9, category: "food", name: "oranges"},
// ...
]
I am looking to render all my products as strips based on their category in a specific order of priority (similar to how Netflix aligns their shows). I don't want them displayed in random order, such as the category strip of food being at the top, the next category strip being pets, etc.
I currently decided to create a map object since it keeps order as followed:
let filteredProducts = new Map([
["food", []],
["pets", []],
["supplies", []],
// ...
])
for (let product of products) {
let category = product["category"]
filteredProducts.get(category).push(product)
}
The goal is to then iterate through the map object and return multiple React Component of category strips from top to bottom.
My question is, I can't help but feel that there are more efficient ways to render this as I don't see map objects being utilized commonly. Are there more efficient and frequently used ways to filter and render by priority or is this in the right direction?
I do believe there is more easier way to do this using Array sort function.
Please consider the snippet below.
const products = [
{id: 1, price: 10, category: "food", name: "apples"},
{id: 2, price: 5, category: "supplies", name: "spoons"},
{id: 3, price: 15, category: "pets", name: "cat treats"},
{id: 4, price: 9, category: "food", name: "oranges"},
// ...
]
const priority = [
'food',
'supplies',
'pets'
]
const orderedProducts = products.sort(
(p1, p2) => priority.indexOf(p1.category) - priority.indexOf(p2.category)
);
Let me know if this looks much cleaner & easier approach.
We are using Anychart Version 7.13 to create a PERT Chart in our application. Our data has a series of tasks with predecessors that require the chart to scroll horizontally. Our chart is getting truncated and we have tried to adjust chart.width in both % and PX but not able to enable horizontal scroll.
Any help will be most appreciated.
Thanks
VikasScreenshot showing truncation on right
Also, you should adjust spacing between milestones and milestones size in %. This will allow the pert chart fitting into the stage width. I prepared a sample for you below, the chart is scrollable. Please, pay attention to CSS style, stage settings and size/spacing settings. Probably, you should try other values in % exactly for your pert chart.
anychart.onDocumentReady(function () {
// create data
var data = [
{id: "1", duration: 1, name: "Task A"},
{id: "2", duration: 3, name: "Task B", dependsOn:["1"]},
{id: "3", duration: 4, name: "Task C", dependsOn:["2"]},
{id: "4", duration: 1, name: "Task D", dependsOn:["3"]},
{id: "5", duration: 2, name: "Task E", dependsOn: ["4"]},
{id: "6", duration: 2, name: "Task F", dependsOn: ["5"]},
{id: "7", duration: 1, name: "Task G", dependsOn: ["6"]},
{id: "8", duration: 2, name: "Task H", dependsOn: ["7"]},
{id: "9", duration: 3, name: "Task I", dependsOn: ["8"]},
{id: "10", duration: 2, name: "Task J", dependsOn: ["9"]}
];
// create a chart
var chart = anychart.pert();
//create stage
var stage = anychart.graphics.create("container");
//set stage width
stage.width(2000);
// adjsut milestones size in %
chart.milestones().size('5%');
//adjust spacing in %
chart.horizontalSpacing("9%");
// set chart data
chart.data(data, "as-table");
//render chart
chart.container(stage).draw();
});
html, body, #container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: scroll;
}
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-pert.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>
I apologize if my title sounds so confusing, as I don't know how to exactly word it. Basically, this is what I'm trying to do.
For example, I have the following array:
var sourceArray = [
{ question: "Question 1", inputType: "radio", answer: "Answer 1", id: "1" },
{ question: "Question 1", inputType: "radio", answer: "Answer 2", id: "2" },
{ question: "Question 1", inputType: "radio", answer: "Answer 3", id: "3" },
{ question: "Question 2", inputType: "radio", answer: "Answer 1", id: "4" },
{ question: "Question 2", inputType: "radio", answer: "Answer 2", id: "5" },
{ question: "Question 2", inputType: "radio", answer: "Answer 3", id: "6" }
]
I want to restructure this so that it'll look like this:
var newArray = [
{
question: "Question 1", inputType: "radio",
choices: [{answer: "Answer 1", id: "1"},
{answer: "Answer 2", id: "2"},
{answer: "Answer 3", id: "3"}
]},
{
question: "Question 2", inputType: "radio",
choices: [{answer: "Answer 1", id: "4"},
{answer: "Answer 2", id: "5"},
{answer: "Answer 3", id: "6"}
]}
]
Answers are grouped by question, so if the next question in the sourceArray is the same with the current, it will push the answers into the choices array.
Is this possible in AngularJS using angular.forEach?
Any help will be appreciated.
Thank you as always for your responses.
Here you go. See the working example below:
// Add a hepler method in the Array to find the value
Array.prototype.find = function(key, value) {
var index = -1;
angular.forEach(this, function(item, i) {
if (item[key] === value) {
index = i;
}
});
return this[index];
};
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.sourceArray = [{
question: "Question 1",
inputType: "radio",
answer: "Answer 1",
id: "1"
}, {
question: "Question 1",
inputType: "radio",
answer: "Answer 2",
id: "2"
}, {
question: "Question 1",
inputType: "radio",
answer: "Answer 3",
id: "3"
}, {
question: "Question 2",
inputType: "radio",
answer: "Answer 1",
id: "4"
}, {
question: "Question 2",
inputType: "radio",
answer: "Answer 2",
id: "5"
}, {
question: "Question 2",
inputType: "radio",
answer: "Answer 3",
id: "6"
}];
$scope.newArray = [];
$scope.convert = function() {
// Iterate array
angular.forEach($scope.sourceArray, function(item) {
// Check if the question alrady exists
if (!$scope.newArray.find('question', item.question)) {
// If not, push the question to the array with empty choices
$scope.newArray.push({
question: item.question,
inputType: item.inputType,
choices: []
});
}
var newArrayItem = $scope.newArray.find('question', item.question);
// Push the choices
newArrayItem.choices.push({
answer: item.answer,
id: item.id
});
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-controller="FooController">
Before:
<br>{{sourceArray | json}}
<br>
convert
<br>After:
<br>{{newArray | json}}
</div>
You can group together using a for loop,
Here is the code:
function transformArr(orig) {
var newArr = [],
answers = {},
newItem, i, j, cur;
for (i = 0, j = orig.length; i < j; i++) {
cur = orig[i];
if (!(cur.question in answers)) {
answers[cur.question] = {question: cur.question, answers: [],inputType : cur.inputType,id :cur.id};
newArr.push(answers[cur.question]);
}
answers[cur.question].answers.push(cur.answer);
}
return newArr;
}
Working App
You need to filter in the sourceArray, the two Questions List as below:
var question1 = $filter('filter')(sourceArray, {
question: 'Question 1'
});
var question2 = $filter('filter')(sourceArray, {
question: 'Question 2'
});
After that, you should create a new data of array as below:
$scope.questionData = [{
"question": "Question 1",
"inputType": "radio",
"choices": []
}, {
"question": "Question 2",
"inputType": "radio",
"choices": []
}];
Then, you should run loops over the two filtered a variables into the new Array of object:
1):
angular.forEach(question1, function(value, key) {
if (value.question == $scope.questionData[0].question) {
$scope.questionData[0].choices.push({
'answer': value.answer,
'id': value.id
});
}
});
2):
angular.forEach(question2, function(value, key) {
if (value.question == $scope.questionData[1].question) {
$scope.questionData[1].choices.push({
'answer': value.answer,
'id': value.id
});
}
});
Refer here for demo:
I want to have an Array as below:
$scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };
I Receive my data using an ajax request and want to create an object and add it to $scope.content something as below:
var tab = { id: 3, label: "Tab 3" };
$scope.content["tabs"].push(tab);
my result should be as below:
$scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }, { id: 3, label: "Tab 3" }] };
The code you have written should work, but you can access the tabs array directly and just push your new tab object into the array.
$scope.content.tabs.push(tab);
What is the correct Underscore.js way to create a new object called items that consists of each of the item arrays. Where I could then make a POST of each item.name in one call?
var items = [];
item = [{
name: "item1",
desc: "this is a description of item 1",
qty: 1
},{
name: "item2",
desc: "this is a description of item 2",
qty: 5
},{
name: "item3",
desc: "this is a description of item 3",
qty: 3
}];
items.push(item);
If I understand the question correctly you want to convert an array of items to an object where each key is the name of the object
e.g.
{
item1: {
name: "item1",
desc: "this is a description of item 1",
qty: 1
},
item2: { ... },
item3: { ... },
}
If that's the case then you could use the object function that takes two parameters; the first being the list of property names and the second a list of the values:
var items = [{
name: "item1",
desc: "this is a description of item 1",
qty: 1
},{
name: "item2",
desc: "this is a description of item 2",
qty: 5
},{
name: "item3",
desc: "this is a description of item 3",
qty: 3
}
];
var itemsAsAnObject = _.object( _.pluck(items,'name'), items)