├── LICENSE ├── README.md ├── demos ├── 3rd_party │ ├── bootstrap │ │ └── dist │ │ │ └── css │ │ │ └── bootstrap.min.css │ ├── build │ │ ├── css │ │ │ └── custom.min.css │ │ └── js │ │ │ └── custom.min.js │ ├── farbtastic-2.0.0-alpha.1 │ │ └── src │ │ │ └── farbtastic.js │ ├── font-awesome-4.6.3 │ │ ├── css │ │ │ └── font-awesome.min.css │ │ └── fonts │ │ │ ├── fontawesome-webfont.woff │ │ │ └── fontawesome-webfont.woff2 │ ├── jquery │ │ ├── css │ │ │ └── ui-lightness │ │ │ │ ├── images │ │ │ │ ├── ui-bg_diagonals-thick_18_b81900_40x40.png │ │ │ │ ├── ui-bg_diagonals-thick_20_666666_40x40.png │ │ │ │ ├── ui-bg_flat_10_000000_40x100.png │ │ │ │ ├── ui-bg_glass_100_f6f6f6_1x400.png │ │ │ │ ├── ui-bg_glass_100_fdf5ce_1x400.png │ │ │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ │ │ ├── ui-bg_gloss-wave_35_f6a828_500x100.png │ │ │ │ ├── ui-bg_highlight-soft_100_eeeeee_1x100.png │ │ │ │ ├── ui-bg_highlight-soft_75_ffe45c_1x100.png │ │ │ │ ├── ui-icons_222222_256x240.png │ │ │ │ ├── ui-icons_228ef1_256x240.png │ │ │ │ ├── ui-icons_ef8c08_256x240.png │ │ │ │ ├── ui-icons_ffd27a_256x240.png │ │ │ │ └── ui-icons_ffffff_256x240.png │ │ │ │ └── jquery-ui-1.8.17.custom.css │ │ └── js │ │ │ ├── jquery-1.7.1.min.js │ │ │ └── jquery-ui-1.8.17.custom.min.js │ └── material │ │ ├── css │ │ └── material.min.css │ │ └── js │ │ └── material.min.js ├── animations │ ├── css3_animations.htm │ ├── linefadein.htm │ ├── sequence.htm │ └── tween.htm ├── axes │ ├── allaxes.htm │ ├── centeraxes.htm │ ├── customlabels.htm │ ├── gridbands.htm │ ├── multiple_axes.htm │ ├── synchro_many_charts.htm │ ├── zoompercent.htm │ └── zoomscroll.htm ├── basic │ ├── BackImage.htm │ ├── Basic.htm │ ├── Basic_Nulls.htm │ ├── FromTable.htm │ ├── FromText.htm │ ├── FromURL.htm │ ├── PanelShadow.htm │ ├── TitleFooter.htm │ ├── Transparent.htm │ └── canvasalign.htm ├── canvas │ ├── custom_paint.htm │ ├── size_percent_resize.htm │ └── webgl │ │ ├── basic_3d.htm │ │ ├── fonts │ │ └── helvetiker_font │ │ │ ├── LICENSE │ │ │ ├── helvetiker_bold.ttf │ │ │ ├── helvetiker_bold.typeface.js │ │ │ ├── helvetiker_bold_italic.ttf │ │ │ ├── helvetiker_bold_italic.typeface.js │ │ │ ├── helvetiker_italic.ttf │ │ │ ├── helvetiker_italic.typeface.js │ │ │ ├── helvetiker_regular.ttf │ │ │ └── helvetiker_regular.typeface.js │ │ ├── index.htm │ │ ├── maps_3d.htm │ │ ├── textures │ │ ├── Three.js_logo.png │ │ ├── charcoal.png │ │ ├── threejs_logo.jpg │ │ └── webgl.png │ │ ├── threejs │ │ ├── Detector.js │ │ ├── DragControls.js │ │ ├── TrackballControls.js │ │ ├── stats.js │ │ └── three.min.js │ │ └── threejs_example.htm ├── dashboard │ ├── demographics.htm │ ├── geo_series.htm │ ├── productSales.htm │ └── tutorial │ │ ├── basic.htm │ │ ├── by_month_year.htm │ │ ├── by_month_year_flat.htm │ │ ├── by_month_year_names.htm │ │ ├── by_year.htm │ │ ├── data_editor.htm │ │ ├── from_json_string.htm │ │ ├── from_table.htm │ │ ├── from_table_advanced.htm │ │ ├── from_xml.htm │ │ ├── gauge_by_year.htm │ │ ├── geo_map_series.htm │ │ ├── geo_series.htm │ │ ├── index.htm │ │ ├── linking_datasets.htm │ │ ├── multiple_metrics.htm │ │ ├── no_chart.htm │ │ ├── swap.jpg │ │ ├── tee-data-editor.htm │ │ ├── tee-data-utils.css │ │ ├── tee-data-utils.js │ │ ├── temperatures.xml │ │ └── unit_tests.htm ├── data │ ├── continents_and_countries.js │ ├── demo.txt │ ├── demo.xml │ ├── population_by_country.js │ └── product_sales.js ├── demo.css ├── demo.js ├── editor │ ├── ChartEditor.htm │ └── modaleditor.htm ├── export │ └── ToPNG.htm ├── extra │ ├── CursorTool.htm │ ├── CursorTool_Interpolate.htm │ ├── Draggable_TeeChart_JScript.htm │ ├── ToolTips.htm │ ├── annotations.htm │ ├── buttons.htm │ ├── css_style.htm │ ├── customMarksWithAnnotations.htm │ ├── domToolTips.htm │ ├── domToolTips_SubChart.htm │ ├── floorreflection.htm │ ├── google_gadget.htm │ ├── insetshadows.htm │ ├── scroller.htm │ ├── scroller_datetime.htm │ ├── scroller_inside.htm │ └── slider.htm ├── favicon.ico ├── gauges │ ├── activitygauge.htm │ ├── clocks.htm │ ├── gauge_gallery.htm │ ├── gauges.htm │ └── teechart-gauge-templates.js ├── generator │ ├── img │ │ ├── arrow_down.gif │ │ ├── arrow_up.gif │ │ ├── edit.png │ │ ├── header.gif │ │ └── header_over.gif │ ├── index.htm │ └── src │ │ ├── colorpicker.js │ │ ├── styles.css │ │ ├── teechart-generator.js │ │ └── themes.css ├── images │ ├── SteemaLogo117x50.jpg │ ├── download.png │ ├── favicon.ico │ ├── html5.png │ ├── logo-steema-v3.png │ ├── metal.jpg │ ├── shop.png │ ├── steema170x70.png │ ├── teechart-title-menu.png │ └── typescript-logo-426x188.png ├── index.html ├── intro │ ├── areas.htm │ ├── bars.htm │ ├── gantt.htm │ ├── lines.htm │ ├── pie.htm │ ├── points.htm │ └── scroller.htm ├── legend │ └── legend.htm ├── plugins │ ├── jquery │ │ ├── jquery.teechart.js │ │ ├── teechart_jquery.htm │ │ └── themed.htm │ ├── plugins.htm │ └── typescript │ │ ├── index.htm │ │ └── typescript_test.js ├── release.htm ├── series │ ├── area │ │ ├── area.htm │ │ ├── horizarea.htm │ │ ├── smootharea.htm │ │ ├── sortingArea.htm │ │ └── twoareas.htm │ ├── bar │ │ ├── bar.htm │ │ ├── barnegative.htm │ │ ├── bullet.htm │ │ ├── horizbar.htm │ │ ├── horizbarstacked.htm │ │ ├── sortingBar.htm │ │ └── volume.htm │ ├── bubble │ │ └── bubble.htm │ ├── candle │ │ └── candle.htm │ ├── colorgrid │ │ └── colorgrid.htm │ ├── datasource.htm │ ├── donut │ │ ├── donut.htm │ │ └── multidonut.htm │ ├── gantt │ │ └── gantt.htm │ ├── line │ │ ├── highlow.htm │ │ ├── line.htm │ │ ├── linepoint.htm │ │ ├── point.htm │ │ ├── smoothline.htm │ │ └── stackedline.htm │ ├── maps │ │ ├── canvas_maps.htm │ │ ├── continents.htm │ │ ├── maps_bubbles.htm │ │ ├── world_cities.js │ │ └── worldmap.htm │ ├── pie │ │ ├── multipie.htm │ │ └── pie.htm │ ├── polar │ │ ├── polar.htm │ │ └── polar_bar.htm │ ├── seriesonclick.htm │ ├── spark │ │ └── spark.htm │ └── surface │ │ └── surface.htm ├── sources │ ├── FromTable.htm │ ├── FromText.htm │ ├── FromURL.htm │ ├── FromXMLURL.htm │ ├── battery.htm │ ├── datetime.htm │ ├── dynamicUpdate.htm │ ├── fromWunderground.htm │ ├── fromYahooFinance.htm │ ├── fromarray.htm │ ├── fromjson.htm │ ├── fromtypedarray.htm │ ├── fromxml.htm │ ├── realtime.htm │ └── styles.css ├── tests │ ├── blanket │ │ └── blanket.js │ ├── index.htm │ ├── qunit │ │ ├── qunit-1.10.0.css │ │ └── qunit-1.10.0.js │ ├── src │ │ ├── date.format.js │ │ ├── teechart-3d.js │ │ ├── teechart-animations.js │ │ ├── teechart-data.js │ │ ├── teechart-extras.js │ │ ├── teechart-gauges.js │ │ ├── teechart-maps.js │ │ ├── teechart-table.js │ │ └── teechart.js │ └── tests.js └── tools │ └── syntax │ ├── sh_ide-eclipse.min.css │ ├── sh_javascript.min.js │ ├── sh_javascript_dom.min.js │ └── sh_main.min.js └── src ├── .gitignore ├── Tween.js ├── date.format.js ├── excanvas ├── canvas.text.js ├── excanvas.compiled.js ├── excanvas.js └── excanvas_text.js ├── miniextras.bat ├── minify.bat ├── teechart-3d.js ├── teechart-animations.js ├── teechart-canvas.js ├── teechart-data.js ├── teechart-editor.js ├── teechart-extras.js ├── teechart-gauges.js ├── teechart-maps.js ├── teechart-svg.js ├── teechart-table.js ├── teechart.js ├── teechart.js.gz └── three.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Steema Software 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 100% JavaScript charting library using the HTML5 Canvas. 6 | 7 | ## History 8 | 9 | TeeChartJS comes from [TeeChart JavaScript/HTML5](https://www.steema.com/product/html5), a library initially written by [David Berneda](https://github.com/davidberneda) on 2012 and maintained by the team at [Steema Software](https://www.steema.com). 10 | Steema Software opensourced the library on march 2018 but still offers [paid support subscriptions](https://www.steema.com/product/html5#pricing). 11 | 12 | ## [Live Demo](https://www.steema.com/files/public/teechart/html5/latest/demos/) 13 | Find [here](https://github.com/Steema/TeeChartJS/tree/master/demos) the demo sources 14 | 15 | ## Resources 16 | * ### [Tutorials](https://github.com/Steema/TeeChartJS/wiki) 17 | * ### [API Reference](https://www.steema.com/docs/TeeChartHTML5Reference.htm) 18 | * ### [Issue Tracker](http://bugs.steema.com/buglist.cgi?product=HTML5%20JavaScript%20TeeChart&query_format=advanced&resolution=---) 19 | 20 |

