We Keep Coding

Get id from tr created using js-grid, property path changes every time

So i'm using js-grid to populate a generic grid. I have 4 visible columns and 1 hidden id column. I am trying to pass the unique id per row into another function. However, when I dive into the property path of a object return by using jquery. The key that I need to get to is nested in a key that seems to change every time i return the object.
Here's the JS grid code...
$("#jsGrid").jsGrid({
width: "100%",
height: "25rem",
autoload: true,
inserting: false,
editing: false,
sorting: false,
paging: true,
pageloading: true,
data: data,
fields: [
{ name: "ID", type: "text", width: 25, align: "center", visible: false },
{ name: "Date", type: "text", width: 25, align: "center" },
{ name: "Color", type: "text", width: 25, align: "center" },
{ name: "type", type: "text", width: 25, align: "center" },
{ name: "other", type: "text", width: 25, align: "center" }
]
});
Here's some sample data...
var data = [
{ "ID": "123", "Date": "3/15/19", "color": "Brown", "type": "something", "other": "7 mins" },
{ "ID": "124", "Date": "3/15/19", "color": "Red", "type": "something", "other": "15 mins" },
{ "ID": "125", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "15 mins" },
{ "ID": "126", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "7 mins" },
{ "ID": "127", "Date": "3/15/19", "color": "Black", "type": "something", "other": "20 mins" },
{ "ID": "128", "Date": "3/15/19", "color": "Gold", "type": "something", "other": "5 mins" },
{ "Date": "TOTAL", "color": "", "type": "", "other": "74 mins"}
];
Here's the code I use to get the <tr> object using console
$(".jsgrid-table > tbody > tr:not('[class*=totalsRow]')");
Here's what I see. The key/keys that changes are in the attached image and starts with the word jQuery.

So i have tried your code. Based on what you have given me, i had to write custom method to achieve it.
var k = $('.jsgrid-table > tbody > tr');
Items = GetMatchingProperties(k, 'jQuery'); //'jQuery' This is the word that matches
console.log(Items);
function GetMatchingProperties(items, attribName) {
var list = [];
$(items).each(function(i, t) {
var $t = $(t);
var keys = Object.keys($t[0]);
var JQueryKey = keys.filter(function(x){
if(x.match(attribName)){
return x;
}
});
$.each(JQueryKey, function(i, v){
list.push( $t[0][v] );
});
});
return list;
}

Stacked bars in Charts.js from a JSON list of objects

i'm trying to create a Charts.js with stacked bars from a json list of objects, with no success...
my json is
[{
"machine": {
"machineId": 1,
"name": "a",
"description": "aaaaaa",
"active": true,
"direction": "IN"
},
"realEnergy": 56.99,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.11,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 57.11,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.14,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 58.18,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 71.11,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 64.11,
"lastUpdate": "2018-10-16 10:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 72.11,
"lastUpdate": "2018-10-16 10:30:00"
}]
I would like to have lastUpdate on the labels and stacked realEnergy values for the bars.
I was trying to adopt this json to match Charts.js dataset with no luck.
var size = Object.keys(json).length ;
labels = response.map(function(e) {
return e.lastUpdate;
});
for(var i = 0; i < size; i++){
datasetValue[i] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
label :json[i].machine.name,
data : json[i].realEnergy
}
}
var myData = {
datasets : datasetValue
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:myData
},
options: {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
}
}
});
}
I can get the labels correctly but no data on it, cannot understand how the dataset values should be created.

Dataset's data property is an array of values that will be distributed across the labels (in this case realEnergy value per each lastUpdate). I assume that each dataset should represent particular machine.
Here's the code to generate datasets and labels based on your JSON data:
const jsonData = JSON.parse(yourJSONData);
const colors = ['yellow', 'green', 'blue']; // purely optional
const machines = jsonData.reduce((uniqueMachines, record) => {
// find unique machines that will be base to our datasets
if (!uniqueMachines.find(machine => machine.machineId === record.machine.machineId))
uniqueMachines.push(record.machine);
return uniqueMachines;
}, []);
const lastUpdates = jsonData.reduce((uniqueLastUpdates, record) => {
// get labels for our chart
if (!uniqueLastUpdates.find(lastUpdate => lastUpdate === record.lastUpdate))
uniqueLastUpdates.push(record.lastUpdate);
return uniqueLastUpdates;
}, []);
const datasets = machines.map((machine, index) => {
const label = machine.name;
const backgroundColor = colors[index]; // purely optional
const data = lastUpdates.map(lastUpdate => {
const valueRecord = jsonData.find(record => record.machine.machineId === machine.machineId && record.lastUpdate === lastUpdate);
if (!valueRecord) return 0; // if value record is not defined, return 0;
return valueRecord.realEnergy;
});
return {
// here we return dataset
label,
backgroundColor,
data,
stack: 'main' // here we define the stack
};
});
And here's the final configuration for the chart:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lastUpdates,
datasets
},
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
A working example on the JSFiddle: click

Offset guides label in case of text overlapping in amcharts

