Group and Stack data in Kendo UI Chart - javascript

I have a json data like:
arr = [{ Name: 'PAVI', value: 3}, {Name: 'Crystal', value: 2}, {Name: 'PAVI', value: 6}, {Name: 'Crystal', value: 11}]
How to stack data with similar Name in Kendo UI Chart? Here is my code for this moment
$("#chart").kendoChart({
dataSource: {
data: data,
group: {
field: 'Name'
}
},
series: [{
name: "Total Sales",
field: "value",
stack: true
}],
categoryAxis: {
field: 'Name'
},
Actually here is the structure of real data that i use
{
Account:"Piscopo Cash and Carry"
AccountName:"Piscopo Cash and Carry"
Category:""
MainCategory:"Other"
TotalQty:146
TotalSales:9747.616
}
UPDATE
I found the solution by setting group to MainCategory (dont even think that solution is so simple XD )


I'm not sure what you meant by "stack" because with that data structure, I don't see any way how you could stack it. However, if you wanted to sum the values with the same name and show the total, then you can use the aggregate option in the chart.
Here's how to do that: This will sum PAVI's & Crystal's values and show only two columns in the chart.
var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});
Notice the group and aggregate options.
Here's the full code:
var data = [
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 2 },
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 10 }
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});
dataSource.read();
$("#chart").kendoChart({
dataSource: getChartData(dataSource),
series: [{
type: "column",
field: "value",
categoryField: "Name"
}]
});
function getChartData(dataSource) {
var chartData = [];
var view = dataSource.view();
for (var idx = 0; idx < view.length; idx++) {
chartData.push({
Name: view[idx].value,
value: view[idx].aggregates.value.sum
});
}
return chartData;
}
Here's a Fiddle
Hope it helps :) Feel free to ask if you have any doubts.

Related

How to disable the DataTables dropdown option?

I have the following DataTables Editor constructed.
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/data.php",
table: "#example",
fields: [ {
label: "User:",
name: "user"
}, {
label: "User Data:",
name: "selections",
type: "select",
options: [
{ label: "abc", value: "abc" },
{ label: "xyz", value: "xyz" },
{ label: "pqr", value: "pqr" },
{ label: "def", value: "def" },
{ label: "lmn", value: "lmn" }
]
}
]
});
});
Now I want to disable the select options with values 'pqr' and 'lmn'.
It should mean that users are able to see this options but they cannot select it.
I tried using $("select option[selections='pqr']").prop('disabled',true);
But it didn't work for me.
Is there an inbuilt DataTables property through which I can do this? Or any other way?

merge array object with pure JavaScript

I need to merge two arrays with objects inside with JavaScript.
How can this be done?
I am currently using this code, but it is not for me:
var array_merge = [];
var array_one = [
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
];
array_merge.push(array_one);
var array_two = [
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
];
array_merge.push(array_two);
How can I join them so that the result is the following?
var array_merge = [
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
];
Thanks.

You can use the concat method to merge arrays
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
const array_one = [
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
];
const array_two = [
{
label: "label",
value: "value",
},
{
label: "label",
value: "value",
},
];
const array_merge = array_one.concat(array_two);
console.log(array_merge)

Assign array values to an item in object - Javascript/React

I have an object with few items and I want to update the values of one property from array.
Object :
structure = [
{
id: 'name',
label: 'Name',
filterType: 'text',
filterOn: 'contains'
},
{
id: 'address',
label: 'Address',
filterType: 'text',
filterOn: 'contains'
},
{
id: 'phone',
label: 'Phone',
filterType: 'select',
filterOn: 'contains',
options: [{ label: 'abc', value: 'abc' },
{ label: 'xyz', value: 'xyz' },
{ label: 'mno', value: 'mno' }]
}
];
if the id is phone then I want to get the values from the array and assign it to the options instead of hard coding it.
In this object of id phone:
options: [{ label: 'abc', value: 'abc' },
{ label: 'xyz', value: 'xyz' },
{ label: 'mno', value: 'mno' }]
}
];
array is coming from
this.props.phoneList
label and values will be this.props.phoneList[i].name
how to loop over this and get the latest values from the array

