We Keep Coding

CanvasJs Doughnut Chart loading issue on page reload. But works fine in page redirection

I'm implementing a doughnut chart with CanvasJs in a ReactJs App.
Collected following code from CanvasJs's github repo
var React = require("react");
var CanvasJS = require("./canvasjs.min");
CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS;
class CanvasJSChart extends React.Component {
static _cjsContainerId = 0;
constructor(props) {
super(props);
this.options = props.options ? props.options : {};
this.containerProps = props.containerProps
? props.containerProps
: { width: "100%", position: "relative" };
this.containerProps.height =
props.containerProps && props.containerProps.height
? props.containerProps.height
: this.options.height
? this.options.height + "px"
: "400px";
this.chartContainerId =
"canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
}
async componentDidMount() {
//Create Chart and Render
this.chart = await new CanvasJS.Chart(this.chartContainerId, this.options);
this.chart.render();
console.log("CHart", this.chart);
if (this.props.onRef) this.props.onRef(this.chart);
}
shouldComponentUpdate(prevProps) {
// //Check if Chart-options has changed and determine if component has to be updated
// return !(nextProps.options === this.options);
if (prevProps.options !== this.props.options) {
return false;
}
else {
return true;
}
}
componentWillUnmount() {
//Destroy chart and remove reference
this.chart.destroy();
if (this.props.onRef) this.props.onRef(undefined);
}
render() {
return <div id={this.chartContainerId} style={this.containerProps} />;
}
}
var CanvasJSReact = {
CanvasJSChart: CanvasJSChart,
CanvasJS: CanvasJS,
};
export default CanvasJSReact;
I'm passing options to the component in the following manner
const options = {
animationEnabled: true,
subtitles: [
{
text: "",
verticalAlign: "center",
fontSize: 24,
dockInsidePlotArea: true,
},
],
data: [
{
type: "doughnut",
indexLabel: "{name}: {percentage}",
yValueFormatString: "'$'#,###",
dataPoints: [{ name: "Unsatisfied", y: 5 },
{ name: "Very Unsatisfied", y: 31 },
{ name: "Very Satisfied", y: 40 },
{ name: "Satisfied", y: 17 },
{ name: "Neutral", y: 7 }],
},
],
};
USE THIS UPPER COMPONENT
<CanvasJSChart options={options} />
When I'm passing dataPoints (with static data) in my code, the chart loads fine.
But the issue occurs when I try to use dynamic data. My dynamic data has only one dataPoint this point of time
// Array of data points
[{
name: "FNBO Evergreen® Rewards Visa® Card",
percentage:"100%",
y: 20000
}]
On Page reload the chart is not rendering. But, it appears back if routed from another page or window size is changed.
The issue can be easily seen the following loom video
https://www.loom.com/share/754b51dae7b04cb29a87a969a961fefc
Note: In all the cases shown in video, we do receive data from backend. But this issue occurs in some of the cases

t[this.activeSeriesIndex].data[0] is undefined in ApexCharts. How to correctly build the series array?

I'm a beginner in Vue and I'm using vue-apex chart to create a chart in my application. I want to display in chart, the values of the two component's properties "uncorrectAns" and "correctAns" that I compute thanks to a specific method (computeStat()).
<template>
<apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>
</template>
<script>
export default {
name: 'Results',
components: {
apexcharts: VueApexCharts
},
data() {
return {
results: '',
correctAns: 0,
uncorrectAns: 0,
chartOptions: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: ['Correct Answers', 'Uncorrect Answers']
}
},
series: [
{
name: 'series-1',
data: [this.correctAns, this.uncorrectAns]
}
]
}
},
methods: {
computeStat() {
var i
for (i = 0; i < this.results.length; i = i + 1) {
if (this.results[i].answerCorrect == true) {
this.correctAns = this.correctAns + 1
} else {
this.uncorrectAns = this.uncorrectAns + 1
}
}
}
},
created() {
this.results = this.$route.params.output
this.computeStat()
var i
for (i = 0; i < this.results.length; i = i + 1) {
console.log('bestPractice ' + i + ':' + this.results[i].bestPract)
}
}
}
</script>
When I run the application, the chart isn't displayed and I get this error message on the browser console:
I would like to know the nature of this error and if there is a correct way to display "correctAns" and "uncorrectAns" values in the chart.

There's a couple of problems here around your series property...
When you define series, both this.correctAns and this.uncorrectAns are undefined (this is the source of your problem)
Because series is statically defined, it will never update as you make changes to this.correctAns and this.uncorrectAns
The solution is to convert series into a computed property. Remove it from data and add
computed: {
series () {
return [
{
name: 'series-1',
data: [this.correctAns, this.uncorrectAns]
}
]
}
}
Demo ~ https://jsfiddle.net/ynLfabdz/
Given you seem to be treating results as an array, you should initialise it as such instead of an empty string, ie
results: [], // not ''

I fixed the issue by simple check if the array is undefined then return empty if not return the chart with my values
const Amount = [
{
name: 'Salary Amount',
data: salary[0] === undefined ? [] : salary
},
{
name: 'Over Time Amount',
data: overTime[0] === undefined ? [] : overTime
},
true
]

Kendo Grid - Dynamic Column and Custom Template

I have a problem with kendo Grid and Custom template. The problem is, I need to check the value of the column
if Value == 1, I need to change it to Icon Check
If Value == 0, I need to change it to Icon Delete
If Value == -1. I need to return empty html
This is the Example Code : Fiddle
var myFields = {
no: { },
section: { },
service: { }
};
for(var x = 0 ; x < dataList.length; x++){
myFields["data"+x] = { };
}
var no = 0;
var myColumns = [
{ title: "No", locked: true, width: 50, template: function(e){return ++no; } },
{ field: "section", title: "Hole Section", locked: true, width: 130 },
{ field: "service", title: "Services", locked: true, width: 200 }
/* other columns ... */
];
for(var x = 0 ; x < dataList.length; x++){
myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false});
}

