By default visjs display every day on the timeline, is it possible to display only events dates? my goal is to make a simple timeline like this one.
Is it possible to do that? Are there other alternative libraries?
To achieve what you are asking for is pretty straight forward, how you would want to tailor it to look as close as possible to the reference will depend on you and what is supported. I have used visjs extensively for a web analytics project that we are currently building.
With the timeline API, after initialising the basic layout. You could simply add a few items in that timeline dataset of the events that you may be interested in.
The code should like something below
var container = document.getElementById('element');
Before anything you will first need to create an element, either directly in HTML or with JS. The choice is yours.
You will then need to grab the element so that the everything can be displayed directly in Element. After these first few steps you will need to initialise a dataset for the timeline. The dataset will be used to hold your data values (items), you can carry out a variety of operations on the dataset post rendering the chart.
var items = new vis.DataSet([])
any options if you wish to add for the timeline.
var options = {}
lastly you have the actual timeline to create
var timeline = new vis.Timeline(container, items, options);
now you need to the few items to the dataset that you had created earlier, this will be where your items you want to tag that will come in. There are a range of options right from what you want it to display to the styling of the item that will come in play.
items.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
That would be one way of doing it. You can find more customisation options with how you want this items to look and behave here
Hope this helps.
Related
I am trying to create a dataset in Echarts for React that includes both scatter and bar plot data in order to do cross filtering.
The dataset for the scatter plot is a 2d array in the following format:
const dataset = [
['Q1_x', 'Q1_y'],
[30, 50],
[22, 43],
[11, 77],
];
I have multiple choice questions where I want to display the count for each choice in a bar plot.
For example the question: What ice cream flavor is your favorite? (can select more than one)
Strawberry
Vanilla
Chocolate
In the JSON it has the following format (for two responses):
const responses = [
{
labels: {
QID19: ['Strawberry', 'Vanilla'],
},
},
{
labels: {
QID19: ['Chocolate'],
},
},
];
As you can see in the JSON, when more than one option is selected, it's an array.
I know how to get the counts of each option.
My specific question is how to include that in the main dataset that I have for the scatter above?
Should each option in the MCQ be a separate column (i.e., dimension)? Or should I join the array items into one string and include that as a cell in the dataset?
I want to eventually be able to cross-filter. For example, select only the scatter plots where the person selected "Chocolate" in the bar plot.
Any advice on how to proceed is appreciated. I'm looking for a general direction on implementation in Echarts (not necessarily specific code)
Anyone know how to sort the fullcalendar so latest dates i shown first
Below image show the dates en ascending order, but how to show in descending
The code i have tried with is as follows:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
defaultDate: '2017-10-01',
defaultView: 'listMonth',
editable: true,
eventOrder : (x,y) => x.start > y.start? 1 : -1,
eventOrderStrict: true,
events: [
{
title: 'Delta',
start: '2017-10-11T10:30:00',
end: '2017-10-12T12:30:00',
displayOrder: 2,
},
{
title: 'Alpha',
start: '2017-10-13T11:30:00',
end: '2017-10-12T12:30:00',
displayOrder: 3,
},
{
title: 'Bravo',
start: '2017-10-12T12:30:00',
end: '2017-10-12T12:30:00',
displayOrder: 1,
},
{
title: 'Charlie',
start: '2017-10-12T09:30:00',
end: '2017-10-12T12:30:00',
displayOrder: 4,
}
]
});
});
Unfortunately this is not possible in fullCalendar 3.
the eventOrder documentation for v3 says:
...events often have the same exact start time and duration, which is especially true for all-day events. By default, when this happens, events are sorted alphabetically by title. eventOrder provides the ability to override this behavior.
This means that in v3, the eventOrder custom settings aren't considered at all unless there are two events with the exact same start time and duration. Therefore, you cannot re-order the events based on start time. This demo shows it - you can see (by the lack of console logs) that the callback function is never triggered: https://codepen.io/ADyson82/pen/GRQVaja.
If you upgrade to fullCalendar 4 or above, you can simply use -start in the eventOrder setting, to indicate that it should be sorted in reverse by the start time.
We know this because the eventOrder documentation says it:
If prefixed with a minus sign like "-title", sorting will happen in descending order
For example (this also preserves the other default sort options to be used when the times are equal):
eventOrder: "-start,-duration,allDay,title"
Thus you don't need a custom callback.
Demo: https://codepen.io/ADyson82/pen/OJQKJVm
Note that this will have no effect in time-aware views such as timeGrid or timeLine, because the display is controlled by the placement of the time on the predefined grid (and you cannot reverse the grid order).
Also note that the eventOrderStrict option doesn't exist in fullCalendar 4, it was only introduced in v5. Make sure you always read the correct version of the documentation.
The V4 Release Notes and Upgrade Guide document gives you a good guide to what you need to change in order to transition from v3 to v4. The move from v4 to v5 is also documented in a similar way, but the change is not as big.
P.S. In terms of user experience as a result of this, I'd caution that it's a calendar, and so it's intended to be chronological. Showing the dates in a different order makes little or no sense in that context, and people may be confused by it - especially in the non-list views.
Ive seen this thread:
Chartjs - Stacked bar chart blocking other values
But still its not what im looking for. As author of previous thread pointed
My problem is that chart js is rendering the bar chart based on the order defined on the dataset. As you can see below, the values at index 0 of the arrays are 2500 and 1000. Since the 2500 was passed first, this will block the bar chart of the 1000 value.
https://jsfiddle.net/6bjy9nxh/352/
labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [1000, 1689, 1318, 589, 1199, 1436]
}
]
As my data is dynamic i dont know what value is higher thus i cant make order static.
Current behaviour if bigger data is passed as first:
Current behaviour
Expected behaviour:
Expected behaviour
Why im not accepting answer from previous thread? Because it sums values on Y axis:
answer from other thread
Perhap you could give each of your dynamic datapoints an index, and then use css z-index to change the order of each individual index?
It seems like you can add custom properties to data in ChartJS. (I've not used it before but I've done something similar using Chartist)
In highcharts, I have a bunch of simple, standartized categorial data. See fiddle here.
series: [{
name: 'sample element 1',
data: [3, 3, 2]
}, {
name: 'sample element 2',
data: [1, 4, 3]
}, {
name: 'sample element 3',
data: [2, 4, 4]
}, {
name: 'sample element 4',
data: [4, 2, 2]
}]
Is it possible with highcharts to display a categorial scatter diagram, only without the dot overlap in the categories, in the manner shown below? Each value would have its own dot representative, showing distributions for each variable in that way.
Advanced feature: When hovering over a single value dot, the lines between all dots of the corresponding sample element should reappear so that the connections between the values become obvious.
Would that take a lot of deep code customization, or am I better off doing that with a different framework like d3.js? Thanks for ideas!
I have typically done this by adding a decimal to the x value of the points that need to 'stack', as it were.
There isn't a great (easy) way to do it dynamically that I have found, but if your values are going to fall within a fairly controlled range, it works well.
Example:
http://jsfiddle.net/zew9dt8e/2/
In case when values are the same, there are printed in the same place. But you can use http://api.highcharts.com/highcharts#plotOptions.series.pointPlacement to move serie.
I am trying to achieve something along the lines of the stacked bars example, the difference being the way my background data is organized.
The layout assumes that data is organized per-layer.
Has anyone attempted to use the layout with data organized per-data-point instead?
e.g.
//completely random example, but I hope you can get the gist.
[{
id: 1,
name: 'foo'
layers: {
a: 10,
b: 13,
c: 12
}
}, {
id: 2,
name: 'bar',
layers: {
a: 8,
b: 5,
c: 14
}
}]
Other than a complete remapping so that the data becomes arranged per layers (I might have to do this for pretty huge datasets, that's why I'm asking), has anyone ever created stacked layouts from data presented thus?
You could always sidestep the native d3 stack layout helper functions and compute the rect positions yourself from the data - here is a basic example of a stacked bar with data similar to yours:
http://jsfiddle.net/tyR2S/7/
You still need to do a little transforming of data, so it might still be worthwhile to try transforming to the layer inputs that d3.stack takes, but I present this in case it might be helpful.