Develop Reference

Multiple horizontal lines displayed between set of dynamically created tables

I am facing one issue while inserting horizontal line on the fly (i.e. at the time of creating dynamic tables).
As you can see from the code snippet below:
1) If you click on any row of the first table/grid, a horizontal line is shown below it and a new table is shown
2) If I click on any row of second grid/table ,everything looks good and a horizontal line is shown and a 3rd grid/table is shown
3) Click on 3rd grid , 4th grid is shown and a horizontal line. But when you click on 4th grid, you will notice an additional horizontal line getting added just above the grid as shown in the screenshot
(highlighted) below:
Could anyone tell me why this is happening?
I am trying to accomplish this using an additional variable hll in the code. Not sure if it's redundant to use hll or I could use hl for the same purpose?
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
Please consider the code snippet below :
var source = {
localdata: [
["Test1", "2018-08-29 14:19:07", "2020-08-29 14:19:07", "Path1"],
["Test2", "2018-09-05 11:26:39", "2020-09-05 11:26:39", "Path2"],
["Test3", "2018-08-30 07:32:23", "2020-08-30 07:32:23", "Path3"],
["Test4", "2018-09-11 09:01:42", "2020-09-11 09:01:42", "Path4"],
["Test5", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path5"],
["Test6", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path6"],
["Test7", "2018-09-13 07:34:57", "2020-09-13 07:34:57", "Path7"]
],
datafields: [{
name: 'dataSetName',
type: 'string',
map: '0'
},
{
name: 'accessStartDate',
type: 'date',
map: '1'
},
{
name: 'accessEndDate',
type: 'date',
map: '2'
},
{
name: 'conceptPath',
type: 'string',
map: '3'
}
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#main_downloader_grid").jqxGrid({
source: dataAdapter,
width: 381,
height: '200',
pageable: true,
sortable: true,
autoheight: true,
columnsResize: true,
theme: 'classic',
columns: [{
text: 'Data Set',
datafield: 'dataSetName',
width: 140
},
{
text: 'Start Date',
datafield: 'accessStartDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'End Date',
datafield: 'accessEndDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'Concept Path',
datafield: 'conceptPath',
width: 50,
hidden: true
}
]
});
// Row Select Logic Starts Here
$("#main_downloader_grid").on("rowselect", function(e) {
let data_set_name = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'dataSetName');
console.log("Cell Value Test");
console.log(data_set_name.value);
let conceptPath = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'conceptPath');
console.log("Concept Path Test");
console.log(conceptPath.value);
$('#commonWindow').remove();
//$('.clickable').remove();
$('.clickable').next('#testbutton').remove();
$('.clickable').slice(1).remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
//elem.setAttribute('style', 'margin:500px 10px 20px 20px;');
console.log(elem);
let data = [{
letter: '<b>People</b>'
},
{
letter: '1) Detailed demographics data of all people'
},
{
letter: '2) Attributes associated with all people'
},
{
letter: '<b>Technology</b>'
},
{
letter: '1) Computer details'
},
{
letter: '2) Hardware Details'
},
{
letter: '3) Software Details'
},
{
letter: '<b>Company Details</b>'
}
/* {conceptpath: conceptPath.value } */
];
let source = {
localdata: data,
datatype: "array",
datafields: [{
name: 'letter',
type: 'string'
} /* ,{ name: 'conceptpath', type: 'string' } */ ]
};
let newDataAdapter = new $.jqx.dataAdapter(source);
$(elem).jqxGrid({
source: newDataAdapter,
width: 395,
height:310,
columns: [{
text: 'Data set <b>' + data_set_name.value + '</b> selected, what data do you want to see?',
datafield: 'letter'
//width: 450
}
]
});
$(elem).insertAfter('#main_downloader_grid');
elem.style.margin = "50px 10px 20px 50px";
var hl = document.createElement('div');
hl.id = 'horizLine';
hl.style.margin = "25px 0";
hl.style.height = "1px";
hl.style.background = "black";
hl.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$(hl).insertAfter('#main_downloader_grid');
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$("#commonWindow").on("rowselect", handleClick);
function handleClick(e) {
var $el = $("<div />", {
class: "clickable",
style: "margin:100px 10px 20px 20px ",
})
.on('click', handleClick)
$el.jqxGrid({
height: 270,width:520, pageable: true,source: dataAdapter, columns: [
{ text: 'Data Set Name', datafield: 'dataSetName', width: 200 },
{ text: 'Access Start Date', datafield: 'accessStartDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Access End Date', datafield: 'accessEndDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Concept Path', datafield: 'conceptPath', width: 100,hidden:true }
]
});
$(hll).insertAfter(".clickable");
var $this = $(this), $parent = $(this).parent();
if (e.type == 'rowselect') {
$('.clickable').next('#testbutton').remove();
$('.clickable').next('#newhorizline').remove();
$('.clickable').slice(1).remove();
}
var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
$(".clickable").jqxGrid('exportdata', 'csv', 'jqxGrid');
});
console.log($button);
$button.jqxButton({ width: 100, height: 20});
$button.html('Download Data');
$el.after($button);
$parent.append($el);
$(this).off('click');
}
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
<div id="main_downloader_grid" style="margin:50px 10px 20px 50px"></div>
<div class="clickable" style="margin:50px 10px 20px 20px;"></div>
</div>

