README.md

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" } ]