21 | 22 | 23 | 24 |

25 | -------------------------------------------------------------------------------- /demos/3rd_party/font-awesome-4.6.3/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/font-awesome-4.6.3/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demos/3rd_party/font-awesome-4.6.3/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/font-awesome-4.6.3/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_228ef1_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_228ef1_256x240.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ef8c08_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ef8c08_256x240.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ffd27a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ffd27a_256x240.png -------------------------------------------------------------------------------- /demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/3rd_party/jquery/css/ui-lightness/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /demos/animations/css3_animations.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript CSS3 Animations Example 5 | 6 | 7 | 36 | 37 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 72 | 73 | 74 |
75 |
76 |
77 |

TeeChart for JavaScript Gantt

78 |
79 |
80 |
81 | 82 |
83 |
84 |
85 |

Gantt

86 |
    87 |
  • 88 |
    • 89 |
  • 90 |
    • 91 |
92 |
93 |
94 |
95 | Move the mouse inside the rectangle below: 96 |
97 |
98 | 99 |
100 | 101 | This browser does not seem to support HTML5 Canvas. 102 | 103 |
104 |
105 |
106 |
107 |
108 |
109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/animations/tween.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Tween.js Animations Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 47 | 48 | 49 | 50 |
51 | 52 | This browser does not seem to support HTML5 Canvas. 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demos/axes/centeraxes.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Axes at Center Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 57 | 58 | 59 |
60 |
61 |
62 |

TeeChart for JavaScript Centered Axis

63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 |

Centered Axis

71 |
    72 |
  • 73 |
    • 74 |
75 |
76 |
77 |
78 | 79 | This browser does not seem to support HTML5 Canvas. 80 | 81 |
82 |
83 |
84 |
85 | 86 | 87 | -------------------------------------------------------------------------------- /demos/axes/customlabels.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Custom Axis Labels Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 72 | 73 | 74 |
75 |
76 |
77 |

TeeChart for JavaScript Custom Labels

78 |
79 |
80 |
81 |
82 |
83 |
84 |

Custom Labels

85 |
    86 |
  • 87 |
    • 88 |
89 |
90 |
91 |
92 | 93 | This browser does not seem to support HTML5 Canvas. 94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /demos/axes/zoomscroll.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Zoom and Scroll Example 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |

TeeChart for JavaScript Mouse and Touch

56 |
57 |
58 |
59 |
60 |
61 |
62 |

Options Select zoom and scroll options

63 |
    64 |
  • 65 |
    • 66 |
67 |
68 |
69 |
70 | Default behavior is: 71 |
    72 |
  • Zoom by dragging left mouse button from top-left to right-bottom.
    • 73 |
  • Zoom can also be done by dragging the mouse wheel, if enabled.
    • 74 |
  • Reset zoom (unzoom) by dragging left mouse button from right-bottom to top-left.
    • 75 |
  • Scroll by dragging right mouse button.
    • 76 |
77 | 78 | Zoom enabled: 79 | 84 | Mouse Wheel 85 |
86 | 87 | Scroll enabled: 88 | 93 | 94 | 95 |
96 |
97 |
98 |
99 |
100 |
101 |

Mouse and Touch

102 |
    103 |
  • 104 |
    • 105 |
