highchart network network-graph - javascript

I am using highchart to create network-graph. i need to change tooltip value. but its not working.
please check my code
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
return data.code;
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
when i mouse over the network grape node, i need to show code value. how i do it.

Try this:
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
const codes = json.reduce((acc, cur)=>{
if(cur.key===this.key||cur.value===this.key) acc.push(cur.code);
return acc;}, []);
return codes.join(',');
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>

Related

Search a word in select2

I have an ajax result as follow:
{
"data": [
{
"id": "AABB",
"text": "AABB"
},
{
"id": "BBCC",
"text": "BBCC"
},
{
"id": "CCDD",
"text": "CCDD"
},
{
"id": "DDEE",
"text": "DDEE"
}
]
}
by that I load it to select2 using ajax below:
$("#timezone").select2({
ajax: {
url: "/User/Timezone",
dataType: 'json',
delay: 250,
type: 'GET',
data: function (params) {
return {
q: params.term, // search term
};
},
processResults: function (data) {
var arr = []
$.each(data, function (index, value) {
arr.push({
id: value.id,
text: value.text
})
})
return {
results: arr
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 3,
minimumResultsForSearch: 20
})
I try to search the word CCD, of course I expect the pointer brings me to the CCDD line, but it keeps staying on the first data, did I miss something?
It seems I can't reproduce it, it should not show results that do not match your input.
$("#timezone").select2({
data: [{
"id": "AABB",
"text": "AABB"
},
{
"id": "BBCC",
"text": "BBCC"
},
{
"id": "CCDD",
"text": "CCDD"
},
{
"id": "DDEE",
"text": "DDEE"
},
{
"id": "AABB1",
"text": "AABB1"
},
{
"id": "BBCC1",
"text": "BBCC1"
},
{
"id": "CCDD1",
"text": "CCDD1"
},
{
"id": "DDEE1",
"text": "DDEE1"
},
{
"id": "AABB2",
"text": "AABB2"
},
{
"id": "BBCC2",
"text": "BBCC2"
},
{
"id": "CCDD2",
"text": "CCDD2"
},
{
"id": "DDEE2",
"text": "DDEE2"
},
{
"id": "AABB3",
"text": "AABB3"
},
{
"id": "BBCC3",
"text": "BBCC3"
},
{
"id": "CCDD3",
"text": "CCDD3"
},
{
"id": "DDEE3",
"text": "DDEE3"
}
],
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 3,
minimumResultsForSearch: 20
})
select {
width: 200px;
}
<select id="timezone"></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>

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

Add id to dynamically created row using bootstrap table in jquery

I am creating Bootstrap table using JSON values. I can add class dynamically to row. But i cant add ID to row when creating dynamically bootstrap table. Please find my code,
HTML:
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>
JS:
$.ajax({
type: "POST",
url: "apilist",
data: "",
success: function (response) {
if (response != null) {
var data = [];
$.each(response.Slip, function (index) {
var obj = {};
obj.SlipID = response.Slip[index].SlipID;
obj.Client = response.Slip[index].Client;
data.push(obj);
});
$('#eventsTable').bootstrapTable({
columns: [
{ field: "state", checkbox: true },
{ field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
{ field: "Client", title: 'Client', sortable: true },
],
data: data,
});
}
}
});
Please let me know the suggestions,
Thanks.
For this you can use rowAttributes for row attributes and rowStyle for row styling.
Here is below CODE SNIPPET you can check.
I hope this will help/guid you or achieve your requirement.
var data = [{
"name": "Bahrain",
"code": "BH"
}, {
"name": "Burundi",
"code": "BI"
}, {
"name": "Benin",
"code": "BJ"
}, {
"name": "Bhutan",
"code": "BT"
}, {
"name": "Jamaica",
"code": "JM"
}, {
"name": "Bouvet Island",
"code": "BV"
}, {
"name": "Botswana",
"code": "BW"
}, {
"name": "Samoa",
"code": "WS"
}, {
"name": "Bonaire, Saint Eustatius and Saba ",
"code": "BQ"
}, {
"name": "Brazil",
"code": "BR"
}];
$('#eventsTable').bootstrapTable({
columns: [{
title: "Conutry Code",
field: 'code',
sortable: true
}, {
title: "Conutry name",
field: 'name',
sortable: true
}],
data: data,
rowStyle: function(row, index) {
return {
classes: `row-border ${index%2==1?'row-even':'row-odd'}`
};
},
rowAttributes: function(row, index) {
return {
id: `x-bootstrap-row-${index+1}`
};
}
});
.row-border{
border-bottom: 1px solid #ccc;
}
.row-odd{
background-color: wheat;
}
.row-even{
background-color: whitesmoke;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

Is it possible in igGrid Infragistics 2012 control insert carriage return and/or line feed?

Is it possible in igGrid Infragistics control insert
carriage return / line feed
inside the text of a cell?
For example given the next datasource:
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 }
];
you can see between the words Adjustable and Race the chars "\r\n", but it doesn't work... I tried:
"\r", "\r\n", "\line", "<br />", "
"
in every test I see on screen the chars and not the new line... maybe there is a setting I don't know...
If you need a complete test example:
<!doctype html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Scripts/jqueryUI/css/humanity/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Scripts/jquery.hotkeys-0.8.js"></script>
<script type="text/javascript" src="./Scripts/jqueryUI/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="./Scripts/jquery.ba-outside-events.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.loader.js"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.js" type="text/javascript"></script>
<script type="text/javascript">
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 },
{ "Id": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "soldi" : 40.10 },
{ "Id": 316, "Name": "Blade", "ProductNumber": "BL-2036", "soldi" : 50.10 },
{ "Id": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "soldi" : 60.10 },
{ "Id": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "soldi" : 70.10 },
{ "Id": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "soldi" : 80.10 },
{ "Id": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "soldi" : 10.10 }
];
$(function () {
$("#gridUpdating").igGrid({
primaryKey: "Id",
renderCheckboxes: true,
columns: [
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", readOnly: false, width: "200"},
{ headerText: "Product ID", key: "Id", dataType: "number", width: "200" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "200" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" , width: "200" },
{ headerText: "soldi", key: "soldi", dataType: "number" , width: "200", format: "##.##,##" }
],
dataSourceType: "json",
dataSource: ds,
headerRendered: function(evt, ui) {
console.log($($('#gridUpdating').igGrid("headersTable")).html());
},
rowsRendered: function(evt, ui) {
$.each(ui.owner.element.find("tr td:nth-child(5)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html((parseFloat($(this).html(),10).toFixed(2)).toString().replace(".",","));
}
});
$.each(ui.owner.element.find("tr td:nth-child(1)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html("<input type='checkbox' name='chk' id='chk_" + rowId + "' />");
}
});
$(ui.owner.element.find("tr td:nth-child(1)")).bind('click', function(){
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
})
},
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "none",
enableDeleteRow: false,
rowDeleting: function (e, args)
{
alert(1);
},
rowDeleted: function (e, args){
alert(2);
},
columnSettings: [
{ columnKey: "MakeFlag", editorOptions: { type: "bool", readOnly: false, disabled: false} },
{ columnKey: "Id", editorOptions: { type: "numeric", readOnly: true, disabled: true} },
{ columnKey: "Name", editorOptions: { type: "bool", readOnly: true, disabled: true} },
{ columnKey: "ProductNumber", editorOptions: { type: "bool", readOnly: true, disabled: true} }
]
}]
});
});
function bind(){
$("#gridUpdating").igGrid("option", "dataSource", ds);
$("#gridUpdating").igGrid("dataBind");
}
</script>
</head>
<body>
<table id="gridUpdating"></table>
<input type="button" value="BIND" onclick="bind();" />
</body>
</html>
I found after a while that my problem was in the proxy service which I use to consume my server code, it html-encoded every special character, for example for "< b r / >" I was receiving "& l t ; b r / & g t ;", so I had only to replace it with "< b r / >" before binding...

