From b28028ac4082842143b0f528d6bc539da6ccb419 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Thu, 21 Sep 2017 12:49:18 -0400 Subject: mega changes, including updates and X --- www/lib/vis/examples/graph2d/01_basic.html | 52 +++ www/lib/vis/examples/graph2d/02_bars.html | 57 ++++ www/lib/vis/examples/graph2d/03_groups.html | 112 +++++++ www/lib/vis/examples/graph2d/04_rightAxis.html | 126 +++++++ www/lib/vis/examples/graph2d/05_bothAxis.html | 137 ++++++++ www/lib/vis/examples/graph2d/06_interpolation.html | 101 ++++++ .../examples/graph2d/07_scrollingAndSorting.html | 74 +++++ www/lib/vis/examples/graph2d/08_performance.html | 150 +++++++++ .../vis/examples/graph2d/09_external_legend.html | 363 +++++++++++++++++++++ .../vis/examples/graph2d/10_barsSideBySide.html | 75 +++++ .../examples/graph2d/11_barsSideBySideGroups.html | 88 +++++ www/lib/vis/examples/graph2d/12_customRange.html | 92 ++++++ www/lib/vis/examples/graph2d/13_localization.html | 65 ++++ www/lib/vis/examples/graph2d/14_toggleGroups.html | 145 ++++++++ .../vis/examples/graph2d/15_streaming_data.html | 122 +++++++ .../vis/examples/graph2d/16_bothAxisTitles.html | 201 ++++++++++++ .../vis/examples/graph2d/17_dynamicStyling.html | 257 +++++++++++++++ www/lib/vis/examples/graph2d/18_scatterplot.html | 63 ++++ www/lib/vis/examples/graph2d/19_labels.html | 135 ++++++++ www/lib/vis/examples/graph2d/20_shading.html | 117 +++++++ www/lib/vis/examples/graph2d/default.css | 87 +++++ 21 files changed, 2619 insertions(+) create mode 100644 www/lib/vis/examples/graph2d/01_basic.html create mode 100644 www/lib/vis/examples/graph2d/02_bars.html create mode 100644 www/lib/vis/examples/graph2d/03_groups.html create mode 100644 www/lib/vis/examples/graph2d/04_rightAxis.html create mode 100644 www/lib/vis/examples/graph2d/05_bothAxis.html create mode 100644 www/lib/vis/examples/graph2d/06_interpolation.html create mode 100644 www/lib/vis/examples/graph2d/07_scrollingAndSorting.html create mode 100644 www/lib/vis/examples/graph2d/08_performance.html create mode 100644 www/lib/vis/examples/graph2d/09_external_legend.html create mode 100644 www/lib/vis/examples/graph2d/10_barsSideBySide.html create mode 100644 www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html create mode 100644 www/lib/vis/examples/graph2d/12_customRange.html create mode 100644 www/lib/vis/examples/graph2d/13_localization.html create mode 100644 www/lib/vis/examples/graph2d/14_toggleGroups.html create mode 100644 www/lib/vis/examples/graph2d/15_streaming_data.html create mode 100644 www/lib/vis/examples/graph2d/16_bothAxisTitles.html create mode 100644 www/lib/vis/examples/graph2d/17_dynamicStyling.html create mode 100644 www/lib/vis/examples/graph2d/18_scatterplot.html create mode 100644 www/lib/vis/examples/graph2d/19_labels.html create mode 100644 www/lib/vis/examples/graph2d/20_shading.html create mode 100644 www/lib/vis/examples/graph2d/default.css (limited to 'www/lib/vis/examples/graph2d') diff --git a/www/lib/vis/examples/graph2d/01_basic.html b/www/lib/vis/examples/graph2d/01_basic.html new file mode 100644 index 00000000..22c0931f --- /dev/null +++ b/www/lib/vis/examples/graph2d/01_basic.html @@ -0,0 +1,52 @@ + + + + + + + Graph2d | Basic Example + + + + + + + +

Graph2d | Basic Example

+
+ This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input. + In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings. + There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can + create your own styling. +

+ Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d. + In these examples however, we will focus on what's new in Graph2d! +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/02_bars.html b/www/lib/vis/examples/graph2d/02_bars.html new file mode 100644 index 00000000..42957d74 --- /dev/null +++ b/www/lib/vis/examples/graph2d/02_bars.html @@ -0,0 +1,57 @@ + + + + Graph2d | Bar Graph Example + + + + + + + +

Graph2d | Bar Graph Example

+
+ This example shows the most the same data as the first example, except we plot the data as bars! The + dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS + styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top. +

+ The align option can be used to align the bar at the center of the datapoint or on the left or right side of it. + This example uses the default center alignment. +
+
+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/03_groups.html b/www/lib/vis/examples/graph2d/03_groups.html new file mode 100644 index 00000000..fe5fa887 --- /dev/null +++ b/www/lib/vis/examples/graph2d/03_groups.html @@ -0,0 +1,112 @@ + + + + Graph2d | Groups Example + + + + + + + + +

Graph2d | Groups Example

+
+ This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline, + We have however simplified the constructor to accept groups as well to shorten the code. These groups are the + method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the + styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages + of these options.

+ + This example also introduces the automatically generated legend. The icons are automatically generated and the label is the + content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'. + In this example, the setting defaultGroup is used to rename the default group to 'ungrouped'. +
+
+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/04_rightAxis.html b/www/lib/vis/examples/graph2d/04_rightAxis.html new file mode 100644 index 00000000..f13af137 --- /dev/null +++ b/www/lib/vis/examples/graph2d/04_rightAxis.html @@ -0,0 +1,126 @@ + + + + Graph2d | Right Axis Example + + + + + + + +

Graph2d | Right Axis Example

+
+ This example shows the all of the graphs outlined on the right side using the yAxisOrientation option. + We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling. + Finally, the legend is manually positioned. Both the left and right axis + have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split + in a left and a right segment. Since this example shows the right axis, the right legend is configured. + + +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/05_bothAxis.html b/www/lib/vis/examples/graph2d/05_bothAxis.html new file mode 100644 index 00000000..7b2a04c2 --- /dev/null +++ b/www/lib/vis/examples/graph2d/05_bothAxis.html @@ -0,0 +1,137 @@ + + + + Graph2d | Both Axis Example + + + + + + + +

Graph2d | Both Axis Example

+
+ This example shows the some of the graphs outlined on the right side using the yAxisOrientation option within the groups. + We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis + have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split + in a left and a right segment. The default position of the left axis has been changed. + + +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/06_interpolation.html b/www/lib/vis/examples/graph2d/06_interpolation.html new file mode 100644 index 00000000..9daa7e07 --- /dev/null +++ b/www/lib/vis/examples/graph2d/06_interpolation.html @@ -0,0 +1,101 @@ + + + + Graph2d | Interpolation + + + + + + + +

Graph2d | Interpolation

+
+ The Graph2d makes use of Catmull-Rom spline interpolation. + The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of + the curves. The options are uniform, chordal and centripetal. Alternatively you can disable the Catmull-Rom interpolation and + a linear interpolation will be used. The centripetal parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting. +

+ For both the centripetal and chordal parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive + if there are very many points. The uniform parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the + linear interpolation is the fastest method. For more on the Catmull-Rom method, C. Yuksel et al. have an interesting paper titled ″On the parametrization of Catmull-Rom Curves″. +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html new file mode 100644 index 00000000..f9328dc7 --- /dev/null +++ b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html @@ -0,0 +1,74 @@ + + + + Graph2d | Scrolling and Sorting + + + + + + + +

Graph2d | Scrolling and Sorting

+
+ You can determine the height of the Graph2d seperately from the height of the frame. If the graphHeight + is defined, and the height is not, the frame will auto-scale to accommodate the graphHeight. If the height + is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph. +

+ Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the height is defined. +

+ You can manually disable the automatic sorting of the datapoints by using the sort option. However, doing so does reduce the optimization + of the drawing so if you have a lot of points, keep sort turned on for the best results. +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/08_performance.html b/www/lib/vis/examples/graph2d/08_performance.html new file mode 100644 index 00000000..9a2ad2e1 --- /dev/null +++ b/www/lib/vis/examples/graph2d/08_performance.html @@ -0,0 +1,150 @@ + + + + Graph2d | Performance + + + + + + + + + + +

Graph2d | Performance

