Process a jQuery $Post with php? - php

I need to process this with php (note that the data being sent is JSON):
$.post("calculate.php", existingJsonData,
function(data) {
//alert("Data Loaded: " + data);
console.log("test data", data.values);
});
The existingJsonData is formatted like this:
{
"object1": {
"object11": {"x": "10", "y": "20", "z": "30"},
"object12": {"x": "40", "y": "50", "z": "60"},
"object13": {"x": "70", "y": "80", "z": "90"}
},
"object2": {
"object21": {"x": "100", "y": "200", "z": "300"},
"object22": {"x": "400", "y": "500", "z": "600"},
"object23": {"x": "700", "y": "800", "z": "900"}
}
}
The php needs to add 1 to each of the x's in "object2".

This one adds 1 to each of the x's in object 2 and alerts you the incremented values
<?php
if ($_POST){
ob_clean();
$objects = $_POST['object2'];
foreach($objects as $a => $subObject) {
$objects[$a] = $subObject['x'] + 1;
}
die(json_encode((object) $objects));
}
?>
<script>
var existingJsonData= $.parseJSON('{ "object1": { "object11": {"x": "10", "y": "20", "z": "30"}, "object12": {"x": "40", "y": "50", "z": "60"}, "object13": {"x": "70", "y": "80", "z": "90"} }, "object2": { "object21": {"x": "100", "y": "200", "z": "300"}, "object22": {"x": "400", "y": "500", "z": "600"}, "object23": {"x": "700", "y": "800", "z": "900"}}}');
$.post("<?php echo $_SERVER['PHP_SELF']; ?>", existingJsonData,
function(data) {
var data = $.parseJSON(data);
$.each(data, function(a,b){
alert(a+' : '+b);
});
});
</script>
demo

Related

Can't show stacked columns dynamic json data