106 |
107 |
108 |
109 |
110 | This browser does not seem to support HTML5 Canvas. 111 | 112 |
113 |
114 |
115 |
116 | 117 | 118 | -------------------------------------------------------------------------------- /demos/basic/Basic_Nulls.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TeeChart JavaScript Basic Example 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 50 | 51 | 52 | 53 |
54 | Series1 55 |
56 | Series2 57 |
58 | Inverted Axis 59 |
60 | Legend 61 |
62 | Gradient 63 |
64 | Legend Shadow 65 |
66 | Dont Paint Nulls 67 |
68 | 69 |
70 | 71 | This browser does not seem to support HTML5 Canvas. 72 | 73 |
74 | 75 |
76 | Basic code:
77 |
78 | 79 | 
 80 | // Use the teechart.js script:
 81 | <script src="../../src/teechart.js" type="text/javascript"></script>
 82 | 
 83 | // Script to create and draw the chart:
 84 | <script type="text/javascript">
 85 | 
 86 | function draw() {
 87 |   // Create a chart with the specified canvas:
 88 |   var Chart1=new Tee.Chart("canvas");
 89 | 
 90 |   Chart1.addSeries(new Tee.Line([5,3,2,7,1]) );
 91 |   Chart1.addSeries(new Tee.Line([4,4,8,2,9]) ).visible=true;
 92 | 
 93 |   Chart1.series.items[0].format.stroke.size=3;
 94 | 
 95 |   Chart1.axes.left.format.stroke.fill="red";
 96 | 
 97 |   Chart1.title.text="TeeChart for JavaScript";
 98 |   Chart1.title.format.font.style="18px Verdana";
 99 |   changeTheme(Chart1, "minimal");
100 | Chart1.draw();
101 | }
102 | </script>
103 | 
104 | // Call the draw() function, for example at body onload event:
105 |
106 | 107 |
108 | 
109 | <body onload="draw()">
110 | <canvas id="canvas" width="600" height="400"></canvas>
111 | 

112 | 

113 |
114 | 115 |
116 |
117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /demos/basic/FromTable.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Table to Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 42 | 43 | 64 | 65 | 66 | 67 |
68 | 69 | (Double-click cells to edit them) 70 |

71 | 72 | 73 | 74 | 75 | 76 | 77 |
FruitSugarFiber
Apple51
Kiwi24
Banana17
78 |
79 | 80 |
81 | By Columns
82 | 83 | 92 | 93 |
94 | 95 |
96 |
97 | This browser does not seem to support HTML5 Canvas. 98 | 99 |
100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /demos/basic/FromText.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Text to Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 39 | 40 | 41 | 42 |
43 | Inverted Axis 44 | Legend 45 | Series1 46 | Series2 47 |
48 | Gradient 49 | Legend Shadow 50 | Legend at left 52 |
53 | Series1 ColorEach 54 | 55 |
56 |
64 | 65 | 66 |
67 | 68 |
69 |
70 | This browser does not seem to support HTML5 Canvas. 71 | 72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /demos/basic/FromURL.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Bar Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 37 | 38 | 39 | 40 |
41 | Inverted Axis 42 | Legend 43 |
44 | Series1 45 | Series2 46 |
47 | Gradient 48 |
49 | Legend Shadow 50 |
51 | Legend at left 53 |
54 | Series1 ColorEach 55 |
56 |
57 | Text Data URL:
58 | 59 | 63 |
64 | 65 |
66 |
67 |
68 |
69 | This browser does not seem to support HTML5 Canvas. 70 | 71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/basic/canvasalign.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 80 | 81 | 82 | 83 |
84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /demos/canvas/size_percent_resize.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript On Resize Percent Example 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 61 | 62 | 63 |
64 |
65 |
66 |

TeeChart for JavaScript Percent Size and Auto Resize

67 |
68 |
69 |
70 |
71 |
72 |
73 |

Percent Size and Auto Resize

74 |
    75 |
  • 76 |
    • 77 |
  • 78 |
    • 79 |
80 |
81 |
82 |
83 |
84 |  In this example the Chart width and height are expressed as percent % instead of pixels.
85 |
86 |  Try resizing the browser, Chart will resize itself to be 70% width and 40% height. 87 |
88 |
89 | 95 | 96 | This browser does not seem to support HTML5 Canvas. 97 | 98 |
99 |
100 |
101 |
102 | 103 |
104 | 105 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /demos/canvas/webgl/fonts/helvetiker_font/LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/fonts/helvetiker_font/LICENSE -------------------------------------------------------------------------------- /demos/canvas/webgl/fonts/helvetiker_font/helvetiker_bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/fonts/helvetiker_font/helvetiker_bold.ttf -------------------------------------------------------------------------------- /demos/canvas/webgl/fonts/helvetiker_font/helvetiker_bold_italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/fonts/helvetiker_font/helvetiker_bold_italic.ttf -------------------------------------------------------------------------------- /demos/canvas/webgl/fonts/helvetiker_font/helvetiker_italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/fonts/helvetiker_font/helvetiker_italic.ttf -------------------------------------------------------------------------------- /demos/canvas/webgl/fonts/helvetiker_font/helvetiker_regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/fonts/helvetiker_font/helvetiker_regular.ttf -------------------------------------------------------------------------------- /demos/canvas/webgl/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | TeeChart and WebGL(TM) Three.js 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | WebGL and the WebGL logo are trademarks of the Khronos Group Inc. 20 |
21 |
22 | TeeChart for Javascript renders charts in 3D mode using WebGL and the Three.js library. 23 |
24 |
25 |

26 | 27 | Current status of WebGL browser support: Can I use WebGL ? 28 |
29 |
30 | Examples: 31 |
32 |
33 | Basic minimal example
34 | Extended example
35 | Geo Maps in 3D
36 | Surface 3D XYZ
37 |
38 |
39 | Steps to create a 3D chart:
40 |
41 | Include Three.js scripts:
42 |
43 | 
 44 |  <script src="three.min.js" type="text/javascript"></script>
 45 |  <script src="helvetiker_regular.typeface.js"<>/script>
 46 |
47 |
48 | Include TeeChart scripts:
49 | 
 50 |  <script src="teechart.js" type="text/javascript"></script>
 51 |  <script src="teechart-3d.js" type="text/javascript"></script>
 52 |
53 |
54 | Create a Tee.Three context, charts and series:
55 |
56 | 
 57 |   // Create 3D WebGL context:
 58 |   var three  = new Tee.Three("canvas1");
 59 | 
 60 |   // Create Chart:
 61 |   var Chart1 = new Tee.Chart(three);
 62 | 
 63 |   // Add Bar series to Chart:
 64 |   Chart1.addSeries(new Tee.Bar([5,3,2,7,1]));
 65 |
66 |
67 | Add the following code:
68 | 
 69 |   // Test for valid WebGL context:
 70 | 
 71 |   if (three.isEnabled()) {
 72 |     Chart1.draw();
 73 |     animate();
 74 |   }
 75 |   else
 76 |   {
 77 |     // Show message to user (tell WebGL is not available in this browser) :
 78 |     // (Note: This requires adding the Detector.js script, see below).
 79 |     Detector.addGetWebGLMessage();
 80 | 
 81 |     // Disable WebGL and use HTML5 2D Canvas instead:
 82 |     three.setEnabled(false, Chart1);
 83 |   }
 84 | 
 85 |   // Loop:
 86 |   function animate() {
 87 |     three.update();
 88 |     requestAnimationFrame( animate );
 89 |   }
 90 |
91 | 92 | At page body, add an HTML canvas element:
93 | 
 94 |  <canvas id="canvas1" width=800 height=500></canvas>

 95 |
96 | 97 |
98 | Optional scripts:
99 |
100 | 
101 | To detect if browser supports WebGL:
102 |  <script src="Detector.js" type="text/javascript"></script>
103 | 