Hide legend if value is 0 - Kendo UI Pie Chart

I've have Kendo pie chart and its legend still show even there is no value.
Is it possible to hide legend that no value or value = 0. I'm passing value through the function, so I does not know which value is 0. I've tried to set up data in array but I am stuck. Anybody can help me...
Here is my script:
function createPieChart(a,b,c,d) {
var e = a+b+c+d;
var aa = a/e*100;
var bb = b/e*100;
var cc = c/e*100;
var dd = d/e*100;
var perA = Math.round(aa*100.0)/100.0;
var perB = Math.round(bb*100.0)/100.0;
var perC = Math.round(cc*100.0)/100.0;
var perD = Math.round(dd*100.0)/100.0;
var arrValue = [perA, perB, perC, perD];
var data = [{
"source": "Positive",
"percentage": perA,
"color": "#9de219",
"explode": true
},{
"source": "Neutral",
"percentage": perB,
"color": "#90cc38"
},{
"source": "Negative",
"percentage": perC,
"color": "#068c35"
},{
"source": "Unknown",
"percentage": perD,
"color": "#006634"
}];
$("#chart_div").kendoChart({
dataSource: {
transport: {
read: function(e) {
e.success(data);
}
}
},
title: {
position: "top",
text: "Sentiment Result"
},
legend: {
position: "bottom",
visible: true
},
seriesDefaults: {
labels: {
visible: false,
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
field: "percentage",
categoryField: "source",
colorField: "color",
explodeField: "explode"
}],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
}
Replace this code:
var data = [{
"source": "Positive",
"percentage": perA,
"color": "#9de219",
"explode": true
},{
"source": "Neutral",
"percentage": perB,
"color": "#90cc38"
},{
"source": "Negative",
"percentage": perC,
"color": "#068c35"
},{
"source": "Unknown",
"percentage": perD,
"color": "#006634"
}];
With this code:
var arrValue = [perA, perB, perC, perD];
var arrSource = ["Positive","Neutral","Negative","Unknown"];
var arrColor = ["#9de219","#90cc38","#068c35","#006634"];
var data=[];
for (var i=0; i<arrValue.length; i++){
if(arrValue[i]>0){
data.push({
source: arrSource[i],
percentage: arrValue[i],
color: arrColor[i],
explode: true
});
}
}

Categories