Hi all i'm looking for help creating a test chart with dynamic data in php.
In first place i create the graph witout problem.
window.onload = function () {
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Gasto Proyectado (neto)"
},
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MM/YYYY"
},
axisY: {
suffix: "",
valueFormatString: "$#,###"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right",
cursor: "pointer",
itemclick: toggleDataSeries
},
data:[
<?php
$gastoMensualProyectado = Helper::gastoMensualProyectado();
//var_dump($gastoMensualProyectado);
//die();
$controlCostoN1= array();
foreach ($gastoMensualProyectado as $key => $value) {
$controlCostoN1[]= $value['name'];
}
$controlCostoN1 = array_unique($controlCostoN1);
$output = '';
foreach ($controlCostoN1 as $indice => $name) {
$output .= '{
type: "stackedColumn",
name: "'.$name.'",
showInLegend: true,
xValueFormatString: "MMM, YYYY",
yValueFormatString: "$#,###",
dataPoints:[';
foreach ($gastoMensualProyectado as $key => $value) {
if ($name == $value['name']){
$output.='{ x:'.$value['x'].', y:'.$value['y'].'},';
}
}
$output .=']},';
}
$output = substr($output,0,-3);
print $output;
?>
]
}]
});
chart.render();
Then i want to put new data calling a php file that respond with json_encode function
$dps = array();
$i=0;
$header = '';
foreach ($controlCostoN1 as $indice => $name) {
//$val[$i] = 'type: "stackedColumn",name: "'.$name.'",showInLegend: true,xValueFormatString: "MMM, YYYY",yValueFormatString: "$#,###",dataPoints:';
//var_dump($name);
foreach ($gastoMensualProyectado as $key => $value) {
// echo $name;
if ($name == $value['name']){
$dps[][$name] = $value;
/*
$header .= '{
type: "stackedColumn",
name: "'.$name.'",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: ';
//$points[] = '{ x:'.$value['x'].', y:'.$value['y'].'},';
//$dps[] = [ "x" => $value['x'], "y" => $value['y'] ];
.json_encode($value, JSON_NUMERIC_CHECK).'
},';
*/
}
}
}
// $output = substr($output,0,-3);
echo json_encode($dps);`
And then try to refresh the data in the graph when change a select but the grph change with no columns at all.
` $('#idPresupuesto').change(function(event) {
var dps = [];
var names = [];
var response;
$.getJSON("acciones/obtenerDatosStackedColumns.json.php", { idPresupuesto: $(this).val() } ,function(data) {
// console.log(data);
// console.log("swasaddsaasd");
$.each(data, function(key, value){
// dataPoints.push({x: value[0], y: parseInt(value[1])});
// console.log(value.first());
// console.log(value[Object.keys(value)[0]].name);
// value.map()
jQuery.map( value , function( n, i){
if(jQuery.inArray(n.name,names) < 0){
names.push(n.name);
//console.log(n.name);
}
});
});
$.each(data, function(key, value){
// console.log(key);
jQuery.map( value , function( n, i){
// console.log(n.x + " "+n.y);
dps.push({x: n.x, y: parseInt(n.y)});
// console.log();
});
});
console.log(dps);
// console.log(names);
// console.log(names.length);
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Presupuesto"
},
animationEnabled: true,
data: [{
dataPoints : dps,
}]
});
chart.render();
});
});`
the json response is:
[{
"Alimentaci\u00f3n": {
"idOrdenCompra": 7,
"x": "new Date(2019, 2)",
"y": 1361340,
"name": "Alimentaci\u00f3n"
}
}, {
"Alimentaci\u00f3n": {
"idOrdenCompra": 146,
"x": "new Date(2019, 2)",
"y": 60000,
"name": "Alimentaci\u00f3n"
}
}, {
"Equipos": {
"idOrdenCompra": 125,
"x": "new Date(2019, 1)",
"y": 350500,
"name": "Equipos"
}
}, {
"Equipos": {
"idOrdenCompra": 29,
"x": "new Date(2019, 3)",
"y": 95014016,
"name": "Equipos"
}
}, {
"Equipos": {
"idOrdenCompra": 141,
"x": "new Date(2019, 3)",
"y": 2743908,
"name": "Equipos"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 1,
"x": "new Date(2019, 1)",
"y": 26179454,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 18,
"x": "new Date(2019, 3)",
"y": 8599651,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 84,
"x": "new Date(2019, 3)",
"y": 3233271,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Materiales": {
"idOrdenCompra": 4,
"x": "new Date(2019, 2)",
"y": 12975104,
"name": "Materiales"
}
}, {
"Materiales": {
"idOrdenCompra": 14,
"x": "new Date(2019, 2)",
"y": 30393814,
"name": "Materiales"
}
}, {
"Materiales": {
"idOrdenCompra": 82,
"x": "new Date(2019, 2)",
"y": 30014590,
"name": "Materiales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 3,
"x": "new Date(2019, 2)",
"y": 4657962,
"name": "Saldos Gastos Generales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 16,
"x": "new Date(2019, 3)",
"y": 107923647,
"name": "Saldos Gastos Generales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 86,
"x": "new Date(2019, 3)",
"y": 80498702,
"name": "Saldos Gastos Generales"
}
}, {
"Herramientas": {
"idOrdenCompra": 16,
"x": "new Date(2019, 3)",
"y": 5056052,
"name": "Herramientas"
}
}, {
"Herramientas": {
"idOrdenCompra": 92,
"x": "new Date(2019, 4)",
"y": 2192715,
"name": "Herramientas"
}
}, {
"Mano de Obra": {
"idOrdenCompra": 19,
"x": "new Date(2019, 1)",
"y": 16748410,
"name": "Mano de Obra"
}
}, {
"Mano de Obra": {
"idOrdenCompra": 91,
"x": "new Date(2019, 3)",
"y": 1962698,
"name": "Mano de Obra"
}
}]
Actually the first graph render good but when i try to update data show me an empty chart.
I fixed it changing the json content of date
"x": "new Date(2019, 3)",
to
"x": "2019, 3",
and then apply to this line the object Date
$output.='{ x:new Date('.$value['x'].'), y:'.$value['y'].'},';
the the graph works great an dynamically!
hope this help to somebody.

How to access JSON object values using vue steps?

This is step 1. These are the input boxes i want to type. This is the function I created to point each value to input boxes:
getmyEditor: function(){
this.chartType = this.options.chart.type;
this.backgroundColor = this.options.chart.backgroundColor;
this.borderColor = this.options.chart.borderColor;
this.borderWidth = this.options.chart.borderWidth;
this.height = this.options.chart.height;
this.options.xAxis.plotLines = [{
value: this.xPlotLinesvalue,
label: {
text: this.xPlotLinesText,
align: 'center',
style: {
color: 'gray'
}
}}];
Above code i created to access object values. how to apply this values added
text boxes?
{"chart": {
"type": "pie",
"backgroundColor": "#FFFFFF",
"borderColor": "#000",
"borderWidth": 0,
"height": 300,
"inverted": false,
"plotBackgroundColor": "#FFFFFF",
"plotBorderColor": "#FFFFFF",
"plotBorderWidth": 1,
"style": {
"fontFamily": "Open Sans"
},
"polar": ""
},
"title": {
"text": "Title",
"x": -20
},
"table": {
"text": ""
},
"xAxis": {
"max": null,
"categories": [],
"title": {
"text": ""
},
"plotLines": [
{
"value": 0,
"width": 0,
"color": "red",
"label": {
"text": "",
"align": "center",
"style": {
"color": "gray"
}
}
}
]
},
"yAxis": {
"title": {
"text": ""
},
"categories": [],
"min": null,
"max": null,
"plotLines": [
{
"value": 0,
"width": 0,
"color": "red",
"label": {
"text": "",
"align": "center",
"style": {
"color": "gray"
}
}
}
]
},
"zAxis": "",
"tooltip": {
"valueDecimals": 0,
"valuePrefix": "",
"valueSuffix": "",
"padding": 8
},
"legend": {
"enabled": true,
"layout": "vertical",
"align": "right",
"verticalAlign": "middle",
"borderWidth": 0
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"color": "#582b6e",
"stacking": "",
"point": {
"events": {}
}
},
"scatter": {
"marker": {
"radius": 4,
"states": {
"hover": {
"enabled": true,
"lineColor": "rgb(100,100,100)"
}
}
},
"states": {
"hover": {
"marker": {
"enabled": false
}
}
},
"tooltip": {
"headerFormat": "<b>{series.name}</b><br>",
"pointFormat": "{point.x} , {point.y} ",
"x_unit": "",
"y_unit": ""
}
}
},
"series": [
{
"name": "Brands",
"colorByPoint": true,
"data": [
{
"name": "IE",
"y": 56.33
},
{
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
},
{
"name": "Firefox",
"y": 10.38
},
{
"name": "Safari",
"y": 4.77
},
{
"name": "Opera",
"y": 0.91
},
{
"name": "Other",
"y": 0.2
}
]
}
],
"lang": {
"noData": "NO DATA AVAILABLE!"
},
"noData": {
"style": {
"fontWeight": "bold",
"fontSize": "15px",
"color": "#303030"
}
}
}
I'm trying to access (point to text boxes) this object using vue, but it's not working yet. How to do that correctly? I point each object value using this vue function inside method.
This is i want final output: This object view inside textarea if i change text area object value then that value will going to above input boxes.

CanvasJS chart not rendering properly when using json data returned from php

Hi I am trying to use CanvasJS to render an area chart using JSON data returned from php. The chart renders but does not have any Values and is just blank apart from the axis's.
Something must be wrong with the JSON output but i cant see why?
The Javascript:
$(document).ready(function(){
$("#click").click(function(){
$.ajax({
type: "POST",
url: "data.php",
dataType: 'json',
success: function(data) {
loadChart(data);
}
});
});
});
function loadChart(response) {
console.log(response);
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Email Analysis"
},
animationEnabled: true,
axisX:{
interval: 3
// labelAngle : 30,
// valueFormatString: "HHmm'hrs'"
},
axisY: {
title: "kWH"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: response
});
chart.render();
}
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<input id="click" type="button">
The php script which returns the JSON:
$begin = new DateTime( '2017-01-01' );
$end = new DateTime( '2017-01-31' );
$interval = DateInterval::createFromDateString('1 day');
$period = new DatePeriod($begin, $interval, $end);
$data[0] = array(
'name'=> "Electricy",
'showInLegend' => true,
'legendMarkerType' => "square",
'type' => "area",
'color' => "rgba(40,175,101,0.6)",
'markerSize' => 0,
'xValueType' => "dateTime",
);
foreach ( $period as $dt ){
$data[0]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' => 10);
}
$data[1] = array(
'name'=> "Gas",
'showInLegend' => true,
'legendMarkerType' => "square",
'type' => "area",
'color' => "rgba(40,175,101,0.6)",
'markerSize' => 0,
'xValueType' => "dateTime",
);
foreach ( $period as $dt ){
$data[1]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' => 20);
}
$data = json_encode($data);
echo $data;
die();
It outputs the following JSON:
[{
"name": "Electricy",
"showInLegend": true,
"legendMarkerType": "square",
"type": "area",
"color": "rgba(40,175,101,0.6)",
"markerSize": 0,
"xValueType": "dateTime",
"dataPoints": [{
"x": 1483228800,
"y": 10
}, {
"x": 1483315200,
"y": 10
}, {
"x": 1483401600,
"y": 10
}, {
"x": 1483488000,
"y": 10
}, {
"x": 1483574400,
"y": 10
}, {
"x": 1483660800,
"y": 10
}, {
"x": 1483747200,
"y": 10
}, {
"x": 1483833600,
"y": 10
}, {
"x": 1483920000,
"y": 10
}, {
"x": 1484006400,
"y": 10
}, {
"x": 1484092800,
"y": 10
}, {
"x": 1484179200,
"y": 10
}, {
"x": 1484265600,
"y": 10
}, {
"x": 1484352000,
"y": 10
}, {
"x": 1484438400,
"y": 10
}, {
"x": 1484524800,
"y": 10
}, {
"x": 1484611200,
"y": 10
}, {
"x": 1484697600,
"y": 10
}, {
"x": 1484784000,
"y": 10
}, {
"x": 1484870400,
"y": 10
}, {
"x": 1484956800,
"y": 10
}, {
"x": 1485043200,
"y": 10
}, {
"x": 1485129600,
"y": 10
}, {
"x": 1485216000,
"y": 10
}, {
"x": 1485302400,
"y": 10
}, {
"x": 1485388800,
"y": 10
}, {
"x": 1485475200,
"y": 10
}, {
"x": 1485561600,
"y": 10
}, {
"x": 1485648000,
"y": 10
}, {
"x": 1485734400,
"y": 10
}]
}, {
"name": "Gas",
"showInLegend": true,
"legendMarkerType": "square",
"type": "area",
"color": "rgba(40,175,101,0.6)",
"markerSize": 0,
"xValueType": "dateTime",
"dataPoints": [{
"x": 1483228800,
"y": 20
}, {
"x": 1483315200,
"y": 20
}, {
"x": 1483401600,
"y": 20
}, {
"x": 1483488000,
"y": 20
}, {
"x": 1483574400,
"y": 20
}, {
"x": 1483660800,
"y": 20
}, {
"x": 1483747200,
"y": 20
}, {
"x": 1483833600,
"y": 20
}, {
"x": 1483920000,
"y": 20
}, {
"x": 1484006400,
"y": 20
}, {
"x": 1484092800,
"y": 20
}, {
"x": 1484179200,
"y": 20
}, {
"x": 1484265600,
"y": 20
}, {
"x": 1484352000,
"y": 20
}, {
"x": 1484438400,
"y": 20
}, {
"x": 1484524800,
"y": 20
}, {
"x": 1484611200,
"y": 20
}, {
"x": 1484697600,
"y": 20
}, {
"x": 1484784000,
"y": 20
}, {
"x": 1484870400,
"y": 20
}, {
"x": 1484956800,
"y": 20
}, {
"x": 1485043200,
"y": 20
}, {
"x": 1485129600,
"y": 20
}, {
"x": 1485216000,
"y": 20
}, {
"x": 1485302400,
"y": 20
}, {
"x": 1485388800,
"y": 20
}, {
"x": 1485475200,
"y": 20
}, {
"x": 1485561600,
"y": 20
}, {
"x": 1485648000,
"y": 20
}, {
"x": 1485734400,
"y": 20
}]
}]
It looks like you're using an old version of the library. I've used your json data with the latest CDN version and it seems to work OK.
EDIT You are seeing hours because you are generating Unix timestamps in PHP (which are in seconds).
To convert to a javascript timestamp multiply the value by 1000: $dt->getTimestamp() * 1000
I've updated this demo with the json data multiplied by 1000 http://jsbin.com/nezigexilu/1/edit?html,output
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

How to create a combo chart (bar and line) with fusioncharts using data from MySQL database?

I found this code online to do basically everything I was looking for except they are not using data from a MySQL database where as I am. Here is their code:
{
"chart": {
"caption": "Inventory by Product Categories",
"bgcolor": "FFFFFF",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"divlinecolor": "CCCCCC",
"showvalues": "0",
"showcanvasborder": "0",
"pyaxisname": "Cost of Inventory",
"syaxisname": "Units in Inventory",
"numberprefix": "$",
"labeldisplay": "STAGGER",
"slantlabels": "1",
"canvasborderalpha": "0",
"legendshadow": "0",
"legendborderalpha": "0",
"showborder": "0"
},
"categories": [
{
"category": [
{
"label": "Seafood",
"labelPadding": 0
},
{
"label": "Beverages",
"labelPadding": 12
},
{
"label": "Condiments",
"labelPadding": 0
},
{
"label": "Dairy Products",
"labelPadding": 12
},
{
"label": "Confections",
"labelPadding": 0
},
{
"label": "Meat/Poultry",
"labelPadding": 12
},
{
"label": "Grains/Cereals",
"labelPadding": 0
},
{
"label": "Produce",
"labelPadding": 12
}
]
}
],
"dataset": [
{
"seriesname": "Cost of Inventory",
"color": "008ee4",
"data": [
{
"value": "13510"
},
{
"value": "12480"
},
{
"value": "12024"
},
{
"value": "11271"
},
{
"value": "10392"
},
{
"value": "5729"
},
{
"value": "5594"
},
{
"value": "3549"
}
]
},
{
"seriesname": "Quantity",
"parentyaxis": "S",
"renderas": "Line",
"color": "f8bd19",
"data": [
{
"value": "701"
},
{
"value": "559"
},
{
"value": "507"
},
{
"value": "393"
},
{
"value": "386"
},
{
"value": "165"
},
{
"value": "258"
},
{
"value": "100"
}
]
}
]
}
This makes sense, but it's changing this JSON code to accept data from a database instead of hardcoding this that is difficult for me.
Here is the relevent part of my code:
<?php
$strQuery2 = "SELECT ScrapDate, SUM(Quantity) AS Quantity FROM Scrap WHERE Department = 'WE' GROUP BY ScrapDate ORDER BY ScrapDate";
// Execute the query, or else return the error message.
$result2 = $dbhandle->query($strQuery2) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
// If the query returns a valid response, prepare the JSON string
if ($result2) {
// The `$arrData` array holds the chart attributes and data
$arrData2 = array(
"chart" => array(
"caption" => "WE Last Week Scrap Quantity",
"paletteColors" => "#0075c2",
"bgColor" => "#ffffff",
"borderAlpha"=> "20",
"canvasBorderAlpha"=> "0",
"usePlotGradientColor"=> "0",
"plotBorderAlpha"=> "10",
"showXAxisLine"=> "1",
"xAxisLineColor" => "#999999",
"showValues"=> "0",
"divlineColor" => "#999999",
"divLineIsDashed" => "1",
"showAlternateHGridColor" => "0",
"xAxisName"=> "Day",
"yAxisName"=> "Quantity"
)
);
$arrData2["data"] = array();
// Push the data into the array
while($row2 = mysqli_fetch_array($result2)) {
array_push($arrData2["data"], array(
"label" => $row2["ScrapDate"],
"value" => $row2["Quantity"],
// "link" => "deptDrillDown.php?Department=".$row["Department"]
)
);
}
$jsonEncodedData2 = json_encode($arrData2);
$columnChart2 = new FusionCharts("column2D", "chart2" , 600, 300, "chart-2", "json", $jsonEncodedData2);
// Render the chart
$columnChart->render();
$columnChart2->render();
// Close the database connection
$dbhandle->close();
}
?>
As of right now, I can get data from the MySQL database and put it into a graph very easily. Now I want to add 1 more dataset, how do I do this?
To dynamically update the chart, following methods turns very useful:
getJSONData: Fetches chart data in the JSON format.
setJSONData: Sets chart data in the JSON data format
A sample implementation is shown in the below snippet. The chart is initially rendered as the default column2d chart. Once the Add Area button is clicked, an area dataset gets visually updated. Similarly on clicking the Add Line button to add a line dataset. The Reset button restores to original column only visual.
var visitChart,
areaBtn = document.getElementById('area'),
lineBtn = document.getElementById('line'),
resetBtn = document.getElementById('reset');
FusionCharts.ready(function() {
visitChart = new FusionCharts({
type: 'mscombi2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Actual Revenue",
"data": [{
"value": "16000"
}, {
"value": "20000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "15000"
}, {
"value": "21000"
}, {
"value": "16000"
}, {
"value": "20000"
}, {
"value": "17000"
}, {
"value": "25000"
}, {
"value": "19000"
}, {
"value": "23000"
}]
}]
}
}).render();
});
areaBtn.addEventListener('click', function() {
var dataset,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
dataset.push({
"seriesname": "Profit",
"renderas": "area",
"showvalues": "0",
"data": [{
"value": "4000"
}, {
"value": "5000"
}, {
"value": "3000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "7000"
}, {
"value": "1000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "8000"
}, {
"value": "2000"
}, {
"value": "7000"
}]
});
visitChart.setJSONData(json);
areaBtn.disabled = true;
});
lineBtn.addEventListener('click', function() {
var dataset,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
dataset.push({
"seriesname": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
});
visitChart.setJSONData(json);
lineBtn.disabled = true;
});
resetBtn.addEventListener('click', function() {
var dataset,
len,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
if ((len = dataset.length) > 1) {
dataset.splice(1, len - 1);
}
visitChart.setJSONData(json);
areaBtn.disabled = false;
lineBtn.disabled = false;
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<button id='area'>Add Area</button>
<button id='line'>Add Line</button>
<button id='reset'>Reset</button>
<span id="chart-container">FusionCharts XT will load here!</span>
The data getting appended might be fetched from a database in a similar manner stated above.

JSON decoding array

I have this JSON code:
{
"phrases": [
{
"phrases": [
{
"id": "33",
"text": "sasdsad",
"date": "2012-03-14 20:28:45",
"views": "0",
"ip": "64.191.90.5",
"reported": "0",
"strange": "0",
"lang": "en"
},
{
"id": "32",
"text": "que ondaa\r\n",
"date": "2012-03-14 20:27:45",
"views": "0",
"ip": "64.191.90.5",
"reported": "0",
"strange": "0",
"lang": "en"
},
{
"id": "31",
"text": "dsadssadsad",
"date": "2012-03-14 20:27:35",
"views": "0",
"ip": "64.191.90.5",
"reported": "0",
"strange": "0",
"lang": "en"
}
],
"details": {
"success": "true",
"phrase_id": "",
"phrase_text": "",
"phrase_date": ""
}
}
I don't really know what to do. I get some phrases vía MySQL, and pushes them to an array. This array is json_encoded() and gets printed.
$sth = $sql;
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$rows[] = $r;
}
$sth = $sql;
$data = array(
"success" => "true",
"phrase_id" => "",
"phrase_text" => "",
"phrase_date" => "",
);
print json_encode($rows).json_encode($data);
and with jQuery I was trying to parse it, but I can't. This is the main problem.
function getPhrases(order,limit,last){
var req_url = ...;
$.getJSON(req_url, function(data) {
$.each(data.phrases, function(i, data) {
appendPhrase(data.text);
lastid = data.id;
});
$.each(data.details, function(i, data) {
$("#phrases-count").html(data.totalcount);
});
});
}
PS: I was doing this with "echo" but got some problems.
{
"phrases": [
{
"id": "33",
"text": "sasdsad",
"date": "2012-03-14 20:28:45",
"views": "0",
"ip": "64.191.90.5",
"lang": "en"
},
{
"id": "32",
"text": "que ondaa<br />",
"date": "2012-03-14 20:27:45",
"views": "0",
"ip": "64.191.90.5",
"lang": "en"
},
{
"id": "31",
"text": "dsadssadsad",
"date": "2012-03-14 20:27:35",
"views": "0",
"ip": "64.191.90.5",
"lang": "en"
}
],
"details": [
{
"totalcount": "3",
"logged_in": "false"
}
]
}
You can't simply combine these JSON arrays:
print json_encode($rows).json_encode($data);
Try this (attempt 2):
print json_encode( array('phrases' => $rows, 'details' => $data) );

Categories