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>
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'm creating a pretty simple line graph and want the initial load to be a section of all available data, so am setting extent on the x axis:
This is how I am setting the extent:
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
But it is ignored. The chart just shows the full extent of the data.
Is this the correct way to show a subset of the data when the chart is generated?
This is the full code and here's a fiddle (I tried a code snippet but didn't work)
const columnData = [
["x", "2017-10-01", "2017-10-02", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-15", "2017-10-16"],
["data0", -55, -50, 11, -18, 39, 65, -84, -15, 14, 81, -79, 67, -48, 38, 99, -60],
["data1", 28, 14, -99, -33, 55, 71, 58, 66, 7, -88, 99, -37, -7, 59, -13, -57],
["data2", 14, 6, -9, 25, 42, -93, -6, 67, -35, 88, 36, 45, 42, 78, 51, -88],
["data3", 31, -73, -69, 45, 55, 15, -48, 41, -64, -12, -6, 14, -69, 16, -65, -73],
["data4", 98, 60, 82, 80, -62, -47, 55, 87, -65, 37, 22, 30, 93, -69, -88, 33],
["data5", -98, 57, 71, -25, -40, 13, 72, -90, 71, -71, -21, -9, -90, 73, -94, 100]
];
const generateChart = function() {
const chart = c3.generate({
data: {
"x": "x",
"columns": columnData,
"type": "line"
},
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
zoom: {
enabled: true
},
transition: {
duration: 100
},
legend: {
show: false
},
subchart: {
show: true
},
size: {
height: 500
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
};
generateChart();
As of 11th May 2018 it seems this is a bug: https://github.com/c3js/c3/issues/2357
I switched to earlier versions (see below) of C3 and D3 and it works as it should.
I am now using C3 version 0.4.10 and D3 version 3.5.0
I am trying to build a chart, but I see that the starting data labels at the beginning being cut off. Not sure what is the reason. I tried using the padding solution but it doesnt seem to work.
My code is based on the C3jS library.
My x-axis padding is :
padding: {
top: 0,
bottom: 0,
left: 0
}
and y axis padding :
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
My fiddle: https://jsfiddle.net/sourabhtewari/8uz8j01j/371/
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 colors = {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39',
default: '#000000'
};
var filterShade = {
data1: '#ff666685',
data2: '#73757587',
data3: '#27a5cf87',
data4: '#c9bc228f',
data5: '#4d4b3985',
default: '#000000'
}
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: 1000
},
legend: {
show: false
},
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: colors.data1,
data2: colors.data2,
data3: colors.data3,
data4: colors.data4,
data5: colors.data5,
}
},
tooltip: {
show: false,
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,
left: 0,
right: 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",
}
}
},
grid: {
x: {
lines: [
{value: '2017-06-01', text: 'June 17'}
]
}
},
padding: {
right: 30,
left: 80,
top: 80
},
point: {
show: false
}
});
d3.select("svg").append("foreignObject")
.attr("x", -20)
.attr("width", 200)
.style("text-anchor", "left")
//.append("xhtml:body")
.style("font", "14px 'Calibri'")
.style("text-align", "center")
.style("line-height", "0.2")
.html("<h3>ABC Approval of</h3></b><h3>need for speed Strategy</h3></b><h3>(Dec-15)</h3>");
d3.select("svg").append("circle")
.attr("class", "xyZero")
.attr("cx", 80)
.attr("cy", 970)
.attr("r", 6);
d3.select("svg").append("circle")
.attr("class", "data1")
.attr("cx", 40)
.attr("cy", 920)
.attr("r", 30)
.attr("fill", colors.data1);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 920)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 1<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data2")
.attr("cx", 40)
.attr("cy", 800)
.attr("r", 30)
.attr("fill", colors.data2);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 800)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 2<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data3")
.attr("cx", 40)
.attr("cy", 620)
.attr("r", 30)
.attr("fill", colors.data3);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 620)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 3<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data4")
.attr("cx", 40)
.attr("cy", 470)
.attr("r", 30)
.attr("fill", colors.data4);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 470)
.attr('class', 'dataLabelBlack')
.attr("width", 200)
.html("Data 4<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data5")
.attr("cx", 40)
.attr("cy", 280)
.attr("r", 30)
.attr("fill", colors.data5);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 280)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 5<sup>1</sup>");
console.log(d3.select("svg defs"));
var data1 = d3.select("svg defs").append("filter")
.attr("id", "filter1")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data1)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter1")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data2 = d3.select("svg defs").append("filter")
.attr("id", "filter2")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data2)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter2 = d3.select("#filter2")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data3 = d3.select("svg defs").append("filter")
.attr("id", "filter3")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data3)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter3 = d3.select("#filter3")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data4 = d3.select("svg defs").append("filter")
.attr("id", "filter4")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data4)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter4 = d3.select("#filter4")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data5 = d3.select("svg defs").append("filter")
.attr("id", "filter5")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data5)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter5")
.append('feComposite')
.attr('in', 'SourceGraphic');
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);
if (id == 'data1')
el.attr('filter', 'url(#filter1)');
if (id == 'data2')
el.attr('filter', 'url(#filter2)');
if (id == 'data3')
el.attr('filter', 'url(#filter3)');
if (id == 'data4')
el.attr('filter', 'url(#filter4)');
if (id == 'data5')
el.attr('filter', 'url(#filter5)');
}
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.attr('filter', '')
}
Use a min/max configuration also for x axis like below:
x: {
type: 'timeseries',
min: '2015-11-01',
max: '2017-11-01',
...
}
im using jquery datatables with fixedColumns. Everything working fine but im having an issue with scroll x.
As u can see, i cant remove the scroll x from fixed column. Any ideas to solve this? Initialization:
$(document).ready(function(){
var oTable = $('#matriz').dataTable({
"bStateSave": true,
"iCookieDuration": 60*60*24*30*365,
"sDom": 'TC<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "xls",
"sButtonText": "Excel",
"mColumns":
[
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
13, 14, 15, 16, 17, 18, 19, 20, 21, 22
]
}
]
},
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets':
[
8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 23
]
}
],
"pagingType": "full_numbers",
"oLanguage": {
"sInfo": "Exibindo de _START_ até _END_. Resultados encontrados: _TOTAL_",
"sSearch": "Pesquisar: ",
"sEmptyTable": "Não existem solicitações para exibir.",
"sLengthMenu": "Visualizar _MENU_ solicitações",
"oPaginate": {
"sFirst": "Primeira",
"sLast": "Última",
"sNext": "Próxima",
"sPrevious": "Anterior"
}
},
"oColVis": {
"buttonText": "Ocultar colunas",
"bRestore": true,
"aiExclude": [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 23 ],
"sRestore": 'Restaurar'
},
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todas"]],
"iDisplayLength": 10,
scrollY: 325,
"sScrollX": "100%",
scrollCollapse: true,
fixedColumns: {
leftColumns: 1
}
});
setTimeout(function (){
oTable.fnAdjustColumnSizing();
}, 10 );
});
Adding overflow-x:hidden to the DTFC_LeftBodyLiner div seems to fix the display issue.
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.