While, I am not exactly sure what you are try to accomplish, you can get horizontal lines without css using the tag in html!
<h2>Hello!</h2>
<hr>
<h3>Hi, Tim!</h3>

Subgrid in jsgrid

I am trying to show the data history in jsgrid as asked here.
$("#jsGrid").jsGrid({
...
rowRenderer: function(item) {
var row = $("<tr>");
var historyGrid = $('<tr>').addClass('nested-grid').hide();
historyGrid.jsGrid({
width: "100%",
height: "auto",
editing: false,
data: [{"a":"d1","b": "d2"},{"a":"d3","b":"d4"},{"a":"d5","b":"d6"}],
heading: false,
fields: [{ name: "a", type: "text"}, {name: "b",type: "text"}]
})
var items= Object.keys(item);
items.forEach(function(key){
if(key!=items[items.length-1]) {
var cell = $("<td>").addClass("jsgrid-cell").append(item[key]);//line 1
row.append(cell);
}
});
row.click(function () {
historyGrid.toggle();
})
row.append(historyGrid);
return row.add(historyGrid);
}
});
The history appears as below. I want to display in such a way that, it spans the entire blank(row) area.
if I change it tr to td at line 1, it appears as below
Any help?

How Align the Legend Items in Chart.js 2?

I just need to align the Chart Legend so it don't look too messy as the default shows, here is an example what I'm trying to achieve:
Please give some code suggestions: https://jsfiddle.net/holp/68wf75r8/
new Chart(document.getElementById("field-0"), {
type: 'pie',
data: {
labels: ["Chat", "Prospeção", "Whatsapp", "Trial", "Site", "Telefone", "E-mail", "Evento"],
datasets: [{
data: [700, 400, 200, 150, 80, 50, 20, 10],
borderWidth: 2,
hoverBorderWidth: 10,
backgroundColor: pieColors,
hoverBackgroundColor: pieColors,
hoverBorderColor: pieColors,
borderColor: pieColors
}]
},
options: {
legend: {
labels: {
padding: 20
}
}
}
});

There is legend.labels.generateLabels hook you generally can use to customise your legend labels.
I found out, that you can put something like below to adjust Chart.js calculations.
generateLabels: function (chart) {
chart.legend.afterFit = function () {
var width = this.width; // guess you can play with this value to achieve needed layout
this.lineWidths = this.lineWidths.map(function(){return width;});
};
// here goes original or customized code of your generateLabels callback
}
Weird thing that there is no actual configuration option to achieve this.

Chartjs v2 creates an overhead to handle the legends. Basically what you are looking for is to leverage the usage of generateLabels.
The key point to bare in mind is that you need to return an valid array of legend objects.
This plunker describes the solution.
Main focus on this part:
generateLabels: (chart) => {
chart.legend.afterFit = function () {
var width = this.width;
console.log(this);
this.lineWidths = this.lineWidths.map( () => this.width-12 );
this.options.labels.padding = 30;
this.options.labels.boxWidth = 15;
};
var data = chart.data;
//https://github.com/chartjs/Chart.js/blob/1ef9fbf7a65763c13fa4bdf42bf4c68da852b1db/src/controllers/controller.doughnut.js
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var getValueAtIndexOrDefault = this.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
text: label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
// Extra data used for toggling the correct item
index: i
};
});
}
return [];
}

