I'm trying to add a chart in a ReactJS page. In the same page I've got the data in a table and I would like that those data were the same of my chart. My chart is like this:
export const myDataSourcePie ={
chart: {
caption: "Title",
subcaption: "Friends' chart",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Friend's email : $label Total messages : $datavalue",
theme: "ocean"
},
data: [
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
]
}
export const chartConfigs = {
type: 'pie3d',
width: 800,
height: 600,
dataFormat: 'json',
dataSource: myDataSourcePie
};
and I import it and then render it with
<ReactFC {...chartConfigs} />
now obviously the data inside my JSON are not the right data. I've got a "friends" object list
friends:[
{"first_name": "name",
"surname": "surname",
"email": "foo#foo.com",
"date_of_birth": "1982-02-20",
"nationality": "Japan",
"messages": 5
},
{...},
{...},
..
]
from which I get the data to put in the table and I would like to get only two label of this object list to put in the chart (email and messages). How could I put this value inside my "myDataSourcePie"? With props?
Thank you
Try this:
getFriendsChart()
{
let dataChart = [];
this.state.friends.forEach( function( friend ) {
dataChart.push(
{
label: friend.email,
value: friend.messages,
}
);
});
let tempConfig = {...chartConfigs};
tempConfig.dataSource.data = dataChart;
return tempConfig;
}
Related
I am using Fusion charts but one of my charts doesn't load. My html is :
<fusioncharts [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
</fusioncharts>
And the data for the chart:
this.dataSource = {
'chart': {
'caption': 'Number of posts',
'startingangle': '120',
'showlabels': '0',
'showlegend': '1',
'enablemultislicing': '0',
'slicingdistance': '15',
'showpercentvalues': '1',
'showpercentintooltip': '0',
'theme': 'ocean'
},
'data': [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};
The particular chart doesn't load. In the console I also got another error TypeError: i.title is undefined. It is in vendor.2d90d48c94b0a738e874.bundle.js. The file is minified and there is no way to unerstand from where it comes. Atleast I can't. Can I ask you for some advice?
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)
I want to group the values in grid panel
Below is the code:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "School Friends", expanded: true, children: [
{ text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"},
{ text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"}
] },
{ text: "Facebook Friend", expanded: true, children: [
{ text: "Steve", leaf: true, name: "Steve", email: "steve#stackoverflow.com", phone: "345-2222"},
{ text: "Lisa", leaf: true, name: "Lisa", email: "lisa#stackoverflow.com", phone: "345-3333"}
] },
]
}});
Ext.create('Ext.tree.Panel', {
title: 'All My Friends',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners : {
itemdblclick : function(tree, record, index){
Ext.getStore('simpsonsStore').loadRawData([record.raw], true);
}
}});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}});
Ext.create('Ext.grid.Panel', {
title: 'Best Friends',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()});
From the above code I am able to get the values from treepanel to grid panel by double clicking.
I want an extra column to group values if we double click the same leaf in the treepanel.
For example if we double click Bart 6 times
Name email phonenumber groupby(number of times)
Bart bart#simpsons.com 555-222-1234 6
It should not append same value in the grid panel.
Could any one please help me.
Regards,
sreekanth
You'll need to add a count field to your store's fields. Then, you'll need to add the field to your grid. When you double-click the tree, you'll need to check the store to see if the record already exists. If it does, change the value in the count field; otherwise, add a new row.
itemdblclick: function (tree, record, index) {
var s = Ext.getStore('simpsonsStore'),
existingRecIdx = s.findBy(function (r) {
return r.get('email') === record.raw['email'];
});
if (existingRecIdx === -1) { //row not found
record.raw.clickCt = 1;
s.loadRawData([record.raw], true);
} else {
var r = s.getAt(existingRecIdx);
r.data.clickCt++;
grid.getView().refresh(); //once the data has changed
//refresh the grid
}
}
See http://jsfiddle.net/Kk7gL/
I have looked over the examples given by the SlickGrid wiki as well as searched over stackoverflow, but I am having trouble finding a solution to my problem. I am trying to display random data about tweets I am receiving from the Twitter API using SlickGrid.
In my script, the grid and dataview seem to initialize after I call beginUpdate(), however, the script seems to crash on endUpdate(). Here is my code:
function TweetGrid(){
this.dataView = new Slick.Data.DataView();
this.grid = this.initGrid();
this.dataView.onRowCountChanged.subscribe(function(e, args){
grid.updateRowCount();
grid.render();
});
this.dataView.onRowsChanged.subscribe(function(e, args){
grid.invalidateRows(args.rows);
grid.render();
});
//dummy value for testing
var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];
this.dataView.beginUpdate();
alert("Begin Update"); //this gets called
this.dataView.setItems(data);
alert("Set items"); //this gets called
this.dataView.endUpdate();
alert("End Update"); //this DOES NOT get called - script does not move on
this.dataView.render();
alert("data rendered");
}
TweetGrid.prototype.initGrid = function(){
var columns = [
{
id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
},
{
id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
},
{
id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
},
{
id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
},
{
id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
}
];
var options = {
enableCellNavigation: true,
forceFitColumns: true,
enableColumnReorder: false
};
return new Slick.Grid("#tweetGrid", this.dataView, columns, options);
}
I reviewed your code one more time and I didn't find errors.
But this code in one function works well.
var dataView = new Slick.Data.DataView();
var columns = [
{
id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
},
{
id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
},
{
id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
},
{
id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
},
{
id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
}
];
var options = {
enableCellNavigation: true,
forceFitColumns: true,
enableColumnReorder: false
};
var grid = new Slick.Grid("#tweetGrid", dataView, columns, options);
var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
grid.render();
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});