Related
I'm with some troubles with the CakePHP serialize and bootstrap-tables.
I've loaded all .js.
I think the bootstrap-tables dont reconize the
{ "despesas":[ in front of the .json
Can someone help me?
My route.php
//code
Router::extensions(['json']);
//code
my DespesasController.php function
//code
public function test()
{
$this->paginate = [
'contain' => ['Lojas', 'DespesaTipos'],
'limit' => '1000000000'
];
$this->set('despesas', $this->paginate($this->Despesas));
$this->set('_serialize', ['despesas']);
}
//code
test.ctp
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">
<table id="table"></table>
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pt-BR.min.js"></script>
<script type="text/javascript">
$('#table').bootstrapTable({
url: 'test.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'descricao',
title: 'Item Name'
}, {
field: 'valor',
title: 'Item Price'
}, ]
});
</script>
test.json
{
"despesas": [
{
"id": 1,
"data": "2015-01-02T00:00:00-0200",
"descricao": "INTERNET TRIBUNA BAIRROS (50%)",
"valor": 1503,
"loja_id": 1,
"despesa_tipo_id": 1,
"obs": "",
"created": "2015-12-10T00:00:00-0200",
"modified": "2015-08-05T00:00:00-0300",
"criado_por": "Kelvin Primo",
"modificado_por": "Deise"
},
When I open it on browser it returns.
No matching records found
Load you json data before you create the table, then you can pass it into the table, how it likes it.
<script type="text/javascript">
$(function () {
$.getJSON( "test.json", function(data) {
$('#table').bootstrapTable({
data: data.despesas,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'descricao',
title: 'Item Name'
}, {
field: 'valor',
title: 'Item Price'
}]
});
});
});
</script>
I'm trying to update a highcharts highstock chart with live data from a json file on my server.
now I have a chart that gets its data from a json file (that I create with php that requests the data from my MySQL database) like so:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKcoin Price LTCCNY</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'OkCoin Price LTCCNY'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'Price LTCCNY'
},
gridLineWidth: 1,
minorTickInterval: 'auto',
minorTickColor: '#FEFEFE',
labels: {
align: 'right'
}
}],
plotOptions: {
series: {
lineWidth: 1
}
},
tooltip: {
valueDecimals: 5,
valuePrefix: '$ '
},
series : [{
name : 'LTCCNY Price',
data : data,
dataGrouping : {
units : [
['minute',
[1, 5, 10, 15, 30]
], ['hour', // unit name
[1]
]
]
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
So far no problems, I get a chart from the json file. But of course it doesn't update if new data becomes available (only if I reload the page) .
What I want to do is after loading this chart, add live data to it as it becomes available.
something like this example, but instead of random data the chart will be updated with data from a (second) live updating json file on my webserver. The json file will be created by php (this part is working just fine) But I can't figure out how to add the data from the json file to the my existing highstock chart.
I also found
this this example on highcharts.com and that more or less does what I try to do, but I can't integrate the 'requestData' function into my existing chart.
So what I want to do is use the 'requestData' function from the second example with the high stock chart I already have. My second json file (with the live data) looks the same as in the second example (timestamp, price):
[1389022968000,173.3]
Can anyone help me a bit?
nevermind, I figured it out myself...
here's my solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKCoin LTCCNY Price</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'tickOkCoinLTCCNY.json',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 2; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 10000);
},
cache: false
});
}
$(function() {
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) {
// set the allowed units for data grouping
var groupingUnits = [[
'minute', // unit name
[1,5,15,30] // allowed multiples
], [
'hour',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: requestData
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
title: {
text: 'OKCoin LTCCNY Price'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'LTCCNY'
},
lineWidth: 2
}],
series: [{
name: 'LTCCNY',
data: data,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
when i runs the index.html i'm getting only a pie chart but with no color description .
can anyone please tell me how bring the color Symbol-outline like as shown below
my code is as given below
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Ext.chart.series.Pie Example</title>
<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
<script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
app.js
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 2
}, {
'name': 'metric five',
'data': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
You forgot to add legend config
...
height: 350,
legend: {
position: 'right'
},
...
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store
UPD:
Ext.define('myStore', {
extend: 'Ext.data.Store',
model: 'myModel',
proxy: {
type: 'ajax',
api: {
read: '/urlhere'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
}
}
});
expected data: {data: json array here, success: true/false, total: 123}
I'm trying to add 3 Y axis, so I'll have 1 Y axis for every data serie.
This is my JSON, which is valid:
[{"name":"data1","data":[[1361574000000,121201],[1362006000000,122019],[1363388400000,122788],[1363820400000,123740],[1364511600000,124703],[1365112800000,125618],[1365544800000,126553],[1366063200000,127496],[1366668000000,128500],[1367272800000,129433],[1368309600000,130277],[1368655200000,131267],[1369346400000,132191],[1369864800000,133143]]},{"name":"data2","data":[[1361574000000,0],[1362006000000,40.6],[1363388400000,35.7],[1363820400000,41.24],[1364511600000,40.56],[1365112800000,38.96],[1365544800000,39.8],[1366063200000,40.58],[1366668000000,40.79],[1367272800000,38.06],[1368309600000,37.95],[1368655200000,41.31],[1369346400000,40.16],[1369864800000,38.79]]},{"name":"data3","data":[[1361574000000,0],[1362006000000,1.46],[1363388400000,1.42],[1363820400000,1.42],[1364511600000,1.37],[1365112800000,1.41],[1365544800000,1.41],[1366063200000,1.35],[1366668000000,1.45],[1367272800000,1.36],[1368309600000,1.36],[1368655200000,1.36],[1369346400000,1.37],[1369864800000,1.359]]},{"name":"data4","data":[[1361574000000,0],[1362006000000,59.276],[1363388400000,50.694],[1363820400000,58.5608],[1364511600000,55.5672],[1365112800000,54.9336],[1365544800000,56.118],[1366063200000,54.783],[1366668000000,59.1455],[1367272800000,51.7616],[1368309600000,51.612],[1368655200000,56.1816],[1369346400000,55.0192],[1369864800000,52.71561]]}]
The JS code
$(function() {
$.getJSON('testdata.php', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
title : {
text : 'Temperature'
},
yAxis: [{
title: {
text: 'A'
}
}, {
title: {
text: 'B'
}
}, {
title: {
text: 'C'
}
}, {
title: {
text: 'D'
}
}],
series: [{
type: 'line',
name: 'data1',
data: data1,
yAxis: 1,
}
}, {
type: 'line',
name: 'data2',
yAxis: 2,
data: data2
}, {
type: 'line',
name: 'data3',
yAxis: 3,
data: data3
}, {
type: 'line',
name: 'data4',
yAxis: 4,
data: data4
}]
});
});
});
However, the chart won't load as soon as I add multiple Y axis. What am I doing wrong?
yAxis starts with 0, not with 1, so you are trying to set last series to non existing series.
[{
...
} ,{
type: 'line',
name: 'data4',
yAxis: 4, // max is 3
data: data4
}]
Second issue is to change options to proper format (mistaken by series name):
[{
...
} ,{
type: 'line',
name: 'data4',
yAxis: 3,
data: data[3].data //
}]
It finally works now! Thank you!!
Working code (combined with JSON already stated above):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('testdata.php', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
title : {
text : 'Temperature'
},
yAxis: [{
title: {
text: 'A'
}
}, {
title: {
text: 'B'
}
}, {
title: {
text: 'C'
}
}, {
title: {
text: 'D'
}
}],
series: [{
type: 'line',
name: 'data1',
yAxis: 0,
data: data[0].data,
}, {
type: 'line',
name: 'data2',
yAxis: 1,
data: data[1].data
}, {
type: 'line',
name: 'data3',
yAxis: 2,
data: data[2].data
}, {
type: 'line',
name: 'data4',
yAxis: 3,
data: data[3].data
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I am trying to create a Form using ExtJS . The files are placed properly but no rendering is happening :
index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="aa"></div>
</body>
</html>
app.js
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
Anybody any idea what am I missing ?
Thanks
In your app.js, try running that code when the onReady event has been fired e.g.
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
});
Just use Ext.onReady():
Adds a function to be called when the DOM is ready, and all required
classes have been loaded.
If the DOM is ready and all classes are loaded, the passed function is
executed immediately.
Working example: http://jsfiddle.net/Ld5e6/