104 | To enable mouse drag rotation and wheel zoom:
105 |  <script src="TrackballControls.js"></script>
106 |
107 |
108 | 109 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /demos/canvas/webgl/textures/Three.js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/textures/Three.js_logo.png -------------------------------------------------------------------------------- /demos/canvas/webgl/textures/charcoal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/textures/charcoal.png -------------------------------------------------------------------------------- /demos/canvas/webgl/textures/threejs_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/textures/threejs_logo.jpg -------------------------------------------------------------------------------- /demos/canvas/webgl/textures/webgl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/canvas/webgl/textures/webgl.png -------------------------------------------------------------------------------- /demos/canvas/webgl/threejs/Detector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * @author mr.doob / http://mrdoob.com/ 4 | */ 5 | 6 | var Detector = { 7 | 8 | canvas: !! window.CanvasRenderingContext2D, 9 | webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch ( e ) { return false; } } )(), 10 | workers: !! window.Worker, 11 | fileapi: window.File && window.FileReader && window.FileList && window.Blob, 12 | 13 | getWebGLErrorMessage: function () { 14 | 15 | var element = document.createElement( 'div' ); 16 | element.id = 'webgl-error-message'; 17 | element.style.fontFamily = 'monospace'; 18 | element.style.fontSize = '13px'; 19 | element.style.fontWeight = 'normal'; 20 | element.style.textAlign = 'center'; 21 | element.style.background = '#fff'; 22 | element.style.color = '#000'; 23 | element.style.padding = '1.5em'; 24 | element.style.width = '400px'; 25 | element.style.margin = '5em auto 0'; 26 | 27 | if ( ! this.webgl ) { 28 | 29 | element.innerHTML = window.WebGLRenderingContext ? [ 30 | 'Your graphics card does not seem to support WebGL.
', 31 | 'Find out how to get it here.' 32 | ].join( '\n' ) : [ 33 | 'Your browser does not seem to support WebGL.
', 34 | 'Find out how to get it here.' 35 | ].join( '\n' ); 36 | 37 | } 38 | 39 | return element; 40 | 41 | }, 42 | 43 | addGetWebGLMessage: function ( parameters ) { 44 | 45 | var parent, id, element; 46 | 47 | parameters = parameters || {}; 48 | 49 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 50 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 51 | 52 | element = Detector.getWebGLErrorMessage(); 53 | element.id = id; 54 | 55 | parent.appendChild( element ); 56 | 57 | } 58 | 59 | }; 60 | 61 | // browserify support 62 | if ( typeof module === 'object' ) { 63 | 64 | module.exports = Detector; 65 | 66 | } -------------------------------------------------------------------------------- /demos/canvas/webgl/threejs/DragControls.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Running this will allow you to drag three.js around the screen. 3 | * 4 | * feature requests: 5 | * 1. add rotation? 6 | * 2. axis lock 7 | * 3. inertia dragging 8 | * 4. activate/deactivate? prevent propagation? 9 | * 10 | * @author zz85 from https://github.com/zz85 11 | * follow on http://twitter.com/blurspline 12 | */ 13 | THREE.DragControls = function(_camera, _objects, _domElement) { 14 | 15 | if (_objects instanceof THREE.Scene) { 16 | _objects = _objects.children; 17 | } 18 | var _projector = new THREE.Projector(); 19 | 20 | var _mouse = new THREE.Vector3(), 21 | _offset = new THREE.Vector3(); 22 | var _selected; 23 | 24 | var me = this; 25 | 26 | _domElement.addEventListener('mousemove', onDocumentMouseMove, false); 27 | _domElement.addEventListener('mousedown', onDocumentMouseDown, false); 28 | _domElement.addEventListener('mouseup', onDocumentMouseUp, false); 29 | 30 | function onDocumentMouseMove(event) { 31 | 32 | event.preventDefault(); 33 | 34 | _mouse.x = (event.clientX / _domElement.width) * 2 - 1; 35 | _mouse.y = -(event.clientY / _domElement.height) * 2 + 1; 36 | 37 | var ray = _projector.pickingRay(_mouse, _camera); 38 | 39 | if (_selected) { 40 | var targetPos = ray.direction.clone().multiplyScalar(_selected.distance).addSelf(ray.origin); 41 | targetPos.subSelf(_offset); 42 | // _selected.object.position.copy(targetPos.subSelf(_offset)); 43 | 44 | var moveX, moveY, moveZ; 45 | 46 | moveX = moveY = moveZ = true; 47 | 48 | if (me.xLock) { 49 | moveX = false; 50 | } else if (me.yLock) { 51 | moveY = false; 52 | } else if (me.zLock) { 53 | moveZ = false; 54 | } 55 | 56 | // Reverse Matrix? 57 | if (moveX) _selected.object.position.x = targetPos.x; 58 | if (moveY) _selected.object.position.y = targetPos.y; 59 | if (moveZ) _selected.object.position.z = targetPos.z; 60 | 61 | return; 62 | 63 | } 64 | 65 | var intersects = ray.intersectObjects(_objects); 66 | 67 | if (intersects.length > 0) { 68 | 69 | _domElement.style.cursor = 'pointer'; 70 | 71 | } else { 72 | 73 | _domElement.style.cursor = 'auto'; 74 | 75 | } 76 | 77 | } 78 | 79 | function onDocumentMouseDown(event) { 80 | 81 | event.preventDefault(); 82 | 83 | _mouse.x = (event.clientX / _domElement.width) * 2 - 1; 84 | _mouse.y = -(event.clientY / _domElement.height) * 2 + 1; 85 | 86 | var ray = _projector.pickingRay(_mouse, _camera); 87 | var intersects = ray.intersectObjects(_objects); 88 | 89 | if (intersects.length > 0) { 90 | _selected = intersects[0]; 91 | 92 | _offset.copy(_selected.point).subSelf(_selected.object.position); 93 | 94 | _domElement.style.cursor = 'move'; 95 | 96 | } 97 | 98 | if (me.onHit) me.onHit(intersects.length > 0); 99 | 100 | 101 | 102 | } 103 | 104 | function onDocumentMouseUp(event) { 105 | 106 | event.preventDefault(); 107 | 108 | if (_selected) { 109 | 110 | if (me.onDragged) me.onDragged(); 111 | 112 | _selected = null; 113 | } 114 | 115 | _domElement.style.cursor = 'auto'; 116 | 117 | } 118 | 119 | 120 | } -------------------------------------------------------------------------------- /demos/canvas/webgl/threejs/stats.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author mrdoob / http://mrdoob.com/ 3 | */ 4 | 5 | var Stats = function () { 6 | 7 | var startTime = Date.now(), prevTime = startTime; 8 | var ms = 0, msMin = Infinity, msMax = 0; 9 | var fps = 0, fpsMin = Infinity, fpsMax = 0; 10 | var frames = 0, mode = 0; 11 | 12 | var container = document.createElement( 'div' ); 13 | container.id = 'stats'; 14 | container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false ); 15 | container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; 16 | 17 | var fpsDiv = document.createElement( 'div' ); 18 | fpsDiv.id = 'fps'; 19 | fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002'; 20 | container.appendChild( fpsDiv ); 21 | 22 | var fpsText = document.createElement( 'div' ); 23 | fpsText.id = 'fpsText'; 24 | fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; 25 | fpsText.innerHTML = 'FPS'; 26 | fpsDiv.appendChild( fpsText ); 27 | 28 | var fpsGraph = document.createElement( 'div' ); 29 | fpsGraph.id = 'fpsGraph'; 30 | fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff'; 31 | fpsDiv.appendChild( fpsGraph ); 32 | 33 | while ( fpsGraph.children.length < 74 ) { 34 | 35 | var bar = document.createElement( 'span' ); 36 | bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113'; 37 | fpsGraph.appendChild( bar ); 38 | 39 | } 40 | 41 | var msDiv = document.createElement( 'div' ); 42 | msDiv.id = 'ms'; 43 | msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none'; 44 | container.appendChild( msDiv ); 45 | 46 | var msText = document.createElement( 'div' ); 47 | msText.id = 'msText'; 48 | msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; 49 | msText.innerHTML = 'MS'; 50 | msDiv.appendChild( msText ); 51 | 52 | var msGraph = document.createElement( 'div' ); 53 | msGraph.id = 'msGraph'; 54 | msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0'; 55 | msDiv.appendChild( msGraph ); 56 | 57 | while ( msGraph.children.length < 74 ) { 58 | 59 | var bar = document.createElement( 'span' ); 60 | bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131'; 61 | msGraph.appendChild( bar ); 62 | 63 | } 64 | 65 | var setMode = function ( value ) { 66 | 67 | mode = value; 68 | 69 | switch ( mode ) { 70 | 71 | case 0: 72 | fpsDiv.style.display = 'block'; 73 | msDiv.style.display = 'none'; 74 | break; 75 | case 1: 76 | fpsDiv.style.display = 'none'; 77 | msDiv.style.display = 'block'; 78 | break; 79 | } 80 | 81 | } 82 | 83 | var updateGraph = function ( dom, value ) { 84 | 85 | var child = dom.appendChild( dom.firstChild ); 86 | child.style.height = value + 'px'; 87 | 88 | } 89 | 90 | return { 91 | 92 | REVISION: 11, 93 | 94 | domElement: container, 95 | 96 | setMode: setMode, 97 | 98 | begin: function () { 99 | 100 | startTime = Date.now(); 101 | 102 | }, 103 | 104 | end: function () { 105 | 106 | var time = Date.now(); 107 | 108 | ms = time - startTime; 109 | msMin = Math.min( msMin, ms ); 110 | msMax = Math.max( msMax, ms ); 111 | 112 | msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')'; 113 | updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) ); 114 | 115 | frames ++; 116 | 117 | if ( time > prevTime + 1000 ) { 118 | 119 | fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); 120 | fpsMin = Math.min( fpsMin, fps ); 121 | fpsMax = Math.max( fpsMax, fps ); 122 | 123 | fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')'; 124 | updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) ); 125 | 126 | prevTime = time; 127 | frames = 0; 128 | 129 | } 130 | 131 | return time; 132 | 133 | }, 134 | 135 | update: function () { 136 | 137 | startTime = this.end(); 138 | 139 | } 140 | 141 | } 142 | 143 | }; -------------------------------------------------------------------------------- /demos/dashboard/demographics.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Demographics Dashboard Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 128 | 129 | 130 | 131 | This browser does not seem to support HTML5 Canvas. 132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /demos/dashboard/productSales.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Product Sales Dashboard 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 103 | 104 | 105 | 106 | 107 | 111 | 112 |
113 | 114 |
115 | This browser does not seem to support HTML5 Canvas. 116 | 117 | 118 |
119 | 120 |
121 | 122 |
123 | 124 |
125 | 126 |
127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/basic.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TeeChart JavaScript MultiDimensional Charting Basic Example 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 39 | 40 | 41 | 42 | 43 | 44 | This browser does not seem to support HTML5 Canvas. 45 | 46 | 47 | This browser does not seem to support HTML5 Canvas. 48 | 49 | 50 |
51 | Data:
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/by_month_year.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Charting Tutorial 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/by_year.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Charting Tutorial 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 61 | 62 | 63 | 64 | 65 | Click on bars to show sum of clicked year:
66 |
67 | 68 | 69 | 70 |
71 | Data:
72 | 73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/from_json_string.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Charting Tutorial 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 43 | 44 | 45 | 46 | 47 | Basic example using data as a JSON string.
48 |
49 | 50 | 51 |
52 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/from_xml.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Charting from XML data 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 43 | 44 | 45 | 46 | 47 | Data in XML format, internally converted to JSON.
48 | 49 | 50 | 51 | 52 |
53 | 54 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/gauge_by_year.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Charting Gauges 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 76 | 77 | 78 | 79 | 80 | Click on bars to change gauge value:
81 |
82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/no_chart.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript MultiDimensional Tutorial 5 | 6 | 21 | 22 | 23 | 24 | 25 | 52 | 53 | 54 | 55 | 56 | This example executes a query (without creating a chart), and output results are used to create the following HTML <table>: 57 |
58 |
59 | 60 |
61 |
62 | The query is to sum all Degree values, grouped by Year: 63 |
64 |
65 | 66 | var result=Engine.query(Years, Degree);
67 | Engine.fillTable("table1", result, true); 68 | 69 |
70 |
71 | Source data:

