anchart3d

A library for 3-dimensional charts utilizing three.js and tween.js

Contributors

• Amar Bajric (amarbajric)
• Michael Fuchs (deKilla)
• Timo Hasenbichler (timoooo)

#Preface

This project has been developed by three ambitious students, who are studying at the university "FH Joanneum" in Graz, Austria. The project is an open source library for visualizing JSON data as three dimensional Charts (e.g. Pie Charts or Bar Charts), which are not just perspective 3D, but are also interactive (e.g. you can zoom in/out or rotate), and therefore visualize a lot more data. It offers an intuitive configuration and is overall very comprehensible due to the structured and easy-to-use API.

Getting started

Just include the anchart3d.js in your document. All other dependencies are bundled into that file and you're ready to go.

<script type="text/javascript" src="js/anchart3d.js"></script>

There is also an optional stylesheet file "anchart3d.css", that contains basic styling information to get things started easier. After that, you can (optionally) configure the chart and initialize it:

var configuration = {
    "details": true,
    "tooltip": true,
    "showOnScreenControls": true,
    "legend": true,
    "startAnimation": true,
    "antialias": true,
};

 var pieChart = anchart3d.createChart("anchart3d")
    .setConfig(configuration)
    .pieChart()
    .data(jsonData)
    .draw();

createChart("anchart3d") points to a

in the document having the id="anchart3d". This div will contain all chart related elements. The name or the id respectively, can be anything but has to the same in the div and must be passed as argument to the createChart() method. For an explanation of the the configuration parameters and and overview, refer to the according chapter.

Further reading

Feel free to have a look at the project website to find out about all the possiblities and how to use them:

https://dekilla.github.io/anchart3d