+
+ This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw. + You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons. + The interpolation options may not look different for this dataset but you can see their effects clearly in example 7. +

+ Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more + than 1 point per pixel. This can be manually disabled at the cost of performance by using the sampling option. +
+
+

+ Number of items: + Click the draw button to load the data! +
+ + Interpolation method: + +
+ Points style: + + +

+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/09_external_legend.html b/www/lib/vis/examples/graph2d/09_external_legend.html new file mode 100644 index 00000000..8ec82fa8 --- /dev/null +++ b/www/lib/vis/examples/graph2d/09_external_legend.html @@ -0,0 +1,363 @@ + + + + Graph2d | External legend Example + + + + + + + +

Graph2d | External custom legend

+
+ This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the + groups by updating the dataset. + +
+
+
+
+ + + + + diff --git a/www/lib/vis/examples/graph2d/10_barsSideBySide.html b/www/lib/vis/examples/graph2d/10_barsSideBySide.html new file mode 100644 index 00000000..7afdf6ef --- /dev/null +++ b/www/lib/vis/examples/graph2d/10_barsSideBySide.html @@ -0,0 +1,75 @@ + + + + Graph2d | Bar Graphs Side by Side Example + + + + + + + +

Graph2d | Bar Graphs Side by Side Example

+
+ When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the + barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap. + Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the next example. + +

+ Handle overlap:
+
+
+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html new file mode 100644 index 00000000..b1ed1504 --- /dev/null +++ b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html @@ -0,0 +1,88 @@ + + + + Graph2d | Bar Graphs Side by Side Example with Groups + + + + + + + +

Graph2d | Bar Graphs Side by Side Example with Groups

+
+ When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the + barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap. + Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here. + +

+ Handle overlap: +
+
+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/12_customRange.html b/www/lib/vis/examples/graph2d/12_customRange.html new file mode 100644 index 00000000..0e85ab53 --- /dev/null +++ b/www/lib/vis/examples/graph2d/12_customRange.html @@ -0,0 +1,92 @@ + + + + Graph2d | Bar Graph Example + + + + + + + +

Graph2d | Custom axis range

+
+ You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also + only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one), + you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however. + If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default. + +
+var options = {
+    dataAxis: {
+        left: {
+            range: {min:-5, max:30}
+        },
+        right: {
+            range: {min:-5}
+        }
+    }
+};
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/13_localization.html b/www/lib/vis/examples/graph2d/13_localization.html new file mode 100644 index 00000000..c0130d5d --- /dev/null +++ b/www/lib/vis/examples/graph2d/13_localization.html @@ -0,0 +1,65 @@ + + + + + + + Graph2d | Localization + + + + + + + + +

Graph2d | Localization

+

+ To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option {locale: STRING}. +

+ +

+ + +

+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/14_toggleGroups.html b/www/lib/vis/examples/graph2d/14_toggleGroups.html new file mode 100644 index 00000000..60db882b --- /dev/null +++ b/www/lib/vis/examples/graph2d/14_toggleGroups.html @@ -0,0 +1,145 @@ + + + + Graph2d | Toggle Groups Example + + + + + + + + +

Graph2d | Groups Example

+
+ This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this, + all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups, + you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options. + We then use a setOptions like so: + + + 
+        graph2d1.setOptions({
+            groups:{
+                visibility:{
+                    0:true,               // group id:0 visible
+                    1:false,              // group id:1 hidden
+                    2:false,              // group id:2 hidden
+                    3:false,              // group id:3 hidden
+                    "__ungrouped__":false // default group hidden
+                }
+            }
+        })
+
+
+
+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/15_streaming_data.html b/www/lib/vis/examples/graph2d/15_streaming_data.html new file mode 100644 index 00000000..1a822391 --- /dev/null +++ b/www/lib/vis/examples/graph2d/15_streaming_data.html @@ -0,0 +1,122 @@ + + + + + + + Graph2d | Streaming data + + + + + + + +

Graph2d | Streaming data

+

+ This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options moveable and zoomable false. +

+ +

+ + +

+ +
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/16_bothAxisTitles.html b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html new file mode 100644 index 00000000..5fe0e6d8 --- /dev/null +++ b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html @@ -0,0 +1,201 @@ + + + + Graph2d | Axis Titles and Styling + + + + + + + +

