Line chart period maxPeriod - amcharts

I have a dataset that has datetime and I want to shown my data with a period. But if my data set has anordinary data without period also it must be shown.
My dataset;
18.10.2017 08:00
18.10.2017 08:15
18.10.2017 08:30
18.10.2017 08:40
18.10.2017 09:15
My period: 15 min
How I can see data on 18.10.2017 08:40?
Mydata:
[
{
"column-1": 8,
"column-2": 5,
"date": "2014-03-01 08:00"
},
{
"column-1": 6,
"column-2": 7,
"date": "2014-03-01 08:15"
},
{
"column-1": 1,
"column-2": 3,
"date": "2014-03-01 08:30"
},
{
"column-1": 5,
"column-2": 3,
"date": "2014-03-01 08:40"
},
{
"column-1": 2,
"column-2": 1,
"date": "2014-03-01 09:15"
},
{
"column-1": 3,
"column-2": 2,
"date": "2014-03-01 09:30"
},
{
"column-1": 6,
"column-2": 8,
"date": "2014-03-01 09:45"
}

Make sure your minPeriod is set to the lowest period that can display your data. If your data isn't always in 15 minute increments, then use "mm" instead of "15mm". Since you have gaps, you'll also want to set the gapPeriod to a value that best represents where you want the gap to appear - if your data is usually within 15 minutes, then set it to 15.1:
graphs: [
{
// ...
connect: false,
gapPeriod: 15.1,
// ...
},{
// ...
connect: false,
gapPeriod: 15.1,
// ...
}
],
// ...
categoryAxis: {
parseDates: true,
minPeriod: "mm"
}
Demo

Related

Riot API - How can I have summoners roles on a current game

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

Datatables with laravel how to render hasMany relationship

i have the following response from my controller
[
{
"id": 1,
"place_id": 1,
"name": "Test",
"type": 5,
"created_at": "2018-06-04 15:29:02",
"updated_at": "2018-06-04 15:29:02",
"time": [
{
"id": 1,
"stadium_id": 1,
"day": "Saturday",
"from_hour": 7,
"to_hour": 12,
"created_at": "2018-06-04 15:29:42",
"updated_at": "2018-06-04 15:29:42"
},
{
"id": 2,
"stadium_id": 1,
"day": "Sunday",
"from_hour": 7,
"to_hour": 12,
"created_at": "2018-06-04 15:54:03",
"updated_at": "2018-06-04 15:54:03"
}
]
}
]
i want to access the day attribute in each time object
i tried the code below but of course it just loads the first result
is there a solution
columns: [
{ data: 'name' },
{ data: 'type' },
{ data: 'time.0.day' },
{ data: 'time.0.from_hour' },
{ data: 'time.0.to_hour' },
],
You can actually access time array by using the render property:
columns: [{
data: 'name'
},
{
data: 'type'
},
{
data: 'time',
render: function(data, type, row) {
var txt = '';
data.forEach(function(item) {
if (txt.length > 0) {
txt += '</br> '
}
txt += item.day;
});
return txt;
}
},
...
This would just add a line break for every objects in time. Here's a Fiddle for you to examine.

Composite graph (bar & line) using DC.js and crossfilter, line disappears when bar value = 0

When the last value of measure is zero the line disappears in the composite graph. I have the code pen here
Here is my sample data:
var data = [
{ "ID": 1, "TxDate": "2017/12/30", "InstCode": "Loc1", "NTS": 7, "NTS2": 1 },
{ "ID": 2, "TxDate": "2017/12/31", "InstCode": "Loc1", "NTS": 14, "NTS2": 6 },
{ "ID": 3, "TxDate": "2017/12/31", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 4, "TxDate": "2017/12/30", "InstCode": "Loc2", "NTS": 1, "NTS2": 1 },
{ "ID": 5, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 2, "NTS2": 1 },
{ "ID": 6, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 1, "NTS2": 1 },
{ "ID": 7, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 3, "NTS2": 4 },
{ "ID": 8, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 9, "TxDate": "2018/01/04", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 10, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 4, "NTS2": 1 },
{ "ID": 11, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 22, "NTS2": 14 },
{ "ID": 12, "TxDate": "2018/01/02", "InstCode": "Loc1", "NTS": 2, "NTS2": 0 },
{ "ID": 13, "TxDate": "2018/01/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 0 },
{ "ID": 14, "TxDate": "2018/01/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 0 },
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 3 }
];
var yearPieChart = dc.pieChart("#year-pie-chart");
var monthBarChart = dc.barChart("#month-bar-chart");
var composite = dc.compositeChart('#compo-bar-line-chart');
The issue is that the moment the last value of "NTS": 1, the composite graph appears. If I change the below line
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 3 }
to
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 1, "NTS2": 3 }
the composite graph appears. Is there any way to have the graph displayed even when the value "NTS": 0 Greatly appreciate your help.
Composite bar code:
composite
.width(1200).height(450)
.margins({ top: 20, bottom: 90, right: 10, left: 70 })
.x(d3.scale.ordinal().domain(nonEmptytxNTSGroup))
.xUnits(dc.units.ordinal)
//.xAxisLabel('Date')
.yAxisLabel("NTS")
.elasticX(true)
.elasticY(true)
//.rightYAxisLabel('Final Treatments')
.group(nonEmptytxNTSGroup)
.renderLabel(true)
._rangeBandPadding(1)
.compose(
[
dc.barChart(composite)
.gap(1)
.centerBar(true)
.group(nonEmptytxNTSGroup)
.elasticX(true)
.elasticY(true)
.renderLabel(true),
dc.lineChart(composite)
.group(nonEmptytxFinalTxGroup)
.useRightYAxis(false)
.colors('red')
.elasticX(true)
.elasticY(true)
.renderDataPoints({
radius: 10,
fillOpacity: 5.5,
strokeOpacity: 5.8
})
.renderLabel(true)
]
);
composite.renderlet(function (composite) {
composite.selectAll("g.x text")
.attr('dx', '-35')
//.select("g.axis.y")
//.attr("transform", "rotate(-45)");
.attr('transform', "translate(-10,0) rotate(-65)");
});
In a composite chart, all the child charts are going to share the same X scale. This is determined by the group given to the parent (composite) chart.
In your example, you're using the bar chart's group for the composite chart group. If the line chart's group has any keys which are not in the bar chart's group, it refuses to draw. (Specifically, it ends up with some NaNs in the line, for the X values that don't exist in the scale, and then a sanity check resets it to the empty line.)
The easiest way to fix this is not to use remove_empty_bins. Then the domains will always match for the two charts.
The more complicated but arguably more robust way is to use the solution that is commonly used for stacked charts, where all the stacks must also match in their X domains.
The FAQ contains combine_groups:
function combine_groups() { // (groups...)
var groups = Array.prototype.slice.call(arguments);
return {
all: function() {
var alls = groups.map(function(g) { return g.all(); });
var gm = {};
alls.forEach(function(a, i) {
a.forEach(function(b) {
if(!gm[b.key]) {
gm[b.key] = new Array(groups.length);
for(var j=0; j<groups.length; ++j)
gm[b.key][j] = 0;
}
gm[b.key][i] = b.value;
});
});
var ret = [];
for(var k in gm)
ret.push({key: k, value: gm[k]});
return ret;
}
};
}
Produce a combined group from the non-empty groups like this:
var combined = combine_groups(nonEmptytxNTSGroup, nonEmptytxFinalTxGroup);
Give it to the composite chart to set a common domain:
composite
// ...
.group(combined)
Tell each child chart to pull its values from one of the combined values:
.compose(
[
dc.barChart(composite)
// ...
.group(combined, "1", function(kv) { return kv.value[0]; })
// ...
dc.lineChart(composite)
.group(combined, "2", function(kv) { return kv.value[1]; })
// ...
]
Now you have a composite chart which will use the union of the domains of the two non-empty groups. Note that this will also force the child charts to have the same domain: any skipped values will now be set to 0:
Here the last bar is zero but its 0 label is still drawn because the line chart has a non-zero value there.
Fork of your codepen.

AmCharts zoom on render with dataLoader

I have several amCharts charts where I am trying to set up the default zoom. I can get it to work just fine with my code when using dataProvider such as here: http://jsfiddle.net/f2s32ojL/7/
When I try to do it on my own site but using dataLoader from a database, it does not work. It just gives me a default zoom of the entire dataset instead of the timeframe I want to use. Here is the code:
var chart = AmCharts.makeChart("chartdivFC", {
"type": "serial",
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"format": "json"
},
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"guides": [{
"value": 0,
"toValue": "<?=$min_FC?>",
"fillColor": "#CC0000",
"inside": true,
"fillAlpha": 0.1,
"lineAlpha": 0
}]
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "FC",
"balloonText": "<span style='font-size:18px;'>[[FC]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]
});
The json of the dataLoader looks like this:
[{"date":"2016-08-04 14:18:49","FC":"9"},{"date":"2016-08-04 14:44:30","FC":"9"},{"date":"2016-08-04 20:33:11","FC":"7.5"},{.....
Does anyone have any ideas how to make this work?
Thank you.
The reason why it doesn't work is because rendered fires before the dataLoader finishes loading your data; rendered fires when the chart area is rendered, regardless of whether data actually exists in the chart, so by the time you see the "Loading data" message pop up, the event has already fired.
You have two options:
1) Use the complete callback in the dataLoader to call the zoom method after the data has been loaded. Note that you have to wrap the zoom in a setTimeout call:
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"complete": function(chart) {
setTimeout(function() {
chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1))
});
}
},
2) Use the dataUpdated event instead. Note that this will fire every time you call validateData, which might not be ideal.
"listeners": [{
"event": "dataUpdated",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]

Kendo UI Radar Chart

Hi I am trying to make a Kendo UI radar chart. I want to know the correct format in order to display the data.
{
new {year = year, thisyear = new {satisfaction = pq1, organisation=pq2, expecations=pq3, teaching=pq3, consistent=pq4} } //cpe
};
Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate);
Response.Cache.SetMaxAge(new TimeSpan(24 * 31, 0, 0));
return Json(radata, JsonRequestBehavior.AllowGet);¨
Is this correct?
Your question is a little short on details, but if I understand correctly you could organize your data like this:
var data = [
{
"Criteria": "satisfaction ",
"Y2015": 5,
"Y2014": 8
},
{
"Criteria": "organisation",
"Y2015": 8,
"Y2014": 7
},
{
"Criteria": "expecations",
"Y2015": 6,
"Y2014": 9
},
{
"Criteria": "teaching",
"Y2015": 7,
"Y2014": 7
},
{
"Criteria": "consistent",
"Y2015": 5,
"Y2014": 9
},
]
$("#chart").kendoChart({
title: {
text: "Survey"
},
dataSource: data,
seriesDefaults: {
type: "radarLine",
style: "smooth"
},
series: [{
name: "2015",
field: "Y2015"
}, {
name: "2014",
field: "Y2014"
}],
categoryAxis: {
field: "Criteria"
},
valueAxis: {
max: 10
},
theme: "Fiori"
});
DEMO

Resources