I can't understand because my chart is not working properly. Anything is displayed.
Below my simple code:
<div id="chartc3"></div>
<script>
var scene;
$.getJSON('assets/json/chartc3.json', function(data)
{
scene=data;
var chart = c3.generate({
bindto: '#chartc3',
data:
{
json: scene,
keys:
{
value: ['round','val'],
}
}
});
});
</script>
and the following json file:
[
{
round:'1', val:1000
},
{
round:'2', val:1000
},
round:'3', val:1000
},
{
round:'4', val:1000
},
{
round:'5', val:1000
},
{
round:'6', val:1000
},
]
Do you have any idea ? I don't have any error messages in my console.
JSFIDDLE: here
Your JSON seems to be invalid.
The 3rd element is missing an open parentheses.
Include double quotes around the property names
Change your single quotes to double quotes
The following JSON works
[
{
"round":"1", "val":1000
},
{
"round":"2", "val":1000
},
{
"round":"3", "val":1000
},
{
"round":"4", "val":1000
},
{
"round":"5", "val":1000
},
{
"round":"6", "val":1000
}
]
Related
I have this J Query code:
$(document).ready(function(){
var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
console.log(result.passwords);
}
})
}
);
JSON file looks like this:
{
"passwords":[
{
"value":"tom",
"count":"432517"
},
{
"value":"anaconda",
"count":"454658"
},
{
"value":"111111",
"count":"148079"
},
What I need to do, is to print out each of these objects to be printed out in an ordered list (for instance it should look like this:
tom 432517
anaconda 454658
111111 148079
So far, nothing I have tried works. Althoug, I can console.log the entire object. Any suggestions?
Example rendering:
var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
result.passwords.forEach(pwd => $outData.append(`<div>${pwd.value} ${pwd.count}</div>`));
}
})
}
);
you can create elements and append to dom when you are done,
const data = {
"passwords": [{
"value": "tom",
"count": "432517"
},
{
"value": "anaconda",
"count": "454658"
},
{
"value": "111111",
"count": "148079"
}
]
}
const ol = document.createElement("ol");
for (const {
value,
count
} of data.passwords) {
const li = document.createElement("li")
li.innerText = `${value} -> ${count}`
ol.appendChild(li)
}
document.querySelector("#root").appendChild(ol)
<div id="root"></div>
I need to show data from a json response from get request. Vue part of my code is :
<script type="text/javascript">
var vm = new Vue({
el: '#app2',
delimiters: ['[[',']]'],
data: {
masa_data: {},
},
mounted: function() {
polling1=setInterval(function() {
axios.get('/order')
.then(function(response) {
vm.$data.masa_data = response.data;
})
}, 1000);
},
beforeDestroy () {
clearInterval(this.polling1)
}
});
</script>
masa_data comes from axios as below:
{ "Bahçe1": { "A": { "1": { "kisi_sayisi": "2", "siparisler": [ {
"adet": 2, "bolum": "drink", "satir": "Açık Çay" }, { "adet": 1,
"bolum": "tatli", "satir": "Kaymaklı Ekmek Kadayıfı" } ] },
When i want to show, for example, value of "kisi_sayisi", I could not figure out what to put inside html code below:
<p class="card-text">[[masa_data]]</p>
Try this.
<p class="card-text" v-if="Object.values(masa_data).length>0">[[masa_data.Bahce1.A['1']['kisi_sayisi'] ]]</p>
https://codepen.io/Pratik__007/pen/QWbjOxE?editors=1010
I have a php-script, which returns the following JSON
[
{
"Code":0,
"Message":"No problem"
},
{
"name":"o016561",
"status":1,
"locks":[
{
"ztn":"155320",
"dtn":"20131111",
"idn":"78"
},
{
"ztn":"155320",
"dtn":"20131111",
"idn":"91"
}
]
},
{
"name":"o011111",
"status":1,
"locks":[
{
"ztn":"155320",
"dtn":"20131111",
"idn":"91"
}
]
},
{
"name":"o019999",
"status":0,
"locks":[
]
},
{
"name":"o020000",
"status":0,
"locks":[
]
},
{
"name":"o020001",
"status":0,
"locks":[
]
}
]
Edit:
The grid should look something like this:
I've been able to load name and status into my grid - so far so good. But the more important part is, that I need the nested data in the locks-array being loaded into my grid, but I just can't get my code working. Any help would be appreciated.
I'm using ExtJS 4.2 if that matters.
Edit 2:
I tried
Ext.define("Locks", {
extend: 'Ext.data.Model',
fields: [
'ztn',
'dtn',
'idn'
]
});
Ext.define("ConnectionModel", {
extend: 'Ext.data.Model',
fields: ['name', 'status'],
hasMany: [{
model: 'Locks',
name: 'locks'
}]
});
var store = Ext.create('Ext.data.Store', {
model: "ConnectionModel",
autoLoad: true,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'name'
}
}
});
but it seemed to be wrong in multiple ways...
and it would be awesome if ztn and dtn could be displayed just seperated with a whitespace in the same column
You can add a renderer to the column. In that renderer you can do anything with the record...
Here's a working fiddle:
http://jsfiddle.net/Vandeplas/MWeGa/3/
Ext.create('Ext.grid.Panel', {
title: 'test',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Status',
dataIndex: 'status'
}, {
text: 'idn',
renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
values = [];
record.locks().each(function(lock){
values.push(lock.get('idn'));
});
return values.join('<br\>');
}
}, {
text: 'ztn + dtn',
renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
values = [];
record.locks().each(function(lock){
values.push(lock.get('ztn') + ' ' + lock.get('dtn'));
});
return values.join('<br\>');
}
}],
height: 200,
width: 600,
renderTo: Ext.getBody()
});
Note
If you have control over your backend you better change the form of your data more like this:
{
"code": 0,
"message": "No problem",
"success": true,
"data": [
{
"name": "o016561",
"status": 1,
"locks": [
{
"ztn": "155320",
"dtn": "20131111",
"idn": "78"
},
{
"ztn": "155320",
"dtn": "20131111",
"idn": "91"
}
]
},
{
"name": "o011111",
"status": 1,
"locks": [
{
"ztn": "155320",
"dtn": "20131111",
"idn": "91"
}
]
}
]
}
That way you don't mix your control data (success, message, code,...) with your data and the proxy picks it up correctly (it can be a cause of the problems your experiencing). I added a success boolean => Ext picks it up and goes to the failure handler. It helps a lot with your exception handling.
Here is the proxy for it:
proxy: {
type: 'ajax',
api: {
read: ___URL____
},
reader: {
type: 'json',
root: 'data',
messageProperty: 'message'
}
}
i read many suggestions concerning jsTree/Json/metadat, but I don't found a working solution. I want to get the metadata (e.g. id) if a node is clicked.
1st my Json Data:
[
{
"data":{
"title":"TEST",
"icon":"/i/small_folder.gif",
"attr":{
"id":"1000000000000000021"
},
"metadata":{
"id":"1000000000000000021"
}
}
}
]
2nd JS function which create the tree and should get the clicked id(ajax call and some oracle apex stuff)
function populateTree(pRegionId) {
console.log('---Js Tree---');
$.ajax({
type : 'POST',
async : true,
url : 'wwv_flow.show',
data : {
"p_request" : 'APPLICATION_PROCESS=GET_TREE',
"p_flow_id" : $v('pFlowId'), // app id
"p_flow_step_id" : $v('pFlowStepId'), // page id
"p_instance" : $v('pInstance'), // session id
},
ggg : pRegionId,
success : function (data) {
console.log(data);
var jsonobj = JSON.parse(data);
apex.jQuery("#" + this.ggg).jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : true
},
"json_data" : {
"data" : [jsonobj]
},
"plugins" : ["themes","json_data", "ui"]
//}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("jstree").id); });
}).bind("select_node.jstree", function (e, data) {
console.log(data);
});
}
});
}
3rd the object where the id should be (firebug domview):
args [a#1000000000000000301.jstree-clicked #, true, Object { originalEvent=Event click, type= "click", timeStamp=30977664, mehr...}]
inst Object { data={...}, get_settings=function(), _get_settings=function(), mehr...}
rlbk false
rslt Object { obj={...}, e={...}}
e Object { originalEvent=Event click, type="click", timeStamp=30977664, mehr...}
obj jQuery(li.jstree-closed)
as you can see there is no id. So I guess something with the metadata part is messy but i cannt figure out where the mistake is.
Thanks in advance
Mario
Finally I tracked my mistake down. If you can see in the json code from above:
[
{
"data":{
"title":"TEST",
"icon":"/i/small_folder.gif",
"attr":{
"id":"1000000000000000021"
},
"metadata":{
"id":"1000000000000000021"
}
}
}
]
The metadataobject(?) is within the dataobject like the attr, all online validations show me that my jason code is valid. But the metadatas right place is after the data:
[
{
"data":{
"title":"TEST",
"icon":"/i/small_folder.gif",
"attr":{
"id":"1000000000000000021"
}
},
"metadata":{
"id":"1000000000000000021"
}
}
]
And now I get the id with the following js
.bind("select_node.jstree", function (e, data) {
console.log(data.rslt.obj.data("id"));
});
And if you want an id within the li tag put an attr-object bevor the data-object like:
[
{
"attr":{
"id":"1000000000000000021"
},
"data":{
"title":"TEST",
"icon":"/i/small_folder.gif",
"attr":{
"id":"1000000000000000021"
}
},
"metadata":{
"id":"1000000000000000021"
}
}
]
cu soon
mario
I am currently using the following JSON to generate a chart using Google Chart API:
{
"cols":[
{
"id":"DateOfBirth",
"label":"Date of Birth",
"type":"string"
},
{
"id":"Number",
"label":"Number",
"type":"number"
},
{
"id":"Gender",
"label":"Gender",
"type":"string"
}
],
"rows":[
{
"c":[
{
"v":"F"
},
{
"v":"2012-08-07"
},
{
"v":"1"
}
]
},
{
"c":[
{
"v":"M"
},
{
"v":"1988-07-28"
},
{
"v":"1"
}
]
},
{
"c":[
{
"v":"F"
},
{
"v":"1990-05-05"
},
{
"v":"1"
}
]
}
]
}
However, the chart does not show (it only shows up as a white canvas with the caption). I cannot figure out what is the issue with my JSON. I have also included the code used to render the chart:
// where json is the string literal
function drawChart(json) {
// Create the data table.
var data = new google.visualization.DataTable(json);
// Set chart options
var options = {'title':'Students',
'width':400,
'height':300,
'view': {'columns': [0,2]}};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart($('#chart_div')[0]);
chart.draw(data, options);
}
...and I piece everything together with an AJAX call.
$(function() {
$.ajax({
type: "GET",
url: localUrl,
success: function(data)
{
drawChart(data);
}
});
});
google.load('visualization', '1.0', {'packages':['corechart']});
I'm not too sure where have I gone wrong. Can anybody help me out?
The values of your "number" column should not be strings:
'{"cols":[{"id":"Gender","label":"Gender","type":"string"},{"id":"DateOfBirth","label":"Date of Birth","type":"string"},{"id":"Number","label":"Number","type":"number"}],"rows":[{"c":[{"v":"F"},{"v":"1988-08-10"},{"v":1}]},{"c":[{"v":"M"},{"v":"1988-07-28"},{"v":1}]},{"c":[{"v":"F"},{"v":"1988-08-10"},{"v":1}]}]}'
You can try this in a Google playground for the Table. If you want to have a PieChart, 3 columns won't work; removing the 'DateOfBirth' column is working then:
'{"cols":[{"id":"Gender","label":"Gender","type":"string"},{"id":"Number","label":"Number","type":"number"}],"rows":[{"c":[{"v":"F"},{"v":1}]},{"c":[{"v":"M"},{"v":1}]},{"c":[{"v":"F"},{"v":1}]}]}'