Here is a Working Demo
Solution: You can change your data fed into the grid by replacing the numbers with a icon. I prefer using FontAwesome Icons as it is very light weight.
CDN for font awesome.
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
Code change to make changes into your data is as below.
tableData[tableData.length - 1]["data"+c] = formatCellData(dataOffset[c].selected);
// replace you code with function call.
the function definition is as below.
function formatCellData(value){
switch(value){
case 1: return "<i class='fa fa-check''></i>";break;
case 0: return "<i class='fa fa-trash''></i>";break;
case -1: return "";break;
default: return "";
}
}
Now this will make sure you get the HTML part instead of the numbers,
Now we need to make sure the HTML string is read as a regular HTML and icons are displayed and not the HTML string as is, So add this encoded: false attribute into your column data.
for(var x = 0 ; x < dataList.length; x++){
myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false,encoded: false});
}
Hope this helps.

Getting id or name of folder in fuelux tree

I'm trying to get the id or name of the selected folder in a fuelux tree but couldnt manage to get it done.
My tree is a classic folder/file type tree and I want to be able to see the id of the folder when I click on a file.
this is my datasource for tree
var treeDataSource = new DataSourceTree({
data: [
{ name: 'Elektronik Belgelerim', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F1' } },
{ name: 'Gelen Kutusu', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F2' } },
{ name: 'Giden Kutusu', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F3' } },
{ name: 'Çöp Kutusu', type: 'folder','icon-class':'green', additionalParameters: { id: 'I1' } },
//{ name: 'Çöp Kutusu', type: 'item', 'icon-class': 'success', additionalParameters: { id: 'F4' } },
//{ name: 'Reports', type: 'item', additionalParameters: { id: 'I1' } },
//{ name: 'Finance', type: 'item', additionalParameters: { id: 'I2' } }
],
delay: 400
});
js function for tree begins like this inside tree-custom.js
var e = function (e, i) {
this.$element = t(e), this.options = t.extend({}, t.fn.tree.defaults, i), this.$element.on("click", ".tree-item", t.proxy(function (t) {
this.selectItem(t.currentTarget)
}, this)), this.$element.on("click", ".tree-folder-header", t.proxy(function (t) {
this.selectFolder(t.currentTarget)
}, this)), this.render()
};
and this is where I add the links under folders again inside trree-custom.js. Very primitive I know but that's all I can do with my current skillset. The part I added is between quotes. Rest came with beyondadmin theme and looks like usual fuelux.
selectFolder: function (e) {
//alert("testselectFolder");
//
//alert($('#myTree').tree({ dataSource: dataSource }));
var i, n, r, o = t(e),
s = o.parent(),
a = s.find(".tree-folder-content"),
l = a.eq(0);
//-----------------------------------------------
var li = $('<li>');
var TcgbLink = $('<a href=/E-Belge/Main/Folder/Inbox/?Type=1&DocumentTypeId=3>e-TCGB</div>' +"</br>");
var FaturaLink = $('<a href=/E-Belge/Main/Folder/Inbox/?Type=1&DocumentTypeId=4>e-Fatura</div>' + "</br>");
var Dolasim = $('<a href=>e-Dolasim Belgesi</div>');
li.append(FaturaLink);
a.append(li);
li.append(TcgbLink);
a.append(li);
li.append(Dolasim);
a.append(li);
//-----------------------------------------------
o.find(".fa.fa-folder").length ? (i = "opened", n = ".fa.fa-folder", r = "fa fa-folder-open", l.show(), a.children().length || this.populate(o)) : (i = "closed", n = ".fa.fa-folder-open", r = "fa fa-folder", l.hide(), this.options.cacheItems || l.empty()), s.find(n).eq(0).removeClass("fa fa-folder fa-folder-open").addClass(r), this.$element.trigger(i, o.data())
},
Now these links are being generated under all 4 folders. I want to be able to get the id (or name, preferably Id) of the folder so I can assign new Type parameters to querystring.
So far I tried to reach the id with this.data.id to no avail.

Instead of injecting the folder's children in the selectFolder callback, it is recommended to add the children via the dataSource callback (as in this example code: http://getfuelux.com/javascript.html#tree-usage-javascript).
The first argument to the dataSource is the "parent data" when you click on a tree node (with the second argument being the callback that you send the new array of child data).
This way you can use the selected event for getting your ID, because it gets the jQuery data passed to it.

Unable to set CSS properties for rows in Slickgrid

I'm trying to set a CSS class to rows in Slickgrid.
I've looked up here and here, and created a test code according with this Slickgrid example. Here it is:
var cols = [{ id: "id", name: "Report name", field: "Description", width: 600, sortable: true}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
syncColumnCellResize: true,
showHeaderRow: true,
headerRowHeight: 30
};
$(function () {
var data = [];
for (var i = 0; i < 10; i++) {
data[i] = {
Description: "Task " + i
};
}
data.getItemMetadata = function (index) {
if (index == 0) {
return { "cssClasses": "test" };
}
};
grid = new Slick.Grid("#listV", data, cols, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
});
The 'test' CSS class only colors the background of the row with red.
What happens is that when I load the page, I can see the first row flash with red for a second, but as soon as the page is loaded the background color is back to what it is for other rows.
What can be the issue here?
Thanks a lot!