I would like to include guides into my amcharts graphs and I found very descriptive examples. However I'm struggling with positioning of label text, especially in case when guides are so close that labels overlap.
Here is example code https://jsfiddle.net/Tripy/1wwygcy7/2/
HTML:
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 500px;"></div>
Javascript:
var chartData = weekendGuides = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 200 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 200; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
chartData.push( {
"date": newDate,
"value": a1,
"volume": b1
} );
// add weekend guide
if ( 6 == newDate.getDay() ) {
var toDate = new Date( newDate );
toDate.setDate( newDate.getDate() + 2 );
weekendGuides.push( {
"date": newDate,
"toDate": toDate,
"lineAlpha": 0,
"fillAlpha": 0.05,
"fillColor": "#000",
"expand": true
} );
}
}
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData,
"categoryField": "date"
} ],
"panels": [ {
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
} ],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
},
"categoryAxis": {
"guides": weekendGuides
},
"valueAxes": [ {
"guides": [ {
"value": 325,
"lineAlpha": 0.8,
"lineColor": "#0c0",
"label": "Guide #1",
"position": "right"
}, {
"value": 322,
"lineAlpha": 0.8,
"lineColor": "#0c0",
"label": "Guide #2",
"position": "right"
}]
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
Any idea how to push label text below the guide for guides in case that labels are overlapping. Perhaps with CSS code for class name amcharts-guide-[id]?

There isn't a way to do this through the guide properties properties, but you have the right hunch with the css class name. Set addClassNames to true, give your guides IDs and then add a drawn event listener in your stock panel that adjusts the desired guide(s) directly by calling querySelector on the .amcharts-guide-[id] tspan selector and adjusting the y attribute:
AmCharts.makeChart("chartdiv", {
"addClassNames": true,
// ...
"stockPanels": [{
"valueAxes": [{
"guides": [{
"id": "guide-1",
// ..
}, {
"id": "guide-2",
// ..
}]
}],
"listeners": [{
"event": "drawn",
"method": function() {
var guide2Text = document.querySelector('.amcharts-guide-guide-2 tspan');
if (guide2Text) {
guide2Text.setAttribute('y', 20);
}
}
}]
}],
// ..
});
Updated fiddle

Unable to assigning json data in stockevents of amcharts

I am trying to display amCharts Stock Chart using Data Loader. Everything is working well. Now I want to display stock events using AJAX but unable to find clue to how to do it. JavaScript code drawing the chart:
<script>
var chartData = [];
generateChartData();
function generateChartData() {
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
var b = Math.round(Math.random() * 100000000);
chartData.push({
date: newDate,
value: a,
volume: b
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download as image",
"menu": [ "PNG", "JPG", "SVG" ]
}, {
"label": "Download data",
"menu": [ "CSV", "XLSX" ]
}, {
"format": "PRINT",
"label": "Print Chart"
} ]
} ]
},
"theme": "light",
"fontFamily": 'Open Sans',
"color": '#888',
dataSets: [
{
title: "MSFT",
color: "#b0de09",
fieldMappings: [{
fromField: 'value',
toField: 'value'
}],
dataLoader: {
"url": "data.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
compared : true,
categoryField: 'date'
},
],
panels: [{
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
graphBulletSize: 1,
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
periodSelector: {
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
mouseWheelZoomEnabled:true,
usePrefixes: true
}
});
</script>
json result is following
[{"date":"2013-08-24","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"text","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"flag","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"text","graph":"g1","backgroundColor":"#FFFFFF","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]
Am getting following result like below image
But I want result like below second image

You can use eventDataLoader block in your data set definition, in exactly the same way you are using dataLoader to load chart data.
I.e.:
dataSets: [ {
title: "MSFT",
color: "#b0de09",
fieldMappings: [{
fromField: 'value',
toField: 'value'
}],
dataLoader: {
"url": "data.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true
},
eventDataLoader: {
"url": "events.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true
},
compared : true,
categoryField: 'date'
} ]
Note that I removed reversed, delimiter, and useColumnNames parameters since they are irrelevant for JSON format.

#martynasma is right, but you can use postProcess to further process the received event data.
Here's an example I got from one of their examples on github:
"eventDataLoader": {
"url": "data/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function ( data ) {
for ( var x in data ) {
switch( data[x].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
data[x] = {
type: "pin",
graph: "g1",
backgroundColor: color,
date: data[x].Date,
text: data[x].Type,
description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
};
}
return data;
}
}

I want to show Diamond Shaped icon in my chart created using amCharts

I want to show diamond-shaped icon in my chart. I have created this charts using amCharts.
My present amChart:
And I want to put diamond-shaped icon just like in following image:
Here is my JavaScript code:
function getChart(id) {
var allCharts = AmCharts.charts;
for (var i = 0; i < allCharts.length; i++) {
if (id == allCharts[i].div.id) {
return allCharts[i];
}
}
}
function load_holding_graph(graph_type, history, title, aggregate, industry){
var title_1 = industry[0].ticker + '\n';
var title_2 = industry[0].name;
var title_3 = industry[0].industry + ' . ' + industry[0].sector;
// current day exclude weekends
var current_date = new Date();
switch(current_date.getDay()){
case 0:
var s = new Date(current_date.getTime());
var d = s.setDate(current_date.getDate() - 1);
break;
case 6:
var s = new Date(current_date.getTime());
var d = s.setDate(current_date.getDate() - 2);
break;
default:
var d = current_date;
}
var latest_trading_day = $.datepicker.formatDate('dd MM, yy', d);
// CREATE DATA
var chartData = [];
generateChartData(history);
function generateChartData() {
for (var i = 0; i < history.length; i++) {
var date = new Date(history[i].date);
var val = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: date,
open: history[i].open,
close: history[i].close,
high: history[i].high,
low: history[i].low,
volume: history[i].volume,
value: val
});
}
}
// CHART CONFIG
var chartConfig = {
type: "stock",
pathToImages : "/static/img/amcharts/",
addClassNames:true,
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "val",
toField: "val"
}
],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date",
compared: false,
},
{
fieldMappings: [{
fromField: "value",
toField: "value"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date"
},
],
panels: [{
addClassNames:true,
percentHeight: 75,
valueAxes: [{
id:"v1",
//logarithmic:true,
unit : '$',
unitPosition:"left",
position:"left",
},
{
id:"v2",
unit : '$',
unitPosition:"left",
position:"right",
synchronizeWith: "v1",
synchronizationMultiplier: 1,
},
],
marginBottom: 0,
marginTop: 0,
stockGraphs: [{type: graph_type,
id: "g1",
title:title,
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#11EDF1",
fillColors: "#11EDF1",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
// comparedGraphLineThickness: 2,
columnWidth: 0.4,
useDataSetColors: false,
comparable: true,
compareField: "close",
bullet : "round",
bulletAlpha : 0,
showBalloon: true,
showBalloonAt:"top",
"balloonText":"$[[value]]",
} ],
stockLegend: {
enabled:true,
useGraphSettings:true,
data:[{title: ""}],
// valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%",
markerType: "diamond",
backgroundColor :"#ffffff",
markerSize : 24,
position:"top",
},
},
],
panelsSettings: {
color: "#fff",
plotAreaFillColors: "#333",
plotAreaFillAlphas: 1,
marginLeft: 60,
marginRight: 60,
marginTop: 20,
marginBottom: 5,
},
categoryAxesSettings: {
equalSpacing: true,
gridColor: "#555",
gridAlpha: 1,
maxSeries:0,
markPeriodChange:false,
autoGridCount:true,
minHorizontalGap:100,
dateFormats: [{period:'fff',format:'JJ:NN:SS'},
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD, YYYY'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MMM YYYY'},
{period:'YYYY',format:'YYYY'}],
},
valueAxesSettings: {
gridColor: "#555",
gridAlpha: 1,
inside: false,
showLastLabel: true,
},
chartCursorSettings: {
pan: true,
valueLineEnabled:true,
valueLineBalloonEnabled:true,
onePanelOnly:true,
},
legendSettings: {
color: "#fff"
},
stockEventsSettings: {
showAt: "high"
},
balloon: {
textAlign: "left",
offsetY: 10,
},
"export": {
"enabled": true,
"backgroundColor": "#fff",
},
}
AmCharts.charts = [];
// CREATE CHART
var chart = AmCharts.makeChart("holding-graph",chartConfig);
console.log(chart)
}