This should keep the order of the array intact also:
const newStructure = structure.map(item => {
const isPhone = item.id === “phone”
return {
...item,
options: isPhone ? this.props.phoneList : (item.options || undefined)
}
}

How to make morris donut chart with ajax json?

How to make morris donut chart with ajax json ?
this is my code :
$(function() {
$.ajax({
url : 'dashboard/total-data',
}).done(function(data){
initDonut(JSON.parse(data));
console.log(data);
}).fail(function(){
});
var initDonut = function(data){
return Morris.Donut({
element: 'morris-donut-chart',
data: [ data ],
// data: [
// {label: "BMW", value: 4},
// {label: "Mercy", value: 0},
// {label: "Ferrari", value: 0},
// {label: "Toyota", value: 3},
// {label: "Porsche", value: 0},
// {label: "Limosin", value: 0},
// {label: "Lamborgini", value: 3} ],
resize: true,
colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394'],
});
} });
Ajax code above return data format like this:
{"BMW":4,"Mercy":0,"Ferrari":0,"Toyota":3,"Porsche":0,"Limosin":0,"Lamborgini":3}
my question,
How to make format data above become like this with javascript?
[ {label: "BMW", value: 4},{label: "Mercy", value: 0},{label: "Ferrari", value: 0},{label: "Toyota", value: 3},{label: "Porsche", value: 0},{label: "Limosin", value: 0},{label: "Lamborgini", value: 3} ]
This is code for show json:
public function total_data()
{
$data['BMW'] = $this->m_dashboard->get_total_product_bmw();
$data['Mercy'] = $this->m_dashboard->get_total_product_mercy();
echo json_encode($data);
$data['Ferrari'] = $this->m_dashboard->get_total_product_ferrari();
$data['Toyota'] = $this->m_dashboard->get_total_product_toyota();
$data['Porsche'] = $this->m_dashboard->get_total_product_porsche();
$data['Limosin'] = $this->m_dashboard->get_total_product_limosin();
$data['Lamborgini'] = $this->m_dashboard->get_total_product_lamborgini();
echo json_encode($data);
}

You need to change code of total-data like below:-
public function total_data()
{
$data[0]['label']= 'BMW';
$data[0]['value']= $this->m_dashboard->get_total_product_bmw();
$data[1]['label']= 'Mercy';
$data[1]['value']= $this->m_dashboard->get_total_product_mercy();
$data[2]['label']= 'Ferrari';
$data[2]['value']= $this->m_dashboard->get_total_product_ferrari();
$data[3]['label']= 'Toyota';
$data[3]['value']= $this->m_dashboard->get_total_product_toyota();
$data[4]['label']= 'Porsche';
$data[4]['value']= $this->m_dashboard->get_total_product_porsche();
$data[5]['label']= 'Limosin';
$data[5]['value']= $this->m_dashboard->get_total_product_limosin();
$data[6]['label']= 'Lamborgini';
$data[6]['value']= $this->m_dashboard->get_total_product_lamborgini();
echo json_encode($data);
}
jQuery code need to be:-
$(function() {
$.ajax({
url : 'dashboard/total-data',
}).done(function(data){
Morris.Donut({
element: 'morris-donut-chart',
data: JSON.parse(data),
resize: true,
colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394']
});
}).fail(function(){
});
});
Working at my end:- http://prntscr.com/f6399z

It seems like the question is mostly, how do I get from
{key: foo, key2:bar}
to
[{label: key, value:foo},{label: key2, value:bar}]
I'm a huge fan of libraries like lodash and ramda. If you had Ramda available I would recommend something like:
var input = {
"BMW": 4,
"Mercy": 0,
"Ferrari": 0,
"Toyota": 3,
"Porsche": 0,
"Limosin": 0,
"Lamborgini": 3
}
var expected = [{
label: "BMW",
value: 4
}, {
label: "Mercy",
value: 0
}, {
label: "Ferrari",
value: 0
}, {
label: "Toyota",
value: 3
}, {
label: "Porsche",
value: 0
}, {
label: "Limosin",
value: 0
}, {
label: "Lamborgini",
value: 3
}]
// First thing we want is to group the key and value together
var pairs = R.toPairs(input);
// This gives us something like
// [["BMW",4],["Mercy",0],...]
// This is getting a little far to explain here but Ramda
// curries all it's functions so we can pass the labels
// here and then the pairs later.
var label = R.zipObj(["label", "value"]);
// Here we map the label function over each set of pairs
var output = pairs.map(label);
tape('Same?', t => {
t.deepEqual(expected, output);
t.end();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
<script src="https://wzrd.in/standalone/tape#latest"></script>
Otherwise, you could do something in a for loop.
var input = {
"BMW": 4,
"Mercy": 0,
"Ferrari": 0,
"Toyota": 3,
"Porsche": 0,
"Limosin": 0,
"Lamborgini": 3
}
var expected = [{
label: "BMW",
value: 4
}, {
label: "Mercy",
value: 0
}, {
label: "Ferrari",
value: 0
}, {
label: "Toyota",
value: 3
}, {
label: "Porsche",
value: 0
}, {
label: "Limosin",
value: 0
}, {
label: "Lamborgini",
value: 3
}]
var output = [];
for (var k in input) {
output.push({"label": k, "value": input[k]});
}
tape('Same?', t => {
t.deepEqual(expected, output);
t.end();
});
<script src="https://wzrd.in/standalone/tape#latest"></script>

java script filling up an array so it matches following structure

lets say i want to start with empty value of variable data, how can to achieve this result with javascript using push method:
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
i have tried:
data.push("label: nodel", "children:"+ ['child1', 'child2']);
looking at code above i need to insert one element that will be linked with list of childs. Can someone help me achieve this.. i would be very grateful.
Best regards.

Is this what you mean?
var object1 = {
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
};
var data = new Array();
data.push(object1);
OR
data.push({ label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] });
EDITED TO SHOW YOSHIS VERSION ASWELL

Categories

Resources