I'm wonder is it possible to proper setting each xaxis in dojox.charting.DataChart
here is my data.JSON for example:
{
"label": "btmlabel",
"items": [
{ "mydata":"ANDT", "btmlabel":[{value: 1, text: "22 April 10.34AM"},{value: 2, text: "22 April 10.40AM"}], "data":[{"x":1,"y":1},{"x":2,"y":3}] }
]
}
and trying to draw xaxis which failed(show empty in xaxis) with below code:
var chartPrefs = {
chartPlot: {type:dojox.charting.plot2d.Markers, tension:"S"},
scroll:true,
xaxis:{labelFunc:"seriesLabels"},
}
chart = new dojox.charting.DataChart("chartNode", chartPrefs);
chart.setStore(store, {mydata:"*"}, "data");
});
It looks like your json object structure is invalid for charting. It would be better use the following structure:
var storeData = {
"label": "btmlabel",
"items":
[
{
"btmlabel": "22 April 10.34AM",
"data": 1
},
{
"btmlabel": "22 April 10.40AM",
"data": 3
}
]
}
and creating chart:
dojo.addOnLoad(function () {
var storeForChart = new dojo.data.ItemFileWriteStore({ data: storeData });
var chartPrefs = {
chartPlot: { type: dojox.charting.plot2d.Markers, tension: "S" },
comparative: true,
xaxis: { labelFunc: "seriesLabels" }
}
chart = new dojox.charting.DataChart("chartNode", chartPrefs);
chart.setStore(storeForChart, { data: "*" }, "data");
});
View source of this page - here working example.
Read good article about chart building - introducing-dojox-datachart
EDIT:
Also look this page. I think it will be very helpful for you.
Related
I want to push my data in array but it shows me string in react native.
My code is like that:
const dataSource = responseJson.old_cases.reduce(function (sections, item) {
let section = sections.find(section => section.gender === item.gender);
if (!section) {
section = { gender: item.gender,data:[] };
sections.push(section);
}
section.data.push(item.name)
return sections;
}, []);
this.setState({dataSource: dataSource // Pass the dataSource that we've processed above});
Output of my code is
[
{"gender": "Male", "data": ["name_1", "name_2"]},
{"gender": "Female", "data": ["name_3", "name_4",'name_5']},
]
as you see names are string I need that kind of output
[
{"gender": "Male", "data": [{"name_1"}, {"name_2"}]},
{"gender": "Female", "data": [{"name_3"}, {"name_4"},{'name_5'}]},
]
We cannot apply string values inside the objects.
like.
[
{"gender": "Male", "data": [{"name_1"}, {"name_2"}]},
{"gender": "Female", "data": [{"name_3"}, {"name_4"},{'name_5'}]},
]
We have to apply key-value pairs like below:
section.data.push({ [item.name]: item.name })
Copy this and replace for your code, I think it's what you need. But I'm not sure.
const dataSource = responseJson.old_cases.reduce(function (sections, item) {
let section = sections.find(section => section.gender === item.gender);
if (!section) {
section = { gender: item.gender,data:[] };
sections.push(section);
}
section.data.push({[item.name]: item.name})
return sections;
}, []);
this.setState({dataSource: dataSource // Pass the dataSource that we've processed above});
First I create a website by vue and I pass parameter to my google appscript
vue function
var appurl = "my google appscript url"
this.$http.get(appurl, {
params: {
settingLink: this.settingLink,
albumLink: this.albumLink,
stepControl: this.stepControl,
nav: this.navSetting,
}
}).then(response => {
console.log(response);
})
and I send parameter to google appscript
my google appscript
function doGet(e) {
var params = e.parameter;
var settingLink = params.settingLink;
var albumLink = params.albumLink;
var stepControl = params.stepControl;
var nav = params.nav;
var SpreadSheet = SpreadsheetApp.openByUrl(settingLink);
var SheetName = SpreadSheet.getSheetByName("gameSetting");
SheetName.getRange("D2").setValue(stepControl);
SheetName.getRange("E2").setValue(albumLink);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);
}
The parameter albumLink and stepControl are string so I success push it to my spreadsheet (figure 1)
but nav is an array object like (in vue data)
nav=[
{style:"red",content:"test"},
{style:"blue",content:"test"},
{style:"green",content:"test"},
]
How could I let spreadsheet F2 as "red", G2 as "blue", and H2 as "green"
figure 1
enter image description here
By checking the output of JSON.stringify(e), it seems that each property of objects become different parameters and are received as something like the following:
{
"queryString": "settingLink=settingLinkTest&albumLink=albumLinkTest&stepControl=stepControlTest&nav%5B0%5D%5Bstyle%5D=red&nav%5B0%5D%5Bcontent%5D=test&nav%5B1%5D%5Bstyle%5D=blue&nav%5B1%5D%5Bcontent%5D=test&nav%5B2%5D%5Bstyle%5D=green&nav%5B2%5D%5Bcontent%5D=test",
"contextPath": "",
"parameters": {
"nav[1][style]": [
"blue"
],
"nav[1][content]": [
"test"
],
"albumLink": [
"albumLinkTest"
],
"nav[2][style]": [
"green"
],
"settingLink": [
"settingLinkTest"
],
"nav[2][content]": [
"test"
],
"nav[0][style]": [
"red"
],
"stepControl": [
"stepControlTest"
],
"nav[0][content]": [
"test"
]
},
"contentLength": -1,
"parameter": {
"nav[2][content]": "test",
"nav[1][content]": "test",
"albumLink": "albumLinkTest",
"settingLink": "settingLinkTest",
"nav[0][style]": "red",
"stepControl": "stepControlTest",
"nav[0][content]": "test",
"nav[1][style]": "blue",
"nav[2][style]": "green"
}
}
Since the index of a particular nav and its properties become names of parameters, you can get their values by changing your doGet() to:
SheetName.getRange("F2").setValue(params["nav[0][style]"]);
SheetName.getRange("G2").setValue(params["nav[1][style]"]);
SheetName.getRange("H2").setValue(params["nav[2][style]"]);
Alternatively, as suggested in the comments of the question, you can stringify the nav object when sending it:
this.$http.get(appurl, {
params: {
settingLink: settingLink,
albumLink: albumLink,
stepControl: stepControl,
nav: JSON.stringify(nav)
}
}).then(response => {
console.log(response);
})
And then parsing when you receive it to use as you intended:
var nav = JSON.parse(params.nav);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);
I'm using AmCharts4 with Vue.JS,
For the moment I've added default chart design when page loads, But when I trying to add dynamic values after page loads (Using Button click), It doesn't reflect on view.
Code:- gist
data: () => ({
dataForChart: {
data: [{
"name": "Anne",
"steps": 32
}, {
"name": "Rose",
"steps": 30
}, {
"name": "Jane",
"steps": 25
}]
}
}),
chart creation on mounted()
let chart = am4core.create("chart-div", am4charts.XYChart);
chart.data = this.dataForChart.data
when dynamically change values using button click those data doesnt reflect on chart.
method followed to change data set.
this.dataForChart.data = {
data: [{
"name": "Anne",
"steps": 54
}, {
"name": "Rose",
"steps": 44
}, {
"name": "Jane",
"steps": 33
}]
}
The reason for this is that although this.dataForChart.data is reactive (it's a vue instance property) the chart.data (amcharts chart property) is not.
You have to manually set chart.data array values whenever your this.dataForChart.data property changes. I've done this by setting a watcher on this.dataForChart.data like so:
watch: {
dataForChart: {
data(values) {
this.chart.data = values;
},
deep: true
}
}
Cheers!
When using datatables, I get 'no data available in table' when using an object instead of array:
var data1 =
{
"status": "success",
"districts": {
"1": {
"district_number": "1",
"district_name": "district one"
},
"2": {
"district_number": "2",
"district_name": "district two"
}
},
"time": "1.109s"
};
var table1 = jQuery("#data_table1").DataTable({
"data": data1.districts,
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
I can get an array to display in a datatable using mData as follows:
var data2 =
{
"status": "success",
"districts": [
{
"district_number": "1",
"district_name": "district one"
},
{
"district_number": "2",
"district_name": "district two"
}
],
"time": "1.109s"
};
var table2 = jQuery("#data_table2").DataTable({
"data": data2.districts,
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
https://jsfiddle.net/w93gubLv/
Is there a way to get datatables to utilize the object in the original format, or must I convert the object to an array?
You can write your own function to convert one format to another, for example:
function formatData(data){
var result = [];
for(prop in data){
if(data.hasOwnProperty(prop)){
result.push( data[prop] );
}
}
return result;
}
You can then later use it to pass data to jQuery DataTables as shown below.
var table1 = jQuery("#data_table1").DataTable({
"data": formatData(data1.districts),
"aoColumns": [
{ "mData": "district_number" },
{ "mData": "district_name" }
]
});
See updated jsFiddle for code and demonstration.
I have a dataTables table at http://communitychessclub.com/test.php
My problem is I need to make an entire table row clickable to a link based on a game#. The table lists games and user should click on a row and the actual game loads.
I am unable to understand the previous solutions to this problem. Can somebody please explain this in simple terms?
I previously did this at http://communitychessclub.com/games.php (but that version is too verbose and does disk writes with php echo)
with
echo "<tr onclick=\"location.href='basic.php?game=$game'\" >";
<script>$(document).ready(function() {
$('#cccr').dataTable( {
"ajax": "cccr.json",
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
}
],
"columns": [
{ "data": "game" },
{ "data": "date" },
{ "data": "event" },
{ "data": "eco" },
{ "data": "white_rating" },
{ "data": "white" },
{ "data": "black_rating" },
{ "data": "black" }
]
} );
} );</script>
"cccr.json" looks like this and is fine:
{
"data": [
{
"game": "5086",
"date": "09/02/2013",
"event": "135th NYS Ch.",
"eco": "B08",
"white": "Jones, Robert",
"white_rating": "2393",
"black": "Spade, Sam",
"black_rating": "2268"
},
...
You can do it this way:
Use fnRowCallback to add a game-id data-attribute to your datatable rows
...
{ "data": "black" }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//var id = aData[0];
var id = aData.game;
$(nRow).attr("data-game-id", id);
return nRow;
}
This will give each row in your table a game id attribute e.g:
<tr class="odd" data-game-id="5086">
Then create a javascript listener for the click event and redirect to the game page passing the game id taken from the tr data-attribute:
$('#cccr tbody').on('click', 'tr', function () {
var id = $(this).data("game-id");
window.location = 'basic.php?game=' + id;
}