If your chart never uses data point grouping, either by having few data points or having it disabled, you should go with the bulletField solution #gerric proposed.
If the above does not apply, probably the best course of action is to use Trend lines for that.
A trend line is basically a line from one datetime/value pair to another. However, it can also have an icon attached at its either end, which we can exploit to add a diamond image (we're going to use SVG) at any point of the chart.
Here's an example of a ready-made chart:
var icon = "M256,0L96,256l160,256l160-256L256,0z";
var chartData = [];
var iconDate, iconValue;
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var val = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value1: val
});
if (i === 480) {
iconDate = new Date(newDate);
iconDate.setHours(12);
iconValue = val;
}
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "light",
"dataSets": [{
"fieldMappings": [{
"fromField": "value1",
"toField": "value1"
}, {
"fromField": "value2",
"toField": "value2"
}, {
"fromField": "value3",
"toField": "value3"
}, {
"fromField": "value4",
"toField": "value4"
}],
"dataProvider": chartData,
"categoryField": "date"
}],
"panels": [{
"stockGraphs": [{
"id": "g1",
"title": "Graph #1",
"lineThickness": 2,
"valueField": "value1",
"useDataSetColors": false
}],
"trendLines": [{
"initialValue": iconValue,
"initialDate": iconDate,
"lineAlpha": 1,
"lineColor": "#ff0000",
"initialImage": {
"svgPath": icon,
"color": "#cc0000",
"width": 15,
"height": 25,
"offsetX": -7
},
"finalValue": iconValue,
"finalDate": iconDate
}]
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "bottom",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

If you use bulletField, you can set bullets from within your data. The diamond shape is already provided by AmCharts.These two examples could help you out: fiddle & amDemo