Related
Hi I am new to HTML5 canvas i have draw rectangle boxes in canvas with name i want to save the canvas image as JSON file(Json file also given below how i want json file) (i am going to do drag and drop functionalities later with in the Canvas layout after need to save the modified Layout as a JSON file(Here first i asked to convert Canvas Layout as JSON file))
<html>
<body>
<canvas id="NodeList" name="NodeList" style="border:2px solid black;" width="1078" height="450"></canvas>
</body>
</html>
<script>
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(3,3,40,40);
ctx.fillText(1, 15, 25);
ctx.rect(46,3,40,40);
ctx.fillText(2, 65, 25);
ctx.rect(89,3,40,40);
ctx.fillText(3, 105, 25);
ctx.rect(3,46,40,40);
ctx.fillText(4, 13, 70);
ctx.rect(46,46,40,40);
ctx.fillText(5, 56, 70);
ctx.rect(89,46,40,40);
ctx.fillText(6, 99, 70);
ctx.rect(606,3,40,40);
ctx.fillText(7, 616, 25);
ctx.rect(649,3,40,40);
ctx.fillText(8, 659, 25);
ctx.rect(821,3,40,40);
ctx.fillText(9, 831, 25);
ctx.rect(864,3,40,40);
ctx.fillText(10, 874, 25);
ctx.font="15px Verdana";
ctx.fillText('Shop', 415,205);
ctx.fillText('sweets', 55, 110);
ctx.fillText('Zone 1', 55, 130);
ctx.fillText('fried grams', 780, 110);
ctx.fillText('Zone 2', 780, 130);
ctx.stroke();
</script>
Need to save Canvas layout Output as JSON File like below
[
{
"x":3,
"y":3,
"height":40,
"width":40,
"binnum":1,
"binx":13,
"biny":25
},
{
"x":46,
"y":3,
"height":40,
"width":40,
"binnum":2,
"binx":56,
"biny":25
},
{
"x":89,
"y":3,
"height":40,
"width":40,
"binnum":3,
"binx":99,
"biny":25
},
{
"x":3,
"y":46,
"height":40,
"width":40,
"binnum":6,
"binx":13,
"biny":70
},
{
"x":46,
"y":46,
"height":40,
"width":40,
"binnum":7,
"binx":56,
"biny":70
},
{
"x":89,
"y":46,
"height":40,
"width":40,
"binnum":8,
"binx":99,
"biny":70
},
{
"x":606,
"y":3,
"height":40,
"width":40,
"binnum":10,
"binx":616,
"biny":25
},
{
"x":649,
"y":3,
"height":40,
"width":40,
"binnum":11,
"binx":659,
"biny":25
},
{
"x":821,
"y":3,
"height":40,
"width":40,
"binnum":15,
"binx":831,
"biny":25
},
{
"x":864,
"y":3,
"height":40,
"width":40,
"binnum":16,
"binx":874,
"biny":25
}
]
You could attain this in the following way ...
<html>
<body>
<canvas id="NodeList" name="NodeList" style="border:2px solid black;" width="1078" height="450"></canvas>
<script>
let c = document.getElementById("NodeList");
let ctx = c.getContext("2d");
let data = [{
rect: [3, 3, 40, 40],
text: [1, 15, 25]
}, {
rect: [46, 3, 40, 40],
text: [2, 65, 25]
}, {
rect: [89, 3, 40, 40],
text: [3, 105, 25]
}, {
rect: [3, 46, 40, 40],
text: [4, 13, 70]
}, {
rect: [46, 46, 40, 40],
text: [5, 56, 70]
}, {
rect: [89, 46, 40, 40],
text: [6, 99, 70]
}, {
rect: [606, 3, 40, 40],
text: [7, 616, 25]
}, {
rect: [649, 3, 40, 40],
text: [8, 659, 25]
}, {
rect: [821, 3, 40, 40],
text: [9, 831, 25]
}, {
rect: [864, 3, 40, 40],
text: [10, 874, 25]
}];
ctx.font = "15px Verdana";
ctx.fillText('Shop', 415, 205);
ctx.fillText('sweets', 55, 110);
ctx.fillText('Zone 1', 55, 130);
ctx.fillText('fried grams', 780, 110);
ctx.fillText('Zone 2', 780, 130);
function getJSON(ctx, data) {
let ja = [];
data.forEach(function(e) {
let ra = e.rect,
ta = e.text;
ja.push({
"x": ra[0],
"y": ra[1],
"height": ra[2],
"width": ra[3],
"binnum": ta[0],
"binx": ta[1],
"biny": ta[2]
});
ctx.strokeRect(ra[0], ra[1], ra[2], ra[3]);
ctx.fillText(ta[0], ta[1], ta[2]);
});
return ja;
}
let json = getJSON(ctx, data);
console.log(json);
</script>
</body>
</html>
I'm populating my google's datatable via using this code
$.ajax({
url: "Default2.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
google.charts.setOnLoadCallback(drawChart);
});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
Now I want to delete rows based on some filters which check the particular value(date) from the row of the datatable.
But the problem is that there is not any method in documentation using which i can go through row elements.
you can use a DataView to show only certain rows from the DataTable
using the getFilteredRows and setRows methods...
the getFilteredRows method returns an array of row indexes that meet certain criteria
the criteria is an array of conditions
you pass the column index and the condition
e.g. --> {column: 0, minValue: 2016} -- (first column must be >= 2016)
e.g. --> {column: 0, value: 2017} -- (first column must = 2017)
e.g. --> {column: 0, maxValue: 2015} -- (first column must be <= 2015)
see following DataTable...
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[2010, 10, 14],
[2011, 14, 22],
[2012, 16, 24],
[2013, 22, 30],
[2014, 28, 36],
[2015, 30, 44],
[2016, 34, 42],
[2017, 36, 44],
[2018, 42, 50],
[2019, 48, 56]
]);
to filter on the 'X' column (column 0), we could say...
data.getFilteredRows([{column: 0, minValue: 2016}])
you can use multiple criteria as well...
data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
])`
then pass the returned row indexes to setRows on the data view
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
]));
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[2010, 10, 14],
[2011, 14, 22],
[2012, 16, 24],
[2013, 22, 30],
[2014, 28, 36],
[2015, 30, 44],
[2016, 34, 42],
[2017, 36, 44],
[2018, 42, 50],
[2019, 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, minValue: 2016},
{column: 1, minValue: 40}
]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can filter on any type, including dates,
here is an example of filtering on exact date...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[new Date(2016, 7, 1), 10, 14],
[new Date(2016, 8, 1), 14, 22],
[new Date(2016, 9, 1), 16, 24],
[new Date(2016, 10, 1), 22, 30],
[new Date(2016, 11, 1), 28, 36],
[new Date(2017, 0, 1), 30, 44],
[new Date(2017, 1, 1), 34, 42],
[new Date(2017, 2, 1), 36, 44],
[new Date(2017, 3, 1), 42, 50],
[new Date(2017, 4, 1), 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, value: new Date(2016, 11, 1)}
]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: if the date values include specific time values, then you'll need to use a range, to filter for a specific date...
google.charts.load('current', {
callback: drawChart,
packages: ['table']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y1', 'Y2'],
[new Date(2017, 0, 1, 12, 35, 16), 30, 44],
[new Date(2017, 0, 1, 14, 46, 10), 34, 42],
[new Date(2017, 0, 1, 16, 12, 44), 36, 44],
[new Date(2017, 0, 1, 17, 20, 47), 42, 50],
[new Date(2017, 0, 1, 18, 23, 59), 48, 56],
[new Date(2017, 0, 2, 12, 35, 16), 30, 44],
[new Date(2017, 0, 2, 14, 46, 10), 34, 42],
[new Date(2017, 0, 2, 16, 12, 44), 36, 44],
[new Date(2017, 0, 2, 17, 20, 47), 42, 50],
[new Date(2017, 0, 2, 18, 23, 59), 48, 56]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
minValue: new Date(2017, 0, 1, 0, 0, 0),
maxValue: new Date(2017, 0, 1, 23, 59, 59)
}]));
var container = document.getElementById('chart_div');
var chart = new google.visualization.Table(container);
chart.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I`m beginner using kendo stacked chart.
this is my categoryAxis.
categoryAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
majorGridLines: {
visible: true
},
visible: true
},
chartArea: {
height : 200
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #",
color: "white"
}
but, 0 index tooltip shows 'd'.
what is the problem ?
tooltip image
From your image you are using a shared tooltip, so try defining your tooltip like this:
tooltip: {
visible: true,
sharedTemplate: "<div>#: category #</div> # for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name# : #: points[i].value #</div> # } #",
color: "white",
shared: true
}
Here is my dataset
var dataset = [{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 },
{ x: 3, y: 1222 }, { x: 4, y: 1611 },
{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 },
{ x: 3, y: 1322 }, { x: 4, y: 1711 },]
I'm not sure where to specify the name of each dataset, How should this be modified to allow for a Group Name to be passed and what changes should be made in my D3.JS code ?
Fiddle https://jsfiddle.net/qvrL3ey5/
Using http://jsfiddle.net/2N2rt/15/ I was able to resolve this issue.
Example
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, -100, 7, 1, 1, 111]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 107]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 130]}
];
I'm trying to understand how to use more complicated data sets with d3. Below I will show the JSON data I would like to display;
{
"questions": ["Large choice of food", "Food quality", "Food freshness", "Taste of food", "Waiting time to recieve food", "Value for money"],
"places": ["US", "UK", "TK"],
"dates": ["Jan", "Feb", "Mar"],
"values": [
[
[24, 42, 72],
[29, 45, 79],
[34, 39, 84]
],
[
[33, 73, 41],
[21, 16, 45],
[43, 22, 17]
],
[
[75, 53, 78],
[55, 33, 22],
[94, 83, 99]
],
[
[63, 37, 11],
[47, 67, 62],
[33, 34, 35]
],
[
[43, 89, 78],
[99, 92, 87],
[41, 23, 71]
],
[
[92, 11, 45],
[100, 0, 50],
[40, 72, 62]
]
]
}
From here I would like to be able to select one question, then pair it with a place + date and then retrieve the value based on this.
I have tried to find resources online which could help educate me with how to access this kind of data in this way, but i've had no such luck. I have created a plnk to provide a set up for this.
http://plnkr.co/edit/Cdwm5RXoIdBNg0uxeeP6?p=preview
So the question is how can I retrieve this data in d3, and display it in the console in the order of question+[place + date][values based on this].
Any advice and links to good educational resources would be a big help for me at this stage,
Cheers
EDIT:
The above JSON format may be a little confusing, here is perhaps a more simplified version?
{
"dates": ["Jan", "Feb", "Mar"],
"questions": {
"Large choice of food": {
"US": [11, 15, 13],
"UK": [25, 24, 39],
"TK": [27, 23, 20]
},
"Food quality": {
"US": [11, 15, 13],
"UK": [25, 24, 40],
"TK": [27, 23, 20]
},
}
}
Here is something I put together but it isn't using D3, but vanilla JS. So I'm not sure if you want this but I'll throw it in anyway. Rather self explanatory: http://plnkr.co/edit/ckm45FB3RVhofGbUjdBl?p=preview
Main chunk of code :
var questionData = data.questions;
var monthData = data.dates;
var countryData = data.places;
//populate question drop down
var questionSelect = document.getElementById('questionSelect');
for(i=0;i<questionData.length;i++){
var option = document.createElement('option');
option.text = questionData[i];
option.value = questionData[i];
questionSelect.appendChild(option);
}
var submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', getData);
function getData(){
var thisQuestion = document.getElementById('questionSelect').value;
var thisCountry = document.getElementById('countrySelect').value;
var thisMonth = document.getElementById('monthSelect').value;
var questionIndex = questionData.indexOf(thisQuestion);
var countryIndex = countryData.indexOf(thisCountry);
var monthIndex = monthData.indexOf(thisMonth);
var getValue = data.values[questionIndex][monthIndex][countryIndex]; //this is the found value
console.log(getValue)
}