I tried to do as advised by the comments above. But to see that it is really difficult. It’s better and easier for me to set:
legend: {display: FALSE, ..} `, and then render the legend using html (angular, react, view .. another render template):
// part of angualr model class
public dataSets = [{
label: "New Deals",
backgroundColor: "#88B2FF",
data: [26, 15, 5],
},
{
label: "Active Deals",
backgroundColor: "#397FFF",
data: [7, 13, 22],
},
....
this.chart = new Chart(ctx, {
type: "roundedBar",
data: {
labels: this.xLabels,
datasets: this.dataSets,
},
<div style="width: 380px;height: 200px; display: inline-block;">
<canvas id="chart" aria-label="Hello ARIA World" role="img"></canvas>
</div>
<!-- This is angular template -->
<ul class="legend">
<li *ngFor="let set of dataSets">
<i [style.backgroundColor]="set.backgroundColor" class="icon"></i>
<label>
{{ set.label }}
</label>
</li>
</ul>
<style>
.legend {
display: flex;
text-align: center;
justify-content: space-between;
font-size: 10px;
line-height: 12px;
}
.icon {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
</style>

Updating a Kendo Chart series' data with a variable causes the redraw to draw the column off the chart

I am attempting to create an interactive Kendo Chart. There are three series: CAPITAL, FUEL, and OM. Each series has three data values: PROPANE, DIESEL, and ELECTRIC.
What I am attempting to do is wire up a text box on change to update the PROPANE => CAPITAL value of the Kendo Chart and update the chart. For some reason when I do this the altered column is drawn at some unknown height that is off the chart (no pun intended).
Here is the javascript:
// chartSeries Index constants
var CAPITAL = 0;
var FUEL = 1;
var OM = 2;
var seriesData = {
capital: {
propane: 24200,
diesel: 25100,
electric: 34400
},
fuel: {
propane: 37783,
diesel: 44969,
electric: 7520
},
om: {
propane: 24960,
diesel: 24960,
electric: 15600
}
}
$(document).ready(
function () {
createChart();
});
$(document).bind("kendo:skinChange", createChart);
function createChart() {
$("#chart").kendoChart({
chartArea: {
width: 600,
height: 400
},
title: { text: "Lift Truck Ownership Cost Comparison" },
legend: { visible: false },
seriesDefaults: {
type: "column",
stack: true
},
series: [
{
name: "Capital Costs",
data: [seriesData.capital.propane, seriesData.capital.diesel, seriesData.capital.electric],
color: "#56B5FC"
}, {
name: "Fuel",
data: [seriesData.fuel.propane, seriesData.fuel.diesel, seriesData.fuel.electric],
color: "#E5DB14"
}, {
name: "O & M",
data: [seriesData.om.propane, seriesData.om.diesel, seriesData.om.electric],
color: "#14D314"
}
],
valueAxis: {
max: 100000,
line: { visible: false },
minorGridLines: { visible: true }
},
categoryAxis: {
categories: ["Propane", "Diesel", "Electric"],
majorGridLines: { visible: false }
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).on("change", "#propaneCapitalCost", function() {
var chart = $("#chart").data("kendoChart");
var temp = $("#propaneCapitalCost").val();
chart.options.series[CAPITAL].data = [temp, 25100, 34400];
chart.refresh();
});
And the html:
<style>
.emissionHeader {
font-weight: bold;
margin-bottom: 5px;
}
.emissionBottomBorder {
border-bottom: thin solid #615A39;
margin: 20px;
padding: 10px;
width: 200px;
}
.emissionLabel {
width: 75px;
text-align: right;
float: left;
margin-right: 3px;
}
.emissionTextBox {
width: 100px;
}
</style>
<div style="margin: 20px">
<div style="margin-bottom: 20px"><h2>#ViewBag.Title</h2></div>
<div id="dataEntry" style="float: left">
<div class="emissionBottomBorder">
<div class="emissionHeader">Adjust Capital Costs</div><div class="newline"></div>
<div class="emissionLabel"><label class="k-label">Propane:</label></div>
<input id="propaneCapitalCost" type="text" class="k-textbox emissionTextBox" />
<div class="newline"></div>
</div>
</div>
<div id="example" style="width: 600px; height: 400px; float: left">
<div class="k-content">
<div id="chart"></div>
</div>
</div>
</div>
Oddly enough if I change the onchange method to the following the redraw bug doesn't seem to be present:
$(document).on("change", "#propaneCapitalCost", function() {
var chart = $("#chart").data("kendoChart");
//var temp = $("#propaneCapitalCost").val();
chart.options.series[CAPITAL].data = [10000, 25100, 34400]; // Value hard coded
chart.refresh();
});
I'm at a complete loss as to where the difference is. To be fair I am by no means a js expert. Is this some kind of weird closure or something?

I have run into this issue in the past, basically the chart needs a number and .val() of your textbox is giving you a string.
Several ways to correct but using the Number() function is what I would suggest.
var temp = Number($("#propaneCapitalCost").val());
chart.options.series[CAPITAL].data = [temp, 25100, 34400];

Render chart in ExtJS 4 Container/Panel

I have a predefined pie chart like this:
Ext.create('Ext.chart.Chart', {
width : 450,
height : 300,
animate : true,
store : store,
theme : 'Base:gradients',
series : [{
type : 'pie',
field : 'data1',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '18px Arial'
}
}]
});
Then I created a Container/Panel, here I am using Container.
I am looking for a way to put my pre-defined chart into the Container. I saw some examples they actually define the chart in the Container field, but that's not what I want. Is there any way that I can put my pre-specified chart in the items field below so that the chart can be rendered?
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
items: [{
}]
});
Thanks

Yes, it's as simple as:
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {
boderColor: '#000000',
borderStyle: 'solid',
borderWidth: '1px'
},
items: chart
});
Also note there's no use specifying dimensions on the chart since it's being used in a fit layout.