From 26ca73dff58c09967bbe2e5993f24715237a7919 Mon Sep 17 00:00:00 2001
From: jos
- Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
+ Graph2d is built upon the framework of the timeline. These options from the timeline can be used with Graph2d.
All options are optional.
+ Graph2d can be localized. For localization, Graph2d depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+
+ To set a locale for the Graph2d, specify the option
- All parts of the Graph2d have a class name and a default css style just like the Timeline.
+ All parts of the Graph2d have a class name and a default css style just like the Graph2d.
The styles can be overwritten, which enables full customization of the layout
of the Graph2d.
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
- as well, along with defining your own classes to style the graphs! Example 4 and
- example 5 show the usage of custom styles.
+ as well, along with defining your own classes to style the graphs! Example 4 and
+ example 5 show the usage of custom styles.
+ Timeline can be localized. For localization, Timeline depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+
+ To set a locale for the Timeline, specify the option slots.slot
Number
- The slot the bar chart is plotted in. This has to be used in combination with slots.total. See example 11 for more information.
+ The slot the bar chart is plotted in. This has to be used in combination with slots.total. See example 11 for more information.
@@ -316,7 +318,7 @@ The options colored in green can also be used as options for the groups. All opt
slots.total
Number
- The total amount of slots available. This has to be used in combination with slots.slot. See example 11 for more information.
+ The total amount of slots available. This has to be used in combination with slots.slot. See example 11 for more information.
yAxisOrientation
String
'left'
- This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled
+ This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled
with an axis, it will not be shown.
@@ -336,7 +338,7 @@ The options colored in green can also be used as options for the groups. All opt
sampling
Boolean
true
- If sampling is enabled, graph2D will automatically determine the amount of points per pixel.
+ If sampling is enabled, Graph2d will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.
@@ -388,8 +390,8 @@ The options colored in green can also be used as options for the groups. All opt
Boolean
true
When true, bars that have the same x coordinate are plotted on top of eachother (not stacking).
- See example 10 for more information.
- When using groups, see example 11.
+ See example 10 for more information.
+ When using groups, see example 11.
@@ -408,7 +410,7 @@ The options colored in green can also be used as options for the groups. All opt
catmullRom.parametrization
String
'centripetal'
- Define the type of parametrizaion. Example 7 shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
+ Define the type of parametrizaion. Example 7 shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.
@@ -512,7 +514,7 @@ The options colored in green can also be used as options for the groups. All opt
+Timeline Options
Localization
+locale
:
+var options = {
+ locale: 'nl'
+};
+
+
+Create a new locale
+
+To load a locale into the Graph2d not supported by default, one can add a new locale to the option locales
:
+
+var options = {
+ locales: {
+ // create a new locale
+ mylocale: {
+ current: 'current',
+ time: 'time',
+ }
+ },
+
+ // use the new locale
+ locale: 'mylocale'
+};
+
+
+Available locales
+
+Graph2d comes with support for the following locales:
+
+
+
+
+ Language Code
+
+ English
+
+
+ en
+ en_EN
+ en_US
+
+
+Dutch
+
+
+ nl
+ nl_NL
+ nl_BE
+ Styles
Data Policy
diff --git a/docs/timeline.html b/docs/timeline.html
index a99bfdf2..fdba8c52 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -43,6 +43,7 @@
+
+
+locale
+ String
+ none
+ Select a locale for the Timeline. See section Localization for more information.
+
+
+
locales
+ Object
+ none
+ A map with i18n locales. See section Localization for more information.
+
margin.axis
Number
@@ -985,11 +1000,67 @@ var options = {
callback(null); // cancel updating the item
}
}
-}
+};
A full example is available here: 08_edit_items.html.
+Localization
+locale
:
+var options = {
+ locale: 'nl'
+};
+
+
+Create a new locale
+
+To load a locale into the Timeline not supported by default, one can add a new locale to the option locales
:
+
+var options = {
+ locales: {
+ // create a new locale
+ mylocale: {
+ current: 'current',
+ time: 'time',
+ }
+ },
+
+ // use the new locale
+ locale: 'mylocale'
+};
+
+
+Available locales
+
+Timeline comes with support for the following locales:
+
+
+
+
+ Language Code
+
+ English
+
+
+ en
+ en_EN
+ en_US
+
+
+Dutch
+
+
+ nl
+ nl_NL
+ nl_BE
+ Styles
+ To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option {locale: STRING}
.
+
+ + +
+ + + + +diff --git a/examples/timeline/19_localization.html b/examples/timeline/19_localization.html new file mode 100644 index 00000000..3c2c18bd --- /dev/null +++ b/examples/timeline/19_localization.html @@ -0,0 +1,65 @@ + + +
+
+ + + + + + + +
+