I am trying to reload (via ajax) data into a Gantt chart using php and jquery. I can draw a gantt chart with my data on the initial load without any issues. I have a ajax save call to update chart data in which I would like to redraw the gantt chart after a successful save.
I am able to load part of the data, ie the title data on the left, but not the dates, I believe it is not in the right format? I am using this gantt chart plugin from github: https://github.com/thegrubbsian/jquery.ganttView
Below is a sample of the data they are using? Is this json data?
I am not sure? How do I format my output to mirror and use this data.
var ganttData = [
{
id: 1, name: "Feature 1", series: [
{ name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
{ name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
]
},
{
id: 2, name: "Feature 2", series: [
{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
]
},
My code looks like this:
[{"id":0,"name":"task number 20","series":[{"name":"Bob","start":"new Date(2012,2,19)","end":"new Date(2012,6,11)"}]},{"id":1,"name":"another new posts","series":[{"name":"Bill","start":"new Date(2012,5,22)","end":"new Date(2012,6,27)"}]},here
It's not legal to "call" functions (including constructors) from a json string. JSON isn't anything you can pass to an eval function : http://www.json.org/
You should do the transformation from string to date in your javascript code.
You can send
[{..."start":"Thu Jul 12 2012 16:20:17 GMT+0200 (CEST)"...}]
and in your js code, just after json parsing, iterate over the objects to do
myobj.start = new Date(myobj.start);
Related
I've been trying to import a library called chart.js to the code sandbox on slate, but even after I read the documentation I was quite doubtful about how the import system works inside the code sandbox, I wish someone could explain me in detail how I do the import of the library, how to call it in the LIBRARY LOCATIONS field and also how to call it in the JAVASCRIPT field inside the code sandbox
Step-by-step:
Drag-and-drop the JS file in a project or folder of your choice (not in a dataset !)
Choose Upload as a raw file without modifying the extension (recommended) when prompted
Let it upload
You will see the JS file in the project or folder you uploaded it to, you can then select the line representing your file and this should open a right panel, where you can find the path to this file e.g. /myproject/myfolder/myJSlibrary.js
In Slate, add a Code-Sandbox widget
In the configuration of the code Sandbox widget, find at the bottom the LIBRARY LOCATIONS section (see here)
Past the path you found earlier, in an array, like ["/myproject/myfolder/myJSlibrary.js"]
If you need multiple libraries, you should have something like:
["/myproject/myfolder/myJSlibrary.js", "/myproject/myfolder/myOtherJSlibrary.js"]
For the library usage, it depends of course of which kind of problem you hit. But here is a minimal working example.
Library from here
Below example from official page
HTML
<canvas id="acquisitions"></canvas>
JS
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
Note: You can see errors related to your lib in the Console tab of your browser's devtools panel.
enter image description here
How can I get json response data from a route into js?
Okay, from what I can understand is, you want to fetch some data(JSON) from ajax and show it in your charts.
Well, it's quite easy. You must have a data variable that basically contains labels and dataset list. Just fetch the JSON and put the corresponding data values in their respective place. Then run the window.myChart.update() function. This will update the chart with the new values.
var data = { //The Default data
labels: ['2001','2002','2003','2004','2005'],
datasets: [{label: 'prices', borderWidth: 2, hoverBorderWidth: 2, backgroundColor: "rgba(0,128,128,0.5)", data: [10,30,10,50,20], borderColor: "rgba(0,128,128,1)",}] };
var ctx1 = document.getElementById('canvas3').getContext('2d');
window.myChart = new Chart(ctx1, {
type: 'radar', data: data,
options: {responsive: true, scales:{yAxes:[{ticks:{beginAtZero:true}}],xAxes: [{gridLines: {color: "rgba(0,0,0,0)",}}]}, legend: {position: 'top'}, title: {display: true,text: 'Charts'}}
});
//Now change the data list in the data.datasets[0] to the data of JSON file.
window.myChart.update()
I have a json file in my android local device, im able to read and edit the json file and store json data in it.
But the problem is arising when i want to insert new element in the json file. Im able to change the value of existing variables.
the json file data is:
var data = {items:
{id: "1", name: "Snatch", type: "crime"}
};
i want to add one more element to it so that json file will look like
var data = {items: [
{id: "1", name: "Snatch", type: "crime"},
{id: "7", name: "Douglas Adams", type: "comedy"}
};
i tried with
data.items.push{id: "7", name: "Douglas Adams", type: "comedy"}
but its not working.
im creating android app using phonegap framework with telerik IDE.
Try
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
You are missing ()
Your first file example is missing []
Check out this links to know more about json addition and removal
Link 1 , Link 2
I'm trying to determine the best method for pre-processing JSON for usage in an EXTJS TreeGrid. It's my understanding that EXTJS is expecting JSON to be formatted in the following manner:
{
"text":".",
"children": [
{
Location:'New Jersey',
iconCls:'task-folder',
expanded: true,
children:[
{
Building:'North-west Building',
iconCls:'task-folder',
children: [
{
Computer: '#12345',
Owner: 'Tommy Maintz',
iconCls: 'task',
leaf: true
},
{
Computer: '#98776',
Owner: 'Robert Maintz',
iconCls: 'task',
leaf: true
}
]
}
]
}
]
}
Unfortunately, the data source I am working with outputs flat JSON as such:
{
Computer: '#12345',
Owner: 'Tommy Maintz',
Building:'North-west Building',
Location:'New Jersey'
}
{
Computer: '#98776',
Owner: 'Robert Maintz',
Building:'North-west Building',
Location:'New Jersey'
}
What EXT methods are at my disposal to pre-process my JSON to work with a TreeGrid?
There is no built-in function/method that would do what you want, hence a coding is inevitable. Some advices:
You wouldn't work with the string but you would use var o = Ext.decode(json); to convert the raw json to object o
You can use Ext.each() to iterate through the resulting array or object
I'd write a recursive routine that would construct the resulting nested object
When you have the object with the desired structure you can use tree.setRootNode(result) to populate the tree.
is there a way to retrieve date value from JSON in Google Visualization API?
Here is the snipplet for playground please copy the code below into it
When you run the code you won't have anything in result. you should remove the quotes from the date value I marked with comment in order to retrieve result.
function drawVisualization() {
var JSONObject = {
cols:
[
{id: 'header1', label: 'Header1', type: 'string'},
{id: 'header2', label: 'Header2', type: 'date'}
],
rows:
[
{
c:
[
{v: 'Value1'},
{v: "new Date(2010, 3, 28)"} // <= This is the format I receive from WebService
]
},
{
c:
[
{v: 'Value2'},
{v: new Date(2010, 3, 28)} // <=This is the format Google API accepts
]
}
]
};
var data = new google.visualization.DataTable(JSONObject, 0.5);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {'allowHtml': true});
}
I just ran into this problem myself, so I thought I'd paste the answer from the google api documentation, located here http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html#jsondatatable
"JSON does not support JavaScript Date values (for example, "new Date(2008,1,28,0,31,26)"; the API implementation does. However, the API does now support a custom valid JSON representation of dates as a string in the following format: Date(year, month, day[,hour, minute, second[, millisecond]]) where everything after day is optional, and months are zero-based."
I was running into same problem and above solution did not work. After searching for hours I found following post and the solution in there worked.
https://groups.google.com/forum/#!msg/google-visualization-api/SCDuNjuo7xo/ofAOTVbZg7YJ
Do not include "new" in the json string so it will be just:
v:"Date(2009, 9, 28)"
I suppose that the quote is not at the correct place in your snippet "new Date(2010, 3, 28")
Write instead "new Date(2010, 3, 28)"
Json format does not accept javascript object so the server return a string.
JSON knows only numbers, boolean constants, string, null, vector and 'object' (much more a dictionnary).
I suppose that you have to perform an eval() of the returned string (do not forget to check inputs).
Another alternative is to use a Regex to extract the fields something like /new Date\((\d+),(\d+),(\d+)\)/ will work.