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);
Related
I'm new to chart-js, I'm implementing Stacks bar charts in an app. everything work perfect , but in case of negative number bars are shown on wrong positions.
Click Here to see Image
In the Picture Downsell Should be before the churn , but on charts its displaying after the churn ,
Here is the code :
var ctx = document.getElementById('chartJSContainer').getContext('2d');
window.RevenueChangesByMonth = new Chart(ctx, {
"type": "bar",
"data": {
"labels": [
"Upsell",
"New",
"Downsell",
"Churn"
],
"datasets": [
{
"label": "New",
"type": "bar",
"order": 2,
"data": [
345,
842,
351,
155,
877,
705,
457,
224,
386,
689,
232,
332,
242,
142,
236,
342,
269,
232,
733,
247,
450,
306,
328,
345
],
"borderColor": "#a6cd95",
"backgroundColor": "#a6cd95"
},
{
"label": "Upsell",
"type": "bar",
"order": 1,
"data": [
586,
446,
868,
492,
324,
977,
301,
553,
254,
170,
919,
457,
226,
188,
356,
675,
136,
745,
646,
227,
821,
454,
315,
442
],
"borderColor": "#d3e7cb",
"backgroundColor": "#d3e7cb"
},
{
"label": "Downsell",
"type": "bar",
"order": -1,
"data": [
-13,
-64,
-94,
-66,
-24,
-37,
-33,
-81,
-75,
-18,
-26,
-18,
-34,
-94,
-97,
-82,
-93,
-15,
-51,
-47,
-22,
-90,
-54,
-68
],
"borderColor": "#fdcab6",
"backgroundColor": "#fdcab6"
},
{
"label": "Churn",
"type": "bar",
"order": -2,
"data": [
-72,
-81,
-23,
-66,
-88,
-100,
-34,
-71,
-96,
-10,
-47,
-42,
-1,
-64,
-70,
-33,
-74,
-88,
-33,
-22,
-55,
-5,
-93,
-15
],
"borderColor": "#ff6666",
"backgroundColor": "#ff6666"
}
]
},
"options": {
"animation": false,
"plugins": {
"title": {
"display": true,
"text": "Revenue Changes By Month"
},
"datalabels": {
"display": false
}
},
"tooltips": {
"mode": "index",
"intersect": true
},
"scales": {
"xAxes": {
"stacked": true
},
"yAxes": {
"stacked": true
}
},
"legend": {
"display": false
},
"maintainAspectRatio": false
}
});
I have JSON given below. Using this JSON need to create the 3D Box inside the 3D outline cube as shown in given image.I have this requirement but i am new in 3D kind of development. It will be great if someone can help on this. We can use skus array to create cube. Thanks in advance.
{
"request_id": "614bd0e3de7f3745708a9fa4",
"completed_time_UTC": "2022-02-06T20:56:19Z",
"tracks": [
{[![enter image description here][1]][1]
"purchase_orders": ["1153511"],
"vehicle_id": "be8c578a-c59c-4348-8148-50cfbeb5a6cd",
"vehicle_type": "TRAILER_48T",
"number_of_pallets": 14,
"pallets": [
{
"purchase_orders": ["1153511"],
"pallet_id": "fe76b310-d751-48eb-84f8-3ea47c7a94bd",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 54, 26]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{
"sku": "17503006575454",
"length": 26,
"width": 27,
"height": 26,
"position": [64, 59, 78]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [59, 54, 80]
}
]
},
{
"purchase_orders": ["1153511"],
"pallet_id": "e693e8bd-e841-4a05-8912-aa0e837ba256",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 0]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [58, 54, 78]
}
]
}
]
}
],
"schemaName": "http://www.schema.org/logistics/1"
}
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>
Suppose I have a JSON response from server with following structure
var data={
"Data1": {
"height": 39,
"weight": 62,
"shape": {
"length": 19,
"width": 72
},
"color": "#00ff00",
"radius": 9.5,
"color_srv": "#ffff00"
},
"Data2": {
"height": 0,
"weight": 40,
"shape": {
"length": 19,
"width": 72
},
"color": "#000000",
"radius": 2.5,
"color_srv": "#ff0000"
}
}
I want this data dictionary to split into two with certain data in one dictionary while maintaining the structure. For e.g.
var data_height = {
"Data1":{
"height": 39,
"shape": {
"length": 19,
"width": 72
},
"color": "#00ff00",
"radius": 9.5,
},
"Data2":{
"height": 0,
"shape": {
"length": 19,
"width": 72
},
"color": "#000000",
"radius": 2.5,
}
}
var data_weight = {
"Data1":{
"weight": 39,
"shape": {
"length": 19,
"width": 72
},
"color_srv": "#00ff00",
"radius": 9.5,
},
"Data2":{
"weight": 0,
"shape": {
"length": 19,
"width": 72
},
"color_srv": "#000000",
"radius": 2.5,
}
}
The above two dictionary serve different purpose, so after getting unified result how am i suppose to split that single data from back end into two different dictionaries.
edit
This is something I tried doing but it throws error
solution 1:
var serve={},live={};
for(d in data){
pname = d.split(':')[0];
serve['pname'].radius= data[d].radius;
serve['pname'].center= data[d].center;
serve['pname'].color= data[d].color_srv;
live['pname'].radius= data[d].radius;
live['pname'].center= data[d].center;
live['pname'].color= data[d].color;
serve['pname'].numbers= data[d].serving;
live['pname'].numbers= data[d].living;
serve['pname'].place= pname;
live['pname'].place= pname;
}
edit2
solution 2:
var serve={},live={};
for(d in data){
pname = d.split(':')[0];
serve['radius']= data[d].radius;
serve['center']= data[d].center;
serve['color']= data[d].color_srv;
live['radius']= data[d].radius;
live['center']= data[d].center;
live['color']= data[d].color;
serve['numbers']= data[d].serving;
live['numbers']= data[d].living;
serve['place']= pname;
live['plcae']= pname;
}
Both of the above solutions doesn't seems to work.
As Nina says, just clone the objects and remove the properties you don't need from each object. Here I've used reduce with an initial object with data_height and data_height properties.
var clone = function (obj) { return JSON.parse(JSON.stringify(obj)); }
var output = Object.keys(data).reduce(function (p, c) {
var obj = data[c];
p.data_height[c] = clone(obj);
delete p.data_height[c].weight;
delete p.data_height[c].color_srv;
p.data_weight[c] = clone(obj);
delete p.data_weight[c].height;
delete p.data_weight[c].color;
return p;
}, { data_height: {}, data_weight: {} });
OUTPUT
{
"data_height": {
"Data1": {
"height": 39,
"shape": {
"length": 19,
"width": 72
},
"color": "#00ff00",
"radius": 9.5
},
"Data2": {
"height": 0,
"shape": {
"length": 19,
"width": 72
},
"color": "#000000",
"radius": 2.5
}
},
"data_weight": {
"Data1": {
"weight": 62,
"shape": {
"length": 19,
"width": 72
},
"radius": 9.5,
"color_srv": "#ffff00"
},
"Data2": {
"weight": 40,
"shape": {
"length": 19,
"width": 72
},
"radius": 2.5,
"color_srv": "#ff0000"
}
}
}
DEMO
This layout has an ordinal scale: http://bl.ocks.org/mbostock/1804919
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangePoints([0, width], 1);
But, nothing changes when "x" is included in the data e.g.
var nodes = [
{ "radius": 50, "color": "#17becf", "cx": 800, "cy": 250, "x": 100},
{ "radius": 50, "color": "#17becf", "cx": 800, "cy": 250, "x": 200},
{ "radius": 50, "color": "#17becf", "cx": 800, "cy": 250, "x": 300},
{ "radius": 50, "color": "#17becf", "cx": 800, "cy": 250, "x": 400},];
What am I doing wrong?