Skip to content

Abhishek-Govula/angular-images-scatter-chart-directive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Scatter chart(d3.js) with images Angular JS directive

An application which uses Angular JS directive for rendering a D3.js scatter chart with images.

The directive is here

Requires Jquery, D3.js Don't forget to include the style

D3js scatter chart inspired from here

Here are the parameters which can/should be added to the config object

Variable Name Datatype Default Value Required
timeseries boolean false Optional
label Object label: { xAxis: "x-axis", yAxis: "y-axis" } Optional
margin Object margin: { top: 20, right: 20, bottom: 30, left: 30 } Optional
ticks Object ticks: { xAxis: 3, yAxis: 5 } } Optional
images Array[Objects] images: [ { id: "imageId", url: "images/image.png" },.... ] Required
animationDuration number(integer) 500 Optional
animRadius number(integer) 4 Optional
circleRadius number(integer) 20 Optional

Here are the attributes for the directive

Attribute Name Data Type Example
id string my-scatter-chart1
chartheight number 400
chartdata Array[JSONs] [{ "title": "New", "xValue": 1459490422000 , "yValue": 5, "imageId": "plant", "action": "danger" }]
config JSON Check below in structure of data example

Structure of data example

config object

{ timeseries: true, label: { xAxis: "Time", yAxis: "Stages" }, margin: { top: 20, right: 20, bottom: 30, left: 40 }, ticks: { xAxis: 5, yAxis: 5 }, images: [ { id: "tree", url: "images/tree.png" },{ id: "sapling", url: "images/sapling.jpg" },{ id: "plant", url: "images/plant.png" },{ id: "flower", url: "images/flower.png" } ], animationDuration: 300, animRadius: 6, circleRadius: 20 }

Data attribute

[{ "title": "New", "xValue": 1459490422000 , "yValue": 5, "imageId": "plant", "action": "danger" },{ "title": "Sample", "xValue": 1459490450000, "yValue": 7, "imageId": "tree", "action": "danger" },{ "title": "Test Header", "xValue": 1459490455000, "yValue": 6, "imageId": "flower", "action": "safe" } ]

About

angular js directive for responsive scatter chart with images

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published