Graph2d | Axis Titles and Styling

+
+ + + + + +
+ This example shows setting a title for the left and right axis. Optionally the example allows the user + to show icons and labels on the left and right axis. + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/17_dynamicStyling.html b/www/lib/vis/examples/graph2d/17_dynamicStyling.html new file mode 100644 index 00000000..01beacf4 --- /dev/null +++ b/www/lib/vis/examples/graph2d/17_dynamicStyling.html @@ -0,0 +1,257 @@ + + + + + + + Graph2d | Dynamic Styling + + + + + + + +

Graph2d | Dynamic Styling Example

+ +
+ This example shows how to programmatically change the styling of a group. While this can also + be done in CSS, this must be statically defined, and the programmatic interface allows the + user to define the look of the graph at runtime. +
+
+ + + + + + + + + +
+
+ 		+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Line Color + +
Line Style + +
Line thickness + +
Fill Position + +
Fill Color + +
Fill Opacity + +
Points Shape + +
Points Size + +
Points Color + +
Point Line Thickness + +
Points Fill Color + +
+
+ + + + + diff --git a/www/lib/vis/examples/graph2d/18_scatterplot.html b/www/lib/vis/examples/graph2d/18_scatterplot.html new file mode 100644 index 00000000..bdeb63e4 --- /dev/null +++ b/www/lib/vis/examples/graph2d/18_scatterplot.html @@ -0,0 +1,63 @@ + + + + Graph2d | Scatterplot + + + + + + + +

Graph2d | Scatterplot

+
+ You can manually disable the automatic sorting of the datapoints by using the sort option. You can use this with the + style: 'points' option for making a scatterplot! +
+
+var options = {
+    sort: false,
+    sampling:false,
+    style:'points'
+};
+
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/19_labels.html b/www/lib/vis/examples/graph2d/19_labels.html new file mode 100644 index 00000000..f93853eb --- /dev/null +++ b/www/lib/vis/examples/graph2d/19_labels.html @@ -0,0 +1,135 @@ + + + + + + + Graph2d | Basic Example + + + + + + + +

Graph2d | Label Example

+
+ This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled. + + +

+ +
+
+
+ + + + \ No newline at end of file diff --git a/www/lib/vis/examples/graph2d/20_shading.html b/www/lib/vis/examples/graph2d/20_shading.html new file mode 100644 index 00000000..1bfb4bdb --- /dev/null +++ b/www/lib/vis/examples/graph2d/20_shading.html @@ -0,0 +1,117 @@ + + + + Graph2d | Shading Example + + + + + + + + +

Graph2d | Shading Example

+
+ This example shows the shading functionality within Graph2d. +
+
+ +
+ + + + diff --git a/www/lib/vis/examples/graph2d/default.css b/www/lib/vis/examples/graph2d/default.css new file mode 100644 index 00000000..f7afb828 --- /dev/null +++ b/www/lib/vis/examples/graph2d/default.css @@ -0,0 +1,87 @@ +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +body, td, th { + font-family: arial, sans-serif; + font-size: 11pt; + color: #4D4D4D; + line-height: 1.7em; +} + +#container { + margin: 0 auto; + padding-bottom: 50px; + width: 900px; +} + +h1 { + font-size: 180%; + font-weight: bold; + padding: 0; + margin: 1em 0 1em 0; +} + +h2 { + padding-top: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #a0c0f0; + color: #2B7CE9; +} + +h3 { + font-size: 140%; +} + + +a { + color: #2B7CE9; + text-decoration: none; +} +a:visited { + color: #2E60A4; +} +a:hover { + color: red; + text-decoration: underline; +} + +hr { + border: none 0; + border-top: 1px solid #abc; + height: 1px; +} + +pre { + display: block; + font-size: 10pt; + line-height: 1.5em; + font-family: monospace; +} + +pre, code { + background-color: #f5f5f5; +} + +table +{ + border-collapse: collapse; +} + +th { + font-weight: bold; + border: 1px solid lightgray; + background-color: #E5E5E5; + text-align: left; + vertical-align: top; + padding: 5px; +} + +td { + border: 1px solid lightgray; + padding: 5px; + vertical-align: top; +} -- cgit v1.2.3