Related
I am trying to create a multidimensional array by mapping an array of strings to a 2D array.
var dataFieldArray = ["LegPenetration", "Temperature"];
var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]]
The expected output should be as follows:
var data = [[{"field": LegPenetration, "x": 0, "y": 0}, {"field": LegPenetration, "x": 10, "y": 20}, {"field": LegPenetration, "x": 20, "y": 30}, {"field": LegPenetration, "x": 30, "y": 40}, {"field": LegPenetration, "x": 40, "y": 50}],
[{"field": Temperature, "x": 0, "y": 0}, {"field": Temperature, "x": 10, "y": 200}, {"field": Temperature, "x": 20, "y": 250}, {"field": Temperature, "x": 30, "y": 400}, {"field": Temperature, "x": 40, "y": 450}]]
In the code below, I have mapped xValueArray and yValueArray together to get the resulting 2D array as shown above. I have tried mapping the dataField array the same way but to no avail. Any help is greatly appreciated!
const yValueArray = [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]];
const xValueArray = [0, 10, 20, 30, 40];
const data = yValueArray.map(data =>
data.map((d, i) => ({
x: xValueArray[i],
y: d
}))
);
It sounds like you want to add a field property. Here's a way to do that that doesn't modify the original objects using only ES5-level language features and Object.assign (which is ES2015, but polyfillable):
var result = multidimensionalArray.map(function(array, index) {
var field = dataFieldArray[index];
return array.map(function(object) {
return Object.assign({}, object, {field: field});
});
});
Live Example:
var dataFieldArray = ["LegPenetration", "Temperature"];
var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];
var result = multidimensionalArray.map(function(array, index) {
var field = dataFieldArray[index];
return array.map(function(object) {
return Object.assign({}, object, {field: field});
});
});
console.log(result);
.as-console-wrapper {
max-height: 100% !important;
}
Or with ES2015 and ES2018 features:
const result = multidimensionalArray.map((array, index) =>
array.map(object => ({...object, field: dataFieldArray[index]}))
);
Live Example:
const dataFieldArray = ["LegPenetration", "Temperature"];
const multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];
const result = multidimensionalArray.map((array, index) =>
array.map(object => ({...object, field: dataFieldArray[index]}))
);
console.log(result);
.as-console-wrapper {
max-height: 100% !important;
}
I would like to make bubble chart like the following using amcharts and I have come across a bubble chart example in amcharts (1). I would like to get some help/guidance on how to make axis range like the sample which I have given below. Any help would be appreciated.
/**
* Plugin: Arrange data pints into separate value "bands"
* Relies on `bandValueScope` being there in the chart config
*/
AmCharts.addInitHandler( function( chart ) {
// check if bandValueScope is set
if ( chart.bandValueScope === undefined )
return;
// iterate through data points and apply step value
for ( var i = 0; i < chart.dataProvider.length; i++ ) {
var add = chart.bandValueScope * i;
for ( var x = 0; x < chart.graphs.length; x++ ) {
chart.dataProvider[ i ][ chart.graphs[ x ].yField ] += add;
}
}
// set up Y axis labelFunction to recalculate those values as well
for ( var i = 0; i < chart.valueAxes.length; i++ ) {
var axis = chart.valueAxes[ i ];
if ( axis.applyBandValues ) {
// set up labelFunction to recalculate labels
axis.labelFunction = function( value, a, b ) {
var newValue = value - Math.floor( value / chart.bandValueScope ) * chart.bandValueScope;
if ( newValue === 0 )
return "";
newValue = newValue.toString();
if ( axis.unit )
newValue += axis.unit;
return newValue;
}
// go through guides and recalculate their values as well
if ( axis.guides && axis.guides.length ) {
for ( var x = 0; x < axis.guides.length; x++ ) {
var add = chart.bandValueScope * x;
var guide = axis.guides[ x ];
if ( guide.value !== undefined )
guide.value += add;
if ( guide.toValue !== undefined )
guide.toValue += add;
}
}
}
}
}, [ "xy" ] );
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 70,
"balloon": {
"fixedPosition": true,
},
/**
* `bandValueScope` is a custom paramater which will be used by a plugin
* to restructure data so that each data point is recalculated into a new
* band
*/
"bandValueScope": 50,
"dataProvider": [ {
// North America
// Home
"x1": 35,
"y1": 30,
"v1": 35,
// Health
"x2": 31,
"y2": 26,
"v2": 35,
// Life
"x3": 21,
"y3": 32,
"v3": 20,
// Long term
"x4": 23,
"y4": 35,
"v4": 29,
// Auto
"x5": 11,
"y5": 33,
"v5": 25,
// Theft
"x6": 10,
"y6": 38,
"v6": 15
}, {
// Asia
// Home
"x1": 50,
"y1": 28,
"v1": 20,
// Health
"x2": 55,
"y2": 25,
"v2": 20,
// Life
"x3": 38,
"y3": 28,
"v3": 20,
// Long term
"x4": 42,
"y4": 32,
"v4": 20,
// Auto
"x5": 25,
"y5": 31,
"v5": 20,
// Theft
"x6": 20,
"y6": 39,
"v6": 20
}, {
// Europe
// Home
"x1": 90,
"y1": 18,
"v1": 100,
// Health
"x2": 85,
"y2": 14,
"v2": 85,
// Life
"x3": 70,
"y3": 29,
"v3": 50,
// Long term
"x4": 80,
"y4": 22,
"v4": 40,
// Auto
"x5": 50,
"y5": 25,
"v5": 40,
// Theft
"x6": 40,
"y6": 35,
"v6": 20
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"title": "Number of Policies Issued",
"titleColor": "#ff7f27",
"titleFontSize": 18,
}, {
"axisAlpha": 0,
"position": "left",
"minimum": 0,
"minVerticalGap": 20,
"unit": "%",
"title": "Avg. Normalized Premiums",
"titleFontSize": 18,
"applyBandValues": true,
"guides": [ {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#00c",
"fillAlpha": 0.1,
"label": "North\nAmerica",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#c00",
"fillAlpha": 0.1,
"label": "Asia",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#0c0",
"fillAlpha": 0.1,
"label": "Europe",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
} ]
} ],
"startDuration": 1.5,
"sequencedAnimation": false,
"legend": {
"position": "right",
"markerType": "circle"
},
"graphs": [ {
"balloonText": "[[title]]: [[value]]",
"title": "Home",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v1",
"xField": "x1",
"yField": "y1",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#a6cf28"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Health",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v2",
"xField": "x2",
"yField": "y2",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#7fadd1"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Life",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v3",
"xField": "x3",
"yField": "y3",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#f9c900"
}, {
"title": "Long term",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v4",
"xField": "x4",
"yField": "y4",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff8a00"
}, {
"title": "Auto",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v5",
"xField": "x5",
"yField": "y5",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff1568"
}, {
"title": "Theft",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v6",
"xField": "x6",
"yField": "y6",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#689494"
} ]
} );
(1.) https://codepen.io/team/amcharts/pen/05584b0b6afd661337b3ce5c8d6a14e3
You could offset both value axes of your bubble chart to center them. However, the offset values are defined in pixels, so unfortunately the axes will not keep their position when the chart is zoomed or panned. So you'll probably have to disable these features in this case.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
// ...
"valueAxes": [{
"position": "bottom",
"offset": -200,
"minimum": 0,
"maximum": 100
}, {
"position": "left",
"offset": -200,
"minimum": 0,
"maximum": 100
}]
});
Here's a Codepen demo: https://codepen.io/team/amcharts/pen/137ecc09f89b5303b66944e4cf278b14?editors=0010.
You could also use minimum and maximum values for both value axes to make it easier to center your axes.
ValueAxis offset: https://docs.amcharts.com/3/javascriptcharts/ValueAxis#offset
I am trying to plot the heatmap using 'heatmap js' library .
For some value of inputs if the min value is 0 and max value is 1 then whole heatmap will be red instead of plotting actual values.
It works fine if the max value is other than 1 (ex. min: 0, max 2 or min:0 , max: 3) but only for this case the heatmap fails to map the data.
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": 0
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": 0
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": 0
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": 0
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": 0
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": 1
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": 0
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": 1
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": 1
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": 0
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": 0
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: 1,
min: 0,
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
If I understand correctly your problem then I guess Script understand 0 = false and 1 = true so you need to pass 0 as "0" and 1 as "1"
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": "0"
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": "0"
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": "0"
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": "0"
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": "0"
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": "1"
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": "0"
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": "1"
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": "1"
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": "0"
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": "0"
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: "1",
min: "0",
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
I'm working with something like this:
Fiddle
I'm loading data with jQuery and running the whole update function with it. What I want to do is have all the circles run closer to the main one before the update is triggered. Would I be able to do something like that? I've tried rewriting the tick function to do same as it does now, only to use d.x-50, but that didn't work.
There are several ways to do what you want, but this is my solution: restart the force with a smaller linkDistance:
var inter = setInterval(function() {
updateData();
setTimeout(function() {
force.linkDistance(20);
force.start().alpha(0.01);
}, 2000);
}, 5000);
Here is the demo:
var data = {
nodes: [
{"x": 250, "y": 250, "color": "green", "name":"TEST", "r":"28", "fixed":true},
{"x": 120, "y": 150, "name":"forums.macrumors", "score": -12.2, "icon": ""},
{"x": 140, "y": 150, "name":"delhidailynews", "score": -0.08, "icon": ""},
{"x": 280, "y": 150, "name":"4-traders", "score": -0.055, "icon": ""},
{"x": 300, "y": 150, "name":"phonearena", "score": 0.45, "icon": ""},
{"x": 40, "y": 200, "name":"inga3.wordpress", "score": -0.27, "icon": ""},
{"x": 70, "y": 200, "name":"kahinaweb.wordpress", "score": -0.28, "icon": ""},
{"x": 100, "y": 200, "name":"bilqueessite.wordpress", "score": -0.3, "icon": ""},
{"x": 130, "y": 200, "name":"beforeitsnews", "score": -0.72, "icon": ""},
{"x": 380, "y": 200, "name":"yahoo", "score": -0.66, "icon": ""}
],
links: [
{"source": 0, "target": 1, "distance": 180, "label": ""},
{"source": 0, "target": 2, "distance": 180, "label": ""},
{"source": 0, "target": 3, "distance": 180, "label": ""},
{"source": 0, "target": 4, "distance": 180, "label": ""},
{"source": 0, "target": 5, "distance": 180, "label": ""},
{"source": 0, "target": 6, "distance": 180, "label": ""},
{"source": 0, "target": 7, "distance": 180, "label": ""},
{"source": 0, "target": 8, "distance": 180, "label": ""},
{"source": 0, "target": 9, "distance": 180, "label": ""}
]
};
var width = 500,
height = 500;
var force = d3.layout.force()
.size([width, height])
.charge(function(d){
var charge = -500;
if (d.index === 0) charge = 10 * charge;
return charge;
})
.linkDistance(d => d.distance)
.on("tick", tick);
var svg = d3.select("#orb")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "mainsvg");
var link = svg.selectAll(".link"),
node = svg.selectAll(".node"),
path = svg.selectAll(".path");
force.nodes(data.nodes)
.links(data.links)
.start();
var edges = link.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.style("stroke", "grey")
.style("pointer-events", "none");
node = node.data(data.nodes)
.enter()
.append("g");
node.append("circle")
.attr("class", "circle")
.attr("r", function(d) { if(d.r){ return d.r; } else { return "18";} })
.attr("fill", function(d) { if(d.color) { return d.color; } else { return "orange";} })
.attr("stroke", function(d) { if(d.color) { return d.color; } else { return "orange";} });
var linkwrap = node.append("a")
.attr("href", "3");
linkwrap.append("image")
.attr("class", "srcico")
.attr("height", "16px")
.attr("width", "16px")
.attr("xlink:href", function(d) { return d.icon; });
linkwrap.append("text")
.attr("fill", "white")
.attr("stroke", "none")
.attr("x", "232")
.attr("y", "255")
.text(function(d) { return d.ticker; });
function tick() {
var link = svg.selectAll("line");
var edgepaths = svg.selectAll(".edgepath");
var edgelabels = svg.selectAll(".edgelabel");
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
svg.selectAll(".circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
svg.selectAll(".srcico")
.attr("x", function(d) { return d.x-5; })
.attr("y", function(d) { return d.y-8; });
svg.selectAll(".notecap")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
var inter = setInterval(function() {
updateData();
setTimeout(function(){
force.linkDistance(20);
force.start().alpha(0.01);
},2000);
}, 5000);
function updateData() {
var data = {
nodes: [
{"x": 250, "y": 250, "color": "grey", "name":"TEST", "r":"28", "fixed":true},
{"x": 120, "y": 210, "name":"", "score": -12.2, "icon": ""},
{"x": 140, "y": 210, "name":"", "score": -0.08, "icon": ""},
{"x": 280, "y": 210, "name":"", "score": -0.055, "icon": ""},
{"x": 300, "y": 210, "name":"", "score": 0.45, "icon": ""},
{"x": 40, "y": 200, "name":"", "score": -0.27, "icon": ""},
{"x": 70, "y": 200, "name":"", "score": -0.28, "icon": ""},
{"x": 100, "y": 200, "name":"", "score": -0.3, "icon": ""},
{"x": 130, "y": 200, "name":"", "score": -0.72, "icon": ""},
{"x": 380, "y": 200, "name":"", "score": -0.66, "icon": ""},
{"x": 160, "y": 200, "name":"", "score": -0.317, "icon": ""},
{"x": 280, "y": 200, "name":"", "score": -0.37, "icon": ""},
{"x": 270, "y": 200, "name":"", "score": -0.49, "icon": ""},
{"x": 340, "y": 200, "name":"", "score": -0.62, "icon": ""},
{"x": 100, "y": 300, "name":"", "score": -0.31, "icon": ""},
{"x": 140, "y": 300, "name":"", "score": -0.457, "icon": ""},
{"x": 180, "y": 300, "name":"", "score": -0.472, "icon": ""},
{"x": 280, "y": 300, "name":"", "score": -0.66, "icon": ""},
{"x": 320, "y": 300, "name":"", "score": -0.68, "icon": ""},
{"x": 410, "y": 300, "name":"", "score": -0.8, "icon": ""},
{"x": 260, "y": 300, "name":"", "score": -0.86, "icon": ""}
],
links: [
{"source": 0, "target": 1, "distance": 180, "label": ""},
{"source": 0, "target": 2, "distance": 180, "label": ""},
{"source": 0, "target": 3, "distance": 180, "label": ""},
{"source": 0, "target": 4, "distance": 180, "label": ""},
{"source": 0, "target": 5, "distance": 180, "label": ""},
{"source": 0, "target": 6, "distance": 180, "label": ""},
{"source": 0, "target": 7, "distance": 180, "label": ""},
{"source": 0, "target": 8, "distance": 180, "label": ""},
{"source": 0, "target": 9, "distance": 180, "label": ""},
{"source": 0, "target": 10, "distance": 180, "label": ""},
{"source": 0, "target": 11, "distance": 180, "label": ""},
{"source": 0, "target": 12, "distance": 180, "label": ""},
{"source": 0, "target": 13, "distance": 180, "label": ""},
{"source": 0, "target": 14, "distance": 180, "label": ""},
{"source": 0, "target": 15, "distance": 180, "label": ""},
{"source": 0, "target": 16, "distance": 180, "label": ""},
{"source": 0, "target": 17, "distance": 180, "label": ""},
{"source": 0, "target": 18, "distance": 180, "label": ""},
{"source": 0, "target": 19, "distance": 180, "label": ""},
{"source": 0, "target": 20, "distance": 180, "label": ""}
]
};
d3.selectAll(".mainsvg > *").remove();
var link = svg.selectAll(".link"),
node = svg.selectAll(".node"),
path = svg.selectAll(".path");
force.linkDistance(d=>d.distance);
force.nodes(data.nodes)
.links(data.links)
.start();
var edges = link.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.style("stroke", "grey")
.style("pointer-events", "none");
node = node.data(data.nodes)
.enter()
.append("g");
node.append("circle")
.attr("class", "circle")
.attr("r", function(d) { if(d.r){ return d.r; } else { return "18";} })
.attr("fill", function(d) { if(d.color) { return d.color; } else { return "orange";} })
.attr("stroke", function(d) { if(d.color) { return d.color; } else { return "orange";} });
var linkwrap = node.append("a")
.attr("href", "3");
linkwrap.append("image")
.attr("class", "srcico")
.attr("height", "16px")
.attr("width", "16px")
.attr("xlink:href", function(d) { return d.icon; });
linkwrap.append("text")
.attr("fill", "white")
.attr("stroke", "none")
.attr("x", "232")
.attr("y", "255")
.text(function(d) { return d.ticker; });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="orb">
</div>
I want to draw triangles on a canvas based on data in a JSON file. I want to show the name property of each object in the JSON on the rectangle. How would I do this?
Here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scrollbar" id="ex3" width="100px" height="100px" overflow="auto">
<canvas id="NodeList" style="border:2px solid black;" width="200" height="2000"></canvas>
</div>
<script>
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.rect(20, 220, 150, 100);
ctx.rect(20, 420, 150, 100);
ctx.rect(20, 620, 150, 100);
ctx.rect(20, 820, 150, 100);
ctx.rect(20, 1020, 150, 100);
ctx.rect(20, 1220, 150, 100);
ctx.rect(20, 1420, 150, 100);
ctx.rect(20, 1620, 150, 100);
ctx.rect(20, 1820, 150, 100);
ctx.rect(20, 2020, 150, 100);
ctx.rect(20, 2220, 150, 100);
ctx.rect(20, 2420, 150, 100);
ctx.rect(20, 2620, 150, 100);
ctx.stroke();
</script>
</body>
</html>
My JSON file is formatted as:
[
{
"name": "1",
"x": 225,
"y": 197,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2,
"version": "1.0.0"
},
{
"name": "2",
"x": 225,
"y": 297,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "3",
"x": 225,
"y": 397,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "4",
"x": 225,
"y": 497,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "5",
"x": 225,
"y": 597,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "6",
"x": 225,
"y": 697,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "7",
"x": 225,
"y": 797,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "8",
"x": 225,
"y": 897,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "9",
"x": 225,
"y": 997,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
},
{
"name": "10",
"x": 225,
"y": 1097,
"width": 121,
"height": 67,
"bgColor": "#00FF00",
"radius": 2
}
]
You can try overlaying the text on the rectangle.
Example here for the first one: http://jsfiddle.net/jedywrka/
ctx.rect(20, 20, 150, 100);
ctx.fillText(data[0].name, 25, 35);