Related
I'm currently developing a live game analysis system similar to op.gg, u.gg or porofessor.gg and I'm not able to get the summoners roles (individualPosition) with the SUMMONER_V4 endpoint. This infos can be retrieved from MATCH_V4 and MATCH_V5 but not in current game only on post games.
Do you have a solution ?
1 summoner from SUMMONER_V4
{
"teamId": 100,
"spell1Id": 4,
"spell2Id": 12,
"championId": 134,
"profileIconId": 29,
"summonerName": "ZWYRØØ",
"bot": false,
"summonerId": "AMNq5HI58rERnuyXFIG59jefC50DedqayUTkovUa2Vyf4yc",
"gameCustomizationObjects": [],
"perks": {
"perkIds": [
8112,
8139,
8138,
8135,
8232,
8226,
5005,
5008,
5003
],
"perkStyle": 8100,
"perkSubStyle": 8200
}
}
1 summoner from MATCH_V5
{
"assists": 11,
"baronKills": 0,
"bountyLevel": 4,
"champExperience": 16132,
"champLevel": 16,
"championId": 92,
"championName": "Riven",
"championTransform": 0,
"consumablesPurchased": 7,
"damageDealtToBuildings": 4623,
"damageDealtToObjectives": 6137,
"damageDealtToTurrets": 4623,
"damageSelfMitigated": 29549,
"deaths": 5,
"detectorWardsPlaced": 3,
"doubleKills": 3,
"dragonKills": 0,
"firstBloodAssist": false,
"firstBloodKill": true,
"firstTowerAssist": false,
"firstTowerKill": false,
"gameEndedInEarlySurrender": false,
"gameEndedInSurrender": false,
"goldEarned": 14587,
"goldSpent": 14205,
"individualPosition": "TOP",
"inhibitorKills": 1,
"inhibitorTakedowns": 1,
"inhibitorsLost": 0,
"item0": 6630,
"item1": 2055,
"item2": 6035,
"item3": 3071,
"item4": 3044,
"item5": 3158,
"item6": 3364,
"itemsPurchased": 27,
"killingSprees": 4,
"kills": 15,
"lane": "TOP",
"largestCriticalStrike": 0,
"largestKillingSpree": 4,
"largestMultiKill": 3,
"longestTimeSpentLiving": 487,
"magicDamageDealt": 0,
"magicDamageDealtToChampions": 0,
"magicDamageTaken": 9753,
"neutralMinionsKilled": 9,
"nexusKills": 1,
"nexusLost": 0,
"nexusTakedowns": 1,
"objectivesStolen": 0,
"objectivesStolenAssists": 0,
"participantId": 1,
"pentaKills": 0,
"perks": {
"statPerks": {
"defense": 5002,
"flex": 5008,
"offense": 5008
},
"styles": [
{
"description": "primaryStyle",
"selections": [
{
"perk": 8010,
"var1": 720,
"var2": 0,
"var3": 0
},
{
"perk": 9111,
"var1": 2616,
"var2": 520,
"var3": 0
},
{
"perk": 9104,
"var1": 12,
"var2": 30,
"var3": 0
},
{
"perk": 8299,
"var1": 1072,
"var2": 0,
"var3": 0
}
],
"style": 8000
},
{
"description": "subStyle",
"selections": [
{
"perk": 8236,
"var1": 14,
"var2": 0,
"var3": 0
},
{
"perk": 8210,
"var1": 15,
"var2": 0,
"var3": 0
}
],
"style": 8200
}
]
},
"physicalDamageDealt": 122017,
"physicalDamageDealtToChampions": 27842,
"physicalDamageTaken": 17221,
"profileIcon": 4982,
"puuid": "ntuHEb-brsQY_ecD0_RJWuM7aksXwMdaK2q16TQ3vvJ_F11cOUtg_kwhGQ-Ihn4wDSu7WPuQipJn3Q",
"quadraKills": 0,
"riotIdName": "",
"riotIdTagline": "",
"role": "DUO",
"sightWardsBoughtInGame": 0,
"spell1Casts": 397,
"spell2Casts": 71,
"spell3Casts": 142,
"spell4Casts": 34,
"summoner1Casts": 4,
"summoner1Id": 4,
"summoner2Casts": 7,
"summoner2Id": 14,
"summonerId": "ZVUXWayHZDCDR5V67fUp14i3vsZNMmqIjmppq2XJepptJ7Y-",
"summonerLevel": 40,
"summonerName": "ojdfviys",
"teamEarlySurrendered": false,
"teamId": 100,
"teamPosition": "TOP",
"timeCCingOthers": 35,
"timePlayed": 1719,
"totalDamageDealt": 123497,
"totalDamageDealtToChampions": 29232,
"totalDamageShieldedOnTeammates": 0,
"totalDamageTaken": 28681,
"totalHeal": 6272,
"totalHealsOnTeammates": 0,
"totalMinionsKilled": 160,
"totalTimeCCDealt": 107,
"totalTimeSpentDead": 183,
"totalUnitsHealed": 1,
"tripleKills": 1,
"trueDamageDealt": 1480,
"trueDamageDealtToChampions": 1390,
"trueDamageTaken": 1706,
"turretKills": 2,
"turretTakedowns": 4,
"turretsLost": 5,
"unrealKills": 0,
"visionScore": 22,
"visionWardsBoughtInGame": 5,
"wardsKilled": 2,
"wardsPlaced": 6,
"win": true
}
Thanks by advance
I am trying to use nodejs to manage my workflows instead of using the console. The createWorkflow method returns a 200 code but I cannot find it in the console or when listing it. Any idea what is missing? the typescript typedef has too many partials to be useful on what is needed and what is not. In the code below the list method returns correctly the workflow names I created in the console which proves that I use the parent params correctly I guess. However when I call the create method with the name of a new workflow and some code, I get this this back and a return code of 200 which should mean it was successful but can't find it. Also trying to execute it returns a not found.
return value:
{
"_events": {},
"_eventsCount": 2,
"completeListeners": 0,
"hasActiveListeners": false,
"latestResponse": {
"name": "projects/xxxxx/locations/us-central1/operations/operation-1607572432499-5b6141fca342d-32b153bf-bfce0551",
"metadata": {
"type_url": "type.googleapis.com/google.cloud.workflows.v1beta.OperationMetadata",
"value": {
"type": "Buffer",
"data": [
10,
12,
8,
208,
183,
198,
254,
5,
16,
236,
212,
251,
180,
2,
26,
76,
112,
114,
111,
106,
101,
99,
116,
115,
47,
98,
117,
116,
116,
101,
114,
102,
108,
121,
45,
105,
116,
45,
55,
102,
55,
55,
98,
47,
108,
111,
99,
97,
116,
105,
111,
110,
115,
47,
117,
115,
45,
99,
101,
110,
116,
114,
97,
108,
49,
47,
119,
111,
114,
107,
102,
108,
111,
119,
115,
47,
116,
101,
115,
116,
95,
119,
111,
114,
107,
102,
108,
111,
119,
95,
118,
49,
34,
6,
99,
114,
101,
97,
116,
101,
42,
6,
118,
49,
98,
101,
116,
97
]
}
},
"done": false
},
"name": "projects/xxxxxxxxxxxx/locations/us-central1/operations/operation-1607572432499-5b6141fca342d-32b153bf-bfce0551",
"done": false,
"longrunningDescriptor": {
"operationsClient": {
"auth": {
"checkIsGCE": true,
"jsonContent": null,
"cachedCredential": {
"_events": {},
"_eventsCount": 0,
"transporter": {},
"credentials": {
"access_token": "ya29.c.KpcB6AdCAMGMr_FqY7veU-uQTAP2cenQDWOh3Msaw-CPjdodjeYKAEf7lw-m1joxmam06_4QgRJ5Atnlpcm7db37CAi0lz4LS5_KPkvaodE6oefkDChOly92BxyCfaJClrKqklcEbSt1yg-2iVwngXccgwtdko9sbM4UeUihNPYScdGY0bGT484x7Ai6e2vtAfZMC2r-DqGE-g",
"token_type": "Bearer",
"expiry_date": 1607573907456,
"refresh_token": "compute-placeholder"
},
"certificateCache": {},
"certificateExpiry": null,
"certificateCacheFormat": "PEM",
"refreshTokenPromises": {},
"eagerRefreshThresholdMillis": 300000,
"forceRefreshOnFailure": false,
"serviceAccountEmail": "default",
"scopes": [
"https://www.googleapis.com/auth/cloud-platform"
]
},
"_cachedProjectId": "xxxxxxxxxxxx",
"defaultScopes": [
"https://www.googleapis.com/auth/cloud-platform"
],
"_getDefaultProjectIdPromise": {}
},
"innerApiCalls": {},
"descriptor": {
"listOperations": {
"requestPageTokenField": "pageToken",
"responsePageTokenField": "nextPageToken",
"resourceField": "operations"
}
}
}
},
"result": null,
"metadata": {
"createTime": {
"seconds": "1607572432",
"nanos": 647948908
},
"target": "projects/xxxxxxxxxxxx/locations/us-central1/workflows/test_workflow_v1",
"verb": "create",
"apiVersion": "v1beta"
},
"backoffSettings": {
"initialRetryDelayMillis": 100,
"retryDelayMultiplier": 1.3,
"maxRetryDelayMillis": 60000,
"initialRpcTimeoutMillis": null,
"rpcTimeoutMultiplier": null,
"maxRpcTimeoutMillis": null,
"totalTimeoutMillis": null
},
"_callOptions": {
"timeout": 30000,
"retry": {
"retryCodes": [],
"backoffSettings": {
"initialRetryDelayMillis": 100,
"retryDelayMultiplier": 1.3,
"maxRetryDelayMillis": 60000,
"initialRpcTimeoutMillis": 60000,
"rpcTimeoutMultiplier": 1,
"maxRpcTimeoutMillis": 60000,
"totalTimeoutMillis": 600000
}
},
"autoPaginate": true,
"otherArgs": {
"headers": {
"x-goog-request-params": "parent=projects%2Fxxxxxxxxxxxx%2Flocations%2Fus-central1"
}
},
"bundleOptions": null,
"isBundling": true,
"apiName": "google.cloud.workflows.v1beta.Workflows"
}
}
** code: **
engine: ExecutionsClient;
builder: WorkflowsClient;
location = 'us-central1';
projectId: string;
constructor() {
this.engine = new ExecutionsClient();
this.builder = new WorkflowsClient();
this.projectId = serviceAccount.project_id;
}
async list(): Promise<any> {
console.log (`list workflows`);
const [ resp ] = await this.builder.listWorkflows({
parent: this.builder.locationPath(this.projectId, this.location),
});
console.log (`listWorkflow: ${JSON.stringify(resp)}`);
return resp;
}
async create(name: string, code: string): Promise<any> {
console.log (`creating workflow named: ${name}`);
const [ resp ] = await this.builder.createWorkflow({
parent: this.builder.locationPath(this.projectId, this.location),
workflow: {
sourceContents: code,
},
workflowId: name
});
console.log (`createWorkflow: ${JSON.stringify(resp)}`);
return resp;
}
async execute(name: string): Promise<any> {
const [resp] = await this.engine.createExecution({
parent: this.engine.workflowPath(this.projectId, this.location, name),
});
return resp;
}
After consulting the source for google-cloud/workflows I found where the problem was. createWorkflow is what they call a long operation and is actually 2 successive promises
const [operation] = await client.createWorkflow(request);
const [response] = await operation.promise();
I am trying to use the onMouseover api of c3js to include a data-label highlight instead of a tooltip (that is just highlight data-labels for that x-axis unlike showing it in a tooltip).
But when I try and look at the data, it (function) doesn't give me anything. I believe there is a different approach to do this.
My fiddle: https://jsfiddle.net/sourabhtewari/8uz8j01j/198/
my code:
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 600
},
onmouseover: onMouseover,
data: {
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39'
}
},
tooltip: {
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left:0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
padding: {
right: 30
},
point: {
show: false
}
});
function onMouseover(elemData) {
console.log(elemData);
}
Attach onmouseover/onmouseout handler to data instead of to general chart:
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
...
}
and apply style to data text labels:
function onMouseover(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "red");
}
function onMouseout(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "none");
}
Check the fiddle updated: https://jsfiddle.net/beaver71/2pxjdcm2/
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 600
},
//onmouseover: onMouseover,
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39'
}
},
tooltip: {
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left:0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
padding: {
right: 30
},
point: {
show: false
}
});
function onMouseover(elemData) {
console.log(elemData.name, elemData.index);
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "red");
}
function onMouseout(elemData) {
var id = elemData.name;
if (id==undefined) id = elemData.id;
var el = d3 .select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
el.style("stroke", "none");
//rgb(255, 102, 102)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<div id="chart"></div>
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 am going to use sparkline in the" usage" column, just in the way that the two sparkline chart cover each other
There is a problem because when I click on the button Edite "sparkline" disappears.
Or click on "usage column" think that happens.
Why tooltip as bad as it can be displayed tooltip not regular.
Why sparkline "usage column" in all rows, there is only one row
jsfiddle code
$(document).ready(function () {
//var ds = new kendo.data.DataSource({
// transport: {
// read: {
// url: '/api/clientssnapshot',
// dataType: 'json',
// type: 'get',
// cache: false
// },
// },
// batch: true,
// pageSize: 10,
// schema: {
// model: {
// fields: {
// Mac: { editable: false, nullable: true },
// RadioName: { type: "string", validation: { required: true } },
// ApName: { type: "string", validation: { required: true, min: 1 } },
// RemoteIp: { type: "boolean" },
// TX: { type: "number", validation: { min: 0, required: true } },
// RX: { type: "number", validation: { min: 0, required: true } },
// Signal: { type: "number", validation: { min: 0, required: true } },
// Uptime: { type: "number", validation: { min: 0, required: true } },
// }
// }
// }
//});
$('.table').kendoGrid({
dataSource: {
data: [{
"Mac": "D4:CA:6D:28:D1:05",
"RadioName": "D4CA6D28D105",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 54,
"Signal": -64,
"Uptime": 797452,
"InRate": 0,
"OutRate": 0,
"AccountingId": 759,
"AccountingName": "فرشاد صفایی زاده",
"RemoteIp": "188.121.123.56",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:BD:64:92",
"RadioName": "Behrooz Hoseyn",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 18,
"Signal": -65,
"Uptime": 797446,
"InRate": 2,
"OutRate": 2,
"AccountingId": 750,
"AccountingName": "بهروز حسینی",
"RemoteIp": "188.121.123.48",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1E:B3:6C",
"RadioName": "UBNT",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 24,
"Signal": -65,
"Uptime": 310336,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.129",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1C:B1:89",
"RadioName": "Grous Tajhiz P",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 6,
"Signal": -62,
"Uptime": 122116,
"InRate": 0,
"OutRate": 0,
"AccountingId": 595,
"AccountingName": "حمید شمس لواسانی",
"RemoteIp": "188.121.124.17",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:3E:91:12",
"RadioName": "Anbar Aminzade",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 36,
"RX": 36,
"Signal": -68,
"Uptime": 1131461,
"InRate": 4,
"OutRate": 4,
"AccountingId": 977,
"AccountingName": "انبار شهید امین زاده ",
"RemoteIp": "188.121.123.31",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1A:59:D0",
"RadioName": "UBNT",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 36,
"RX": 12,
"Signal": -73,
"Uptime": 734737,
"InRate": 2,
"OutRate": 2,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.76",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:E2:2D:13",
"RadioName": "UBNT",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 54,
"RX": 36,
"Signal": -72,
"Uptime": 848,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.67",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:32:24:C9",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 36,
"RX": 24,
"Signal": -78,
"Uptime": 731588,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.188",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:FE:BB:E2",
"RadioName": "ketabforooshie",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 36,
"Signal": -72,
"Uptime": 240361,
"InRate": 0,
"OutRate": 0,
"AccountingId": 533,
"AccountingName": "قاسم رضاپور",
"RemoteIp": "188.121.124.214",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:D2:86:56",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 12,
"Signal": -72,
"Uptime": 126430,
"InRate": 0,
"OutRate": 0,
"AccountingId": 1453,
"AccountingName": "حسن قربانی",
"RemoteIp": "188.121.123.154",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:78:A3:19",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 54,
"Signal": -56,
"Uptime": 58617,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.39",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}
]
},
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
pageable: true,
columns: [{
field: "Mac",
title: "Mac",
width: 170
}, {
field: "RadioName",
title: "Radio",
width: 150
}, {
field: "ApName",
title: "Ap",
width: 80,
template: '#=ApName#'
}, {
field: "RemoteIp",
title: "Remote IP",
width: 160,
template: '#=RemoteIp#'
}, {
field: "AccountingName",
title: "Name",
width: 130,
template: ' #= AccountingName # '
}, {
field: "TX",
title: "TX",
width: 44
}, {
field: "RX",
title: "RX",
width: 50
}, {
field: "Signal",
title: "Signal",
width: 50
}, {
field: "Uptime",
title: "Uptime",
width: 78
}, {
field: "Usage",
title: "Usage",
template: '<span id="sparkline"></span>'
}, {
command: ["edit"],
title: " "
}],
editable: "popup",
});
$(".ref").click(function () {
$(".table").data("kendoGrid").dataSource.read();
});
$("#sparkline").kendoSparkline({
type: "area",
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],
}, {
name: 'New York',
data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
}],
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]
}
});
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>Search:
<input type="text" aria-controls="DataTables_Table_0">
</label>
</div>
<div class="title">
<button class="btn ref" type="submit">Refresh</button>
<h3></h3>
</div>
<div class="content">
<div class="table"></div>
</div>
thank you
After edit, the HTML elements are destroyed and recreated when the Grid updates. You will need to recreate your sparklines. It is basically the same as this issue.