• Stars
    star
    982
  • Rank 44,395 (Top 1.0 %)
  • Language
    JavaScript
  • License
    BSD 3-Clause "New...
  • Created almost 8 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS

GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

Overview

GraphicsJS is a JavaScript graphics library that allows you to draw absolutely anything, including any sort of interactive and animated graphics with any visual effects.

You can think of GraphicsJS as a paintbox with a brush, GraphicsJS may be used for data visualization, charting, game design or else. AnyChart charting libraries rendering is based fully on it.

You can find some specific samples at http://www.graphicsjs.org/, along with source code: galaxy, rain, bonfire, Bender, and a playable 15-puzzle. All of these were created with GraphicsJS only.

GraphicsJS allows to visualize complicated mathematical algorithms very conveniently and easily, e.g. the galaxy demo is based on Archimedean spiral.

GraphicsJS has one the most powerful line drawing features among SVG/VML based graphics libraries that provide only Bezier curves out of the box. But GraphicsJS is great at working with mathematical functions. As a result, GraphicsJS allows you to draw not only Bezier curves out of the box, but literally anything; for example, you can draw some arc very quickly, whereas other graphics libraries will make you arrange it through numerous different curves. And surely there are basic shapes available

GraphicsJS has the richest text features, for example, SVG/VML technologies do not provide this out of the box, as well as most of other JavaScript drawing libraries. GraphicsJS supports multiline texts and also offers text measurement, including width, height, as well as wrap, overflow, indent, spacing, align, etc.

GraphicsJS has implements the Virtual DOM which makes drawing more robust and manageable.

GraphicsJS uses smart layering system for elements and layers.

GraphicsJS supports z-index. Typically, if you ever decided to change the overlapping order, you would have to erase everything and draw the whole picture again, from scratch. With GraphicsJS, you are given the power to arrange this dynamically, which is extremely helpful when you are creating some big graphical thing and it is important for you to specify which elements must be seen at one moment or another.

GraphicsJS provides a convenient Transformations API that allows to move, scale, rotate and shear both elements and groups of elements. Transformations, in good hands, when used along with flexible Event Model and Virtual DOM, is a very powerfull tool.

GraphicsJS supports legacy browsers including IE6+.

GraphicsJS API is very convenient to use. GraphicsJS API is very concise and provides chaining support, which makes it possible to use a dozen lines of code where other libraries require a hundred.

GraphicsJS is built on a very reliable technology, Google Closure, just like Google Mail, Google Calendar, Google Drive, and so on.

Quick Start

To get started with GraphicsJS create simple HTML document and copy paste the following code (or just grab the sample from playground):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<script src="https://cdn.anychart.com/releases/v8/js/graphics.min.js"></script>
</head>
<body>
	<div id="stage-container" style="width: 400px; height: 375px;"></div>
	<script>
		// create a stage for the Deathly Hallows symbol
        stage = acgraph.create('stage-container');
        // draw the square
        stage.rect(5, 5, 350, 300);
        // draw the circle
        stage.circle(177.5, 205, 100);
        // draw the triangle
        stage.path()
            .moveTo(5, 305)
            .lineTo(175, 5)
            .lineTo(355, 305);
        // draw the wand in the middle
        stage.path()
            .moveTo(175, 5)
            .lineTo(175, 305);
	</script>
</body>
</html>

Launch the page in your browser and here you are: you have created your first drawing with GraphicsJS. See documentation and API to learn more.

Articles

Building

Coming soon.

Contributing

To contribute to AnyChart project please:

  • Fork GraphicsJS repository.
  • Create a branch from the develop branch.
  • Make any changes you want to contribute.
  • Create a pull request against the develop branch.

GitHub documentation: Forking repositories. GitHub documentation: Collaborating using pull requests.

Links

More Repositories

1

AnyChart-Android

AnyChart Android Chart is an amazing data visualization library for easily creating interactive charts in Android apps. It runs on API 19+ (Android 4.4) and features dozens of built-in chart types.
Java
2,208
star
2

AnyChart

AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, the library works easily with any development stack.
JavaScript
367
star
3

AnyChart-iOS

Swift
71
star
4

AnyChart-NodeJS

ARCHIVED. AnyChart NodeJS module provides an easy way to generate SVG, JPG and PNG images of the charts on the server side.
JavaScript
44
star
5

AnyChart-React

Intuitive and easy to use React plugin that allows you to create and work with AnyChart JavaScript Charts
JavaScript
37
star
6

api.anychart.com

AnyChart Products API Reference
HTML
26
star
7

Node.js-Report-Server

ARCHIVED. AnyChart Node.js Report Server is a lightweight web server that provides API for generating vector graphics (PDF, SVG, or PS), bitmap images (PNG, JPG, or TIFF), PDF reports, and data in CSV and XLSX (Excel).
JavaScript
23
star
8

docs.anychart.com

AnyChart Documentation
Shell
20
star
9

export-server

Export Server is a Java based server intended for exporting charts in .pdf, .jpg, .png, .svg, .csv, .xslx, .json and .xml formats
Clojure
20
star
10

gjstags

ctags for JavaScript based on Google Closure Compiler
Java
18
star
11

AnyChart-Meteor

The package provides a simple way to pull in AnyChart component in Meteor.
JavaScript
17
star
12

AnyChart-AngularJS-v1.x

AngularJS v1.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with AngularJS
15
star
13

AnyChart-jQuery

jQuery plugin for AnyChart provides an easy way to use AnyChart JavaScript Charts with jQuery framework.
JavaScript
12
star
14

AnyChart-Ember

AnyChart Component for Ember CLI provides an easy way to use AnyChart JavaScript Charts with Ember Framework.
JavaScript
11
star
15

closure-linter-wrapper

Wrapper for Google Closure Linter that removes the limitation of 80 symbols in a row
Python
10
star
16

anychart-v6-to-v7-migration-tool

JavaScript
10
star
17

chart-editor

AnyChart Editor is an Extension of AnyChart that allows to configure charts via UI
JavaScript
10
star
18

amap-converter

Python
9
star
19

playground

JavaScript
6
star
20

AnyChart-AngularJS-v2.x

AngularJS v2.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with Angular2 Framework
TypeScript
2
star
21

anychart-maps

AnyChart Maps Collection
JavaScript
2
star
22

reference-engine

Clojure
1
star
23

playground-samples-parser

Clojure
1
star
24

internal.anychart.com

JavaScript
1
star