As part of amCharts 4, we've built a powerful SVG graphics and interface building engine. Incidentally, you can use it to build all kinds of interactive SVG graphics, even interfaces with controls, that are not charts in purpose.
Creating generic container
For example, the below code will create a container with a draggable circle in it.
// let's create a very basic Container let container = am4core.create("chartdiv", am4core.Container); container.width = am4core.percent(100); container.height = am4core.percent(100); container.background.opacity = 1; container.background.fill = am4core.color("#dadada"); container.background.fillOpacity = 0.5; // Now let's create a circle in our container let circle = container.createChild(am4core.Circle); circle.radius = 50; // let's put it in the middle. You can set x and y coordinates both as percent or as pixels. circle.x = am4core.percent(50); circle.y = am4core.percent(50); circle.fill = am4core.color("#6794dc"); // Make it draggable with a mouse or with touch circle.draggable = true; // And, for the hell of it, make it inert, so that // when we drag it and release it will continue in // the same direction gradually slowing down. circle.inert = true; // Enable export menu container.exporting.menu = new am4core.ExportMenu();
// Let's create a very basic Container var container = am4core.create("chartdiv", am4core.Container); container.width = am4core.percent(100); container.height = am4core.percent(100); container.background.opacity = 1; container.background.fill = am4core.color("#dadada"); container.background.fillOpacity = 0.5; // Now let's create a circle in our container var circle = container.createChild(am4core.Circle); circle.radius = 50; // let's put it in the middle. You can set x and y coordinates both as percent or as pixels. circle.x = am4core.percent(50); circle.y = am4core.percent(50); circle.fill = am4core.color("#6794dc"); // Make it draggable with a mouse or with touch circle.draggable = true; // And, for the hell of it, make it inert, so that // when we drag it and release it will continue in // the same direction gradually slowing down. circle.inert = true; // Enable export menu container.exporting.menu = new am4core.ExportMenu();
// Let's create a very basic Container var container = am4core.createFromConfig({ "width": "100%", "height": "100%", "background": { "opacity": 1, "fill": "#dadada", "fillOpacity": 0.5 }, // Now let's create a circle in our container "children": [{ "type": "Circle", "radius": 50, "x": "50%", "y": "50%", "fill": "#6794dc", // Make it draggable with a mouse or with touch "draggable": true, // And, for the hell of it, make it inert, so that // when we drag it and release it will continue in // the same direction gradually slowing down. "inert": true }], "exporting": { "menu": {} } },"div1", am4core.Container);
Example
Here's how this looks in real life:
See the Pen amCharts V4: Non-chart usage by amCharts (@amcharts) on CodePen.
Go ahead, drag the blue circle.
Just in case you feel adventurous, here's an enhanced version of the demo above. Same old blue circle you've come to know and love, but better - with hover states, tooltip, and move animations.
See the Pen amCharts V4: Non-chart usage, states & events by amCharts (@amcharts) on CodePen.
This is just a preview of the topic. Eventually, this article will be filled out with detailed information. Stay tuned.