72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/swap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/dashboard/tutorial/swap.jpg -------------------------------------------------------------------------------- /demos/dashboard/tutorial/tee-data-utils.css: -------------------------------------------------------------------------------- 1 | .teetable,table { border-collapse: collapse; border-bottom:1px solid darkgray; } 2 | .teetable,th,td { border-left:1px solid darkgray; border-right:1px solid darkgray; padding: 2px; } 3 | .teetable,th { background-color: olive; color: white; } 4 | .teetable,tbody,td { background-color: white; color: black; } 5 | .teetable,.totals { background-color: gray; color: white; } 6 | 7 | .teeselected { font-weight:bold; } 8 | .teedataeditor { width:100%; border:0 } 9 | -------------------------------------------------------------------------------- /demos/dashboard/tutorial/temperatures.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 4 | 24 5 | 26 6 | 20 7 | 22 8 | 18 9 | 25 10 | 14 11 | 19 12 | 27 13 | 26 14 | 18 15 | 16 | 17 | 20 18 | 21 19 | 24 20 | 18 21 | 21 22 | 19 23 | 27 24 | 11 25 | 18 26 | 27 27 | 24 28 | 17 29 | 30 | 31 | 22 32 | 25 33 | 26 34 | 21 35 | 20 36 | 20 37 | 22 38 | 13 39 | 19 40 | 23 41 | 25 42 | 19 43 | 44 | 45 | 22 46 | 23 47 | 26 48 | 19 49 | 22 50 | 16 51 | 25 52 | 15 53 | 19 54 | 21 55 | 26 56 | 21 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /demos/data/continents_and_countries.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/data/continents_and_countries.js -------------------------------------------------------------------------------- /demos/data/demo.txt: -------------------------------------------------------------------------------- 1 | 1,4567,USA 2 | 2,3678,Germany 3 | 3,6543,UK 4 | 4,1232,Japan 5 | 5,5521,Australia -------------------------------------------------------------------------------- /demos/data/demo.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /demos/data/product_sales.js: -------------------------------------------------------------------------------- 1 | var products= 2 | 3 | { "groups": [ 4 | { "name": "Software", 5 | "items": [ 6 | { "code": "6", "name": "Microsoft" }, 7 | { "code": "7", "name": "Google" }, 8 | { "code": "8", "name": "Oracle" }, 9 | { "code": "9", "name": "Embarcadero" } 10 | ] 11 | }, 12 | { "name": "Hardware", 13 | "items": [ 14 | { "code": "1", "name": "Intel" }, 15 | { "code": "2", "name": "AMD" }, 16 | { "code": "3", "name": "NVidia" }, 17 | { "code": "4", "name": "Apple" }, 18 | { "code": "5", "name": "Asus" }, 19 | { "code": "LE", "name": "Lenovo" } 20 | ] 21 | }, 22 | { "name": "SmartPhones", 23 | "items": [ 24 | { "code": "10", "name": "WindowsPhone" }, 25 | { "code": "11", "name": "Blackberry" }, 26 | { "code": "12", "name": "Android" }, 27 | { "code": "IP", "name": "iPhone" }, 28 | ] 29 | } 30 | ] 31 | } 32 | 33 | var sales= 34 | 35 | { "months": [ 36 | { "month": "1", 37 | "amounts": [ 38 | { "product": 1, "quantity": 285 }, 39 | { "product": 2, "quantity": 583 }, 40 | { "product": 3, "quantity": 685 }, 41 | { "product": 4, "quantity": 823 }, 42 | { "product": 5, "quantity": 42, "units": 2341 }, 43 | { "product": 6, "quantity": 142 }, 44 | { "product": 7, "quantity": 326 }, 45 | { "product": 8, "quantity": 281 }, 46 | { "product": 9, "quantity": 513 }, 47 | { "product": 12, "quantity": 214, "units": 7103 } 48 | ] 49 | }, 50 | { "month": "2", 51 | "amounts": [ 52 | { "product": 1, "quantity": 960 }, 53 | { "product": 2, "quantity": 687 }, 54 | { "product": 3, "quantity": 263 }, 55 | { "product": 4, "quantity": 477 }, 56 | { "product": 5, "quantity": 56 }, 57 | { "product": 6, "quantity": 121 }, 58 | { "product": 7, "quantity": 399 }, 59 | { "product": 8, "quantity": 192 }, 60 | { "product": 9, "quantity": 590 } 61 | ] 62 | }, 63 | { "month": "3", 64 | "amounts": [ 65 | { "product": 1, "quantity": 221, "units": 5214 }, 66 | { "product": 2, "quantity": 789 }, 67 | { "product": 3, "quantity": 610 }, 68 | { "product": 4, "quantity": 998 }, 69 | { "product": 5, "quantity": 68 }, 70 | { "product": 6, "quantity": 175 }, 71 | { "product": 7, "quantity": 312 }, 72 | { "product": 8, "quantity": 118 }, 73 | { "product": 9, "quantity": 500 }, 74 | { "product": 11, "quantity": 312 } 75 | ] 76 | } 77 | ] 78 | } 79 | 80 | var models = 81 | 82 | [ 83 | { "id": "4", 84 | "items": [ 85 | { "code": "1", "name": "iPod" }, 86 | { "code": "2", "name": "iTouch" }, 87 | { "code": "3", "name": "iPad" }, 88 | { "code": "4", "name": "iPhone" }, 89 | { "code": "5", "name": "MacBook" } 90 | ] 91 | }, 92 | { "id": "9", 93 | "items": [ 94 | { "code": "XE3", "name": "RAD Studio XE3" }, 95 | { "code": "HTML5", "name": "HTML5 Builder" } 96 | ] 97 | } 98 | ]; 99 | 100 | var modelSales = 101 | [ 102 | { "product": "4", "model": "HTML5", "quantity": 321 }, 103 | { "product": "9", "model": "RAD Studio XE3", "quantity": 456 } 104 | ]; 105 | 106 | var MonthNames=[ 107 | { "month":1, "name":"Jan", "quantity": 456 }, 108 | { "month":2, "name":"Feb" }, 109 | { "month":3, "name":"Mar" }, 110 | { "month":4, "name":"Apr" }, 111 | { "month":5, "name":"May" }, 112 | { "month":6, "name":"Jun", "quantity": 313 }, 113 | { "month":7, "name":"Jul" }, 114 | { "month":8, "name":"Aug" }, 115 | { "month":9, "name":"Sep" }, 116 | { "month":10, "name":"Oct" }, 117 | { "month":11, "name":"Nov" }, 118 | { "month":12, "name":"Dec" } 119 | ]; 120 | 121 | 122 | -------------------------------------------------------------------------------- /demos/export/ToPNG.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Export to Image Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 67 | 68 | 69 | 70 |
71 |
72 |
73 |

TeeChart for JavaScript To PNG and JPEG

74 |
75 |
76 |
77 | 78 |
79 |
80 |
81 |

PNG Image

82 |
    83 |
  • 84 |
    • 85 |
  • 86 |
    • 87 |
88 |
89 |
90 |
91 |

This is a PNG image:


92 | 93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 |

JPEG Image

101 |
    102 |
  • 103 |
    • 104 |
  • 105 |
    • 106 |
107 |
108 |
109 |
110 |

This is a JPEG image:


111 | 112 |
113 |
114 |
115 |
116 | 117 |
118 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /demos/extra/Draggable_TeeChart_JScript.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Bar Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 53 | 54 | 55 | 56 | Inverted Axis 57 | Legend 58 | Series1 59 | Series2 60 |
61 | Gradient 62 | Legend Shadow 63 | Legend at left 65 | 66 |
67 |
68 | This browser does not seem to support HTML5 Canvas. 69 | 70 |
71 | 72 | 73 | -------------------------------------------------------------------------------- /demos/extra/css_style.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript CSS styles Example 5 | 6 | 7 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 48 | 49 | 50 |
51 | 52 | This browser does not seem to support HTML5 Canvas. 53 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /demos/extra/google_gadget.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Google Gadget Example 5 | 6 | 7 | 8 | TeeChart is also available as a live Google Gadget, with the capability of loading data from Google Spreadsheets.
9 |
10 | (No teechart.js script is used in this example)
11 |
12 | This is an embedded live TeeChart gadget:
13 |
14 | 16 |
17 | Data comes from this Google Spreadsheet sample. 18 | 19 | 20 | -------------------------------------------------------------------------------- /demos/extra/insetshadows.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Floor Reflection Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 92 | 93 | 94 | 95 | Shadow 96 | Border 97 | Round 98 | Gradient 99 |
100 |
101 |
102 |
103 |
104 | This browser does not seem to support HTML5 Canvas. 105 | 106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /demos/extra/scroller_inside.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Scroller inside Chart Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 52 | 53 | 54 |
55 | This browser does not seem to support HTML5 Canvas. 56 | 57 |
58 | 59 | Range 60 | Inverted 61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /demos/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/favicon.ico -------------------------------------------------------------------------------- /demos/generator/img/arrow_down.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/generator/img/arrow_down.gif -------------------------------------------------------------------------------- /demos/generator/img/arrow_up.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/generator/img/arrow_up.gif -------------------------------------------------------------------------------- /demos/generator/img/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/generator/img/edit.png -------------------------------------------------------------------------------- /demos/generator/img/header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/generator/img/header.gif -------------------------------------------------------------------------------- /demos/generator/img/header_over.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/generator/img/header_over.gif -------------------------------------------------------------------------------- /demos/generator/src/styles.css: -------------------------------------------------------------------------------- 1 | select { font-family: verdana; color: white; background-color:#666;} 2 | 3 | .buti { 4 | -moz-box-shadow:inset 0px -1px 5px 0px #fce2c1; 5 | -webkit-box-shadow:inset 0px -1px 5px 0px #fce2c1; 6 | box-shadow:inset 0px -1px 5px 0px #fce2c1; 7 | background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); 8 | background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); 9 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); 10 | background-color:#ffc477; 11 | -moz-border-radius:12px; 12 | -webkit-border-radius:12px; 13 | border-radius:12px; 14 | border:1px solid #eeb44f; 15 | display:inline-block; 16 | color:#ffffff; 17 | font-family:Arial; 18 | font-size:12px; 19 | font-weight:bold; 20 | padding:1px 2px; 21 | margin: 2px 1px; 22 | text-decoration:none; 23 | text-shadow:1px 1px 3px #cc9f52; 24 | }.buti:hover { 25 | background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); 26 | background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); 27 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); 28 | background-color:#fb9e25; 29 | }.buti:active { 30 | position:relative; 31 | top:1px; 32 | } 33 | /* This imageless css button was generated by CSSButtonGenerator.com */ 34 | 35 | table.sample { 36 | border-width: 2px; 37 | border-spacing: 4px; 38 | border-style: solid; 39 | border-color: green; 40 | border-collapse: separate; 41 | background-color: white; 42 | font-family: Arial; 43 | } 44 | table.sample th { 45 | border-width: 1px; 46 | padding: 2px; 47 | border-style: dotted; 48 | border-color: red; 49 | background-color: white; 50 | } 51 | table.sample td { 52 | border-width: 1px; 53 | padding: 2px; 54 | border-style: dotted; 55 | border-color: red; 56 | } 57 | 58 | th.disabled { 59 | color: silver; 60 | } 61 | td.disabled { 62 | color: silver; 63 | } 64 | 65 | input.inline-editor { 66 | border: 0px; 67 | outline: none; 68 | } 69 | -------------------------------------------------------------------------------- /demos/generator/src/teechart-generator.js: -------------------------------------------------------------------------------- 1 | function arrayToString(a) { 2 | var s=""; 3 | if (a) { 4 | for(var t=0; t0) s+=','; 6 | if (typeof a[t] === "string") 7 | s+="'"+a[t]+"'"; 8 | else 9 | s+=a[t]; 10 | } 11 | } 12 | return s; 13 | } 14 | 15 | function getType(s) { 16 | if (s instanceof Tee.Donut) return "Tee.Donut"; else 17 | if (s instanceof Tee.Bubble) return "Tee.Bubble"; else 18 | if (s instanceof Tee.Candle) return "Tee.Candle"; else 19 | if (s instanceof Tee.Pie) return "Tee.Pie"; else 20 | if (s instanceof Tee.HorizBar) return "Tee.HorizBar"; else 21 | if (s instanceof Tee.Bar) return "Tee.Bar"; else 22 | if (s instanceof Tee.HorizArea) return "Tee.HorizArea"; else 23 | if (s instanceof Tee.Line) return "Tee.Line"; else 24 | if (s instanceof Tee.PointXY) return "Tee.PointXY"; else 25 | if (s instanceof Tee.Area) return "Tee.Area"; 26 | if (s instanceof Tee.SmoothLine) return "Tee.SmoothLine"; else return ""; 27 | } 28 | 29 | function emitAnnotation(prefix,a) { 30 | var s=""; 31 | if (a.text!="") s+=prefix+".text='"+a.text+"';\n"; 32 | if (!a.transparent) s+=prefix+".transparent=false;\n"; 33 | return s; 34 | } 35 | 36 | function colorsToString(c) { 37 | var s=""; 38 | for (var t=0; t0) s+=','; 40 | s+='"'+c[t]+'"'; 41 | } 42 | return s; 43 | } 44 | 45 | function scriptify(chart) { 46 | var w=window.open('','',''), d=w.document, se; 47 | 48 | var sc=' 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 52 | 53 | 54 |
55 |
56 |
57 |

TeeChart for JavaScript Horizontal Area

58 |
59 |
60 |
61 | 62 |
63 |
64 |
65 |

Options Change the aspect of the Chart

66 |
    67 |
  • 68 |
    • 69 |
70 |
71 |
72 |
73 | Legend 74 | Series1 75 | Series2 76 |   Stacked: 77 | 82 | Gradient 83 | Shadow 84 | Marks 85 | Clip 86 | Smooth 87 | 88 |
89 |
90 |
91 | 92 |
93 |
94 |
95 |

Horizontal Area

96 |
    97 |
  • 98 |
    • 99 |
100 |
101 |
102 |
103 | 104 | 105 |
106 |
107 |
108 |
109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/series/bar/barnegative.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Bar Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 55 | 56 | 57 |
58 |
59 |
60 |

TeeChart for JavaScript Negative Values

61 |
62 |
63 |
64 |
65 |
66 |
67 |

Options Change the aspect of the Chart

68 |
    69 |
  • 70 |
    • 71 |
72 |
73 |
74 |
75 | Inverted Axis 76 | Legend 77 | Series1 78 | Series2 79 | 80 | Gradient 81 | Legend Shadow 82 | Legend at left 83 | 84 | Series1 ColorEach 85 | 86 | 90 |
91 |
92 |
93 | 94 |
95 |
96 |
97 |

Negative Values

98 |
    99 |
  • 100 |
    • 101 |
102 |
103 |
104 |
105 | 106 | 107 |
108 |
109 |
110 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /demos/series/bar/volume.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Volume Bar Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 60 | 61 | 62 |
63 |
64 |
65 |

TeeChart for JavaScript Volume

66 |
67 |
68 |
69 |
70 |
71 |
72 |

Volume

73 |
    74 |
  • 75 |
    • 76 |
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /demos/series/bubble/bubble.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Bubble Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 45 | 46 | 47 | 48 |
49 |
50 |
51 |

TeeChart for JavaScript Bubble

52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 |

Options Change the aspect of the Chart

60 |
    61 |
  • 62 |
    • 63 |
64 |
65 |
66 |
67 | Pointer Style: 68 | 77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |

Bubble

85 |
    86 |
  • 87 |
    • 88 |
89 |
90 |
91 |
92 | 93 | 94 |
95 |
96 |
97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /demos/series/datasource.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Series DataSource Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 53 | 54 | 55 |
56 |
57 |
58 |

TeeChart for JavaScript Tee Chart from Series

59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 |

Series 1

67 |
    68 |
  • 69 |
    • 70 |
71 |
72 |
73 |
74 | 75 | This browser does not seem to support HTML5 Canvas. 76 | 77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |

Series 2

85 |
    86 |
  • 87 |
    • 88 |
89 |
90 |
91 |
92 | 93 | This browser does not seem to support HTML5 Canvas. 94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 | -------------------------------------------------------------------------------- /demos/series/donut/donut.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Donut Series Example 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |

TeeChart for JavaScript Donut

56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |

Options Change the aspect of the Chart

64 |
    65 |
  • 66 |
    • 67 |
68 |
69 |
70 |
71 |
72 | Gradient 73 | Shadow 74 | Marks 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |
83 |

Donut

84 |
    85 |
  • 86 |
    • 87 |
88 |
89 |
90 |
91 | 92 | 93 |
94 |
95 |
96 |
97 | 98 | 99 | -------------------------------------------------------------------------------- /demos/series/donut/multidonut.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Multiple Donut Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 64 | 65 | 66 |
67 |
68 |
69 |

TeeChart for JavaScript Multiple Donut

70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 |

Options Change the aspect of the Chart

78 |
    79 |
  • 80 |
    • 81 |
82 |
83 |
84 |
85 |
86 | Concentric 87 | Donut 1 88 | Donut 2 89 | Donut 3 90 | Donut 4 91 | Donut 5 92 |
93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 |

Multiple Donut

101 |
    102 |
  • 103 |
    • 104 |
105 |
106 |
107 |
108 | 109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | -------------------------------------------------------------------------------- /demos/series/line/linepoint.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Line and Point Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 72 | 73 | 74 | 75 |
76 |
77 |
78 |

TeeChart for JavaScript Line and Point

79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |

Line and Point

87 |
    88 |
  • 89 |
    • 90 |
91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 |
99 |
100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /demos/series/line/stackedline.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Stacked Line Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 49 | 50 | 51 | 52 | 53 |
54 |
55 |
56 |

TeeChart for JavaScript Stacked Lines

57 |
58 |
59 |
60 |
61 |
62 |
63 |

Options Change the aspect of the Chart

64 |
    65 |
  • 66 |
    • 67 |
68 |
69 |
70 |
71 |
72 | Stacked: 73 | 78 | 79 | Stairs 80 | Pointers 81 | Smooth 82 | View 3D 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |

Stacked Lines

91 |
    92 |
  • 93 |
    • 94 |
95 |
96 |
97 |
98 | 99 | 100 |
101 |
102 |
103 |
104 | 105 | 106 | -------------------------------------------------------------------------------- /demos/series/maps/world_cities.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steema/TeeChartJS/a958b8ba77f1ff9a6480e6ac60d126c4ad45d7c1/demos/series/maps/world_cities.js -------------------------------------------------------------------------------- /demos/series/maps/worldmap.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | TeeChart HTML5 Canvas Charting for JavaScript Geo World Map Example 24 | 25 | 54 | 55 | 96 | 97 | 98 | 99 | 100 |
101 |
102 |
103 |

TeeChart for JavaScript World Map

104 |
105 |
106 |
107 | 108 |
109 |
110 |
111 |

World Map

112 |
    113 |
  • 114 |
    • 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |

USA Map

128 |
    129 |
  • 130 |
    • 131 |
132 |
133 |
134 |
135 | 136 |
137 |
138 |
139 |
140 | 141 | 142 | -------------------------------------------------------------------------------- /demos/series/pie/multipie.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Multiple Pie Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 46 | 47 | 48 |
49 |
50 |
51 |

TeeChart for JavaScript Multiple Pie

52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 |

Options Change the aspect of the Chart

60 |
    61 |
  • 62 |
    • 63 |
64 |
65 |
66 |
67 | Pie1 68 | Pie2 69 | Pie3 70 | Pie4 71 | Pie5
72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 |

Multiple Pie

80 |
    81 |
  • 82 |
    • 83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /demos/sources/FromTable.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TeeChart JavaScript Table to Series Example 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 63 | 64 | 65 |
66 |
67 |
68 |

TeeChart for JavaScript Tee Chart from HTML <TABLE>

69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |

Options Change the values of the Chart

77 |
    78 |
  • 79 |
    • 80 |
81 |
82 |
83 |
84 | 85 | 95 |
96 |
97 | 98 | 99 | 100 | 101 | 102 | 103 |
FruitSugarFiber
Apple51
Kiwi24
Banana17
104 | 105 |
106 | By Columns
107 |
108 |
109 |
110 | 111 |
112 |
113 |
114 |

Tee Chart from HTML <TABLE>

115 |
    116 |
  • 117 |
    • 118 |
119 |
120 |
121 |
122 |
123 | This browser does not seem to support HTML5 Canvas. 124 | 125 |
126 |
127 |
128 |
129 | 130 | 131 | -------------------------------------------------------------------------------- /demos/sources/FromText.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Text to Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 51 | 52 | 53 |
54 |
55 |
56 |

TeeChart for JavaScript Text to Chart

57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 |

Options Change the values of the Chart

65 |
    66 |
  • 67 |
    • 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |

80 |
81 |

90 | 91 |
92 | 93 | This browser does not seem to support HTML5 Canvas. 94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 | -------------------------------------------------------------------------------- /demos/sources/battery.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Battery Level Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 67 | 68 | 69 |
70 |
71 |
72 |

TeeChart for JavaScript Battery Level

73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |

Battery Level Bar

81 |
    82 |
  • 83 |
    • 84 |
85 |
86 |
87 |
88 | This browser does not seem to support HTML5 Canvas. 89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |

Battery Level Pie

97 |
    98 |
  • 99 |
    • 100 |
101 |
102 |
103 |
104 | This browser does not seem to support HTML5 Canvas. 105 |
106 |
107 |
108 |
109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/sources/datetime.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Date Time Chart Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 63 | 64 | 65 |
66 |
67 |
68 |

TeeChart for JavaScript DataTime Data

69 |
70 |
71 |
72 |
73 |
74 |
75 |

DataTime Data

76 |
    77 |
  • 78 |
    • 79 |
80 |
81 |
82 |
83 | This demo uses Steven Levithan's date.format.js script to format date time objects to strings. 84 |
85 | Date Format: 86 | 99 |
100 | 101 |
102 | This browser does not seem to support HTML5 Canvas. 103 | 104 |
105 |
106 |
107 |
108 | 109 | 110 | -------------------------------------------------------------------------------- /demos/sources/fromarray.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Array Chart Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 50 | 51 | 52 |
53 |
54 |
55 |

TeeChart for JavaScript Data from Arrays

56 |
57 |
58 |
59 |
60 |
61 |
62 |

Data from Arrays

63 |
    64 |
  • 65 |
    • 66 |
67 |
68 |
69 |
70 |
71 | This browser does not seem to support HTML5 Canvas. 72 | 73 |
74 |
75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /demos/sources/fromtypedarray.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript Typed Array Chart Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 57 | 58 | 59 |
60 |
61 |
62 |

TeeChart for JavaScript Data from Typed Array

63 |
64 |
65 |
66 |
67 |
68 |
69 |

Data from Typed Array

70 |
    71 |
  • 72 |
    • 73 |
74 |
75 |
76 |
77 |
78 | This browser does not seem to support HTML5 Canvas. 79 | 80 |
81 |
82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /demos/sources/fromxml.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TeeChart JavaScript XML to Series Example 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 45 | 46 | 47 |
48 |
49 |
50 |

TeeChart for JavaScript Tee Chart from XML

51 |
52 |
53 |
54 |
55 |
56 |
57 |

Tee Chart from XML

58 |
    59 |
  • 60 |
    • 61 |
62 |
63 |
64 |
65 |
66 | 73 |

74 | 75 |
76 | 77 | 78 | This browser does not seem to support HTML5 Canvas. 79 | 80 |
81 |
82 |
83 |
84 | 85 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /demos/sources/styles.css: -------------------------------------------------------------------------------- 1 | table { border:1px solid black} -------------------------------------------------------------------------------- /demos/tests/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TeeChart QUnit Tests and Code Coverage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /demos/tests/src/teechart-animations.js: -------------------------------------------------------------------------------- 1 | /* 2 | TeeChart(tm) for JavaScript(tm) 3 | @fileOverview TeeChart for JavaScript(tm) 4 | v1.4 December 2012 5 | Copyright(c) 2012 by Steema Software SL. All Rights Reserved. 6 | http://www.steema.com 7 | 8 | Licensed with commercial and non-commercial attributes, 9 | specifically: http://www.steema.com/licensing/html5 10 | 11 | JavaScript is a trademark of Oracle Corporation. 12 | */ 13 | var Tee=Tee||{}; 14 | (function(){"undefined"!==typeof exports&&(exports.Tee=Tee);Tee.FadeAnimation=function(g){Tee.Animation.call(this,g);this.kind="in";var f=this,c;this.fade={};this.setTransp=function(a){"out"==f.kind&&(a=1-a);c.legend&&(f.chart.legend.format.transparency=a);c.walls&&(f.chart.walls.transparency=a);c.series&&f.chart.series.each(function(d){d.format.transparency=a});c.marks&&f.chart.series.each(function(d){d.marks.transparency=a});c.title&&(f.chart.title.format.transparency=a);c.axes&&(f.chart.axes.transparency= 15 | a);c.panel&&(f.chart.panel.format.transparency=a)};this.start=function(){c=this.fade;this.setTransp(1)};this.stop=function(){this.setTransp(0)};this.doStep=function(a){f.setTransp(1-a)}};Tee.FadeAnimation.prototype=new Tee.Animation;Tee.SeriesAnimation=function(g){function f(d,a,c){a.automatic=!1;var f=.5*(d.oldmin+d.oldmax);d=.5*(d.oldmax-d.oldmin);a.maximum=f+c*d;a.minimum=f-c*d}Tee.Animation.call(this,g);g instanceof Tee.Series?(this.series=g,this.chart=g.chart):this.series=null;this.oldmax=this.oldmin= 16 | 0;this.oldauto=!0;var c=1,a=this;this.kind="axis";this.getAxis=function(){var a=this.series||this.chart.series.firstVisible();return a?a.mandatoryAxis:null};this.doStep=function(d){var b=a.getAxis();b&&(b.automatic=!1);"axis"==a.kind?f(a,b,1+100*(1-d)):a.chart.series.each(function(b){if(!a.series||a.series===b){var f=b.data.values,g=b.data._old,e=f.length;if(b instanceof Tee.Pie)b.rotation=360*(1-d),c=d;else if("each"==a.kind){var h=e*d|0;for(b=0;b|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g,"sh_predef_var",-1],[/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,"sh_predef_func",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2],[/(?:?)|(?:?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[//g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[//g,"sh_comment",-2],[/