I have a MongoDB database with Laravel in Backend, I get the data from mongo and I out in to the highcharts, in Local it looks good:
But in remote with the same code looks like this:
And the console shows me the next error:
(14) highstock.js:8 Highcharts error #15: www.highcharts.com/errors/15
(8) highstock.js:8 Highcharts error #15: www.highcharts.com/errors/15
It's the same code, the same version of mongodb the sambe version of PHP driver:S
EDIT:
The jQuery code that I have:
$('#historic-graph').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'Gráfico Histórico'
},
series: [{
name: 'Dato',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
And the Data that I recieve:
[[1455839004000,130],[1455839006000,130],[1455839008000,133],[1455839011000,134],[1455839013000,133],[1455839015000,132],[1455839017000,134],[1455839020000,130],[1455839022000,134],[1455839024000,133],[1455839027000,134],[1455839029000,131],[1455839031000,134],[1455839034000,132],[1455839036000,130],[1455839038000,132],[1455839040000,134],[1455839043000,132],[1455839045000,133],[1455839047000,130]]
[TIME, VALUE]
The time is strtotime created_at * 1000 with php.
EDIT 2:
PHP code that I return with data variable in jQuery after ajax request:
foreach ($alldata as $item) {
$date = new Carbon($item['created_at']);
$date = $date->addHours(Auth::user()->utc)->timestamp * 1000;
array_push($data, array($date, floatval(round($item['value'], 2))));
}
I add an hour for users UTC timezone.
Related
I am using Spatie for logging activities in my web site. I created a table where the data from activity_log database table will be displayed. There's no problem in retrieving the data from database but my problem is that whenever I display the values from properties column it only displays [object Object].
Here's what the data table looks like:
While it's actual values in the database table of activity_log is this:
Here's my snippet code from my controller:
public function datatable_Activities()
{
$data = Activity::all()->where('causer_id', '=', Auth::user()->id);
return Datatables::of($data)->make(true);
}
Snippet code for displaying the data in my blade file:
<script>
$(function () {
$("#activity_table_log").DataTable({
responsive:true,
processing:true,
pagingType: 'full_numbers',
stateSave:false,
scrollY:true,
scrollX:true,
ajax:"{{route('datatable_Activities')}}",
order:[0, 'desc'],
columns:[
{data:'log_name', name: 'log_name'},
{data:'description', name: 'description'},
{data:'subject_id', name: 'subject_id'},
{data:'properties', name: 'properties'},
{data:'created_at', name: 'created_at', searchable: false, sortable:false},
]
});
});
</script>
I already tried json_decode() but unfortunately it is not working..
How to display it properly like the values stored in properties
column in database not the [object Object]?
However when I check the response in Developer's Tool it retrieves the values of properties exactly from the database.
Here's the example nested JSON object I am trying to put in the data table:
{
"id":6,
"log_name":"PurchaseH",
"description":"A purchase h has been updated",
"subject_id":1,
"subject_type":"App\\Model\\Purchase\\PurchaseH",
"causer_id":1,
"causer_type":"App\\User",
"properties":{
"attributes":{
"total":1250000
},
"old":{
"total":null
}
},
"created_at":"2020-06-14T09:04:34.000000Z",
"updated_at":"2020-06-14T09:04:34.000000Z"
},
P.S. I'm Using latest Google chrome, Laravel Framework and Spatie.
I want to plot the synchronized charts like this https://www.highcharts.com/demo/synchronized-charts.
The JSON data will come from SQL database and the xData (x-axis) looks like below which are in year-month format:
xData: [
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2013-12","2004-04","2004-04",
"2007-11","2007-11","2012-08","2005-05","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2016-04","2004-04","2012-08","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2005-05","2004-04","2004-04",
"2012-08","2016-04","2004-04","2004-04","2004-04","2004-04","2012-08","2004-04",
"2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04","2004-04",
"2004-04","2006-02","2007-11","2004-04","2004-04","2004-04","2005-05","2004-04",
"2004-04","2005-05","2004-04","2004-04","2012-08","2012-08","2006-02","2005-05",
"2004-04","2016-04","2004-04","2004-04","2004-04","2006-02","2004-04","2004-04",
"2004-04","2004-04","2004-04","2005-05","2007-11"
]
So, how to plot those data as x-axis for synchronized charts?
you could simply use that one array as the labels for the xAxis:
xAxis: {
labels: {
format: '{value}'
}
},
but in order to plot on a timeline axis, you may need to convert these strings into integer values, which can be done with PHP: strtotime($date.'-01 00:00:00') ...hint: you need to multiply the result (in seconds) with 1000 for JavaScript timestamps (in milliseconds).
I added categories: "activity.xData" to to the chart
and set the labels format to "this.value"
xAxis: {
crosshair: true,
categories: activity.xData,
events: {
setExtremes: syncExtremes
},
labels: {
format: this.value
}
},
My question is: How do I load data from Google Analytics in a Chart.js chart?
I am writing a program with the Laravel framework (version 5.6) and use the Google Analytics API (not the Google Analytics Embed API)(version 3).
I get the data correctly presented in an array but I want to show it in a graph.
Subquestion: Do I need to replace the data in datasets with a connection to the Google Analytics API?
A simple chart from Chart.js:
<canvas id="userChart"></canvas>
<script>
var ctx = document.getElementById('userChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["dag 1", "dag 8", "dag 15", "dag 22", "dag 30"],
datasets: [{
label: "users",
//backgroundColor: '#2f5ec4',
borderColor: '#2f5ec4',
data: [138, 163, 115, 124, 49],
}]
},
// Configuration options go here
options: {}
});
Update:
Example of how I get the Analytics data:
Route::get('/datatest', function()
{
$analyticsData =
Analytics::fetchTotalVisitorsAndPageViews(Period::days(30));
dd($analyticsData);
});
Example of the DD array:
It might be too late but for anyone who is in need, try the following. For your case you have your $analyticsData collection, which is a good start. Chartjs uses lists to map and compare data.
So for example we want to see a chart of date vs visitors
//transfer all of this code out of the routes to your controller
$analyticsData = Analytics::fetchTotalVisitorsAndPageViews(Period::days(30));
//send these two variables to your view
$dates = $analyticsData->pluck('date');
$visitors = $analyticsData->pluck('visitors');
In your script, the labels should receive $dates in a list as follows;
labels: {!! json_encode($dates) !!},
And data in datasets receive $visitors as a list;
data: {!! json_encode($visitors) !!}
See this article on my website for more in-depth explanations.
I have stock market data plotted over highcharts:
My JS Code:
$(function() {
$.getJSON('data.php', function(data) {
console.log(data);
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector:{
enabled:false
},
navigator: {
enabled: true
},
useUTC: false,
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
}
},
title : {
text : 'NSE Stock Price'
},
credits: {
enabled : false
},
series : [{
name : 'NSE Stock Prices',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
My JSON output (partial):
[["09:01:00",27966.96],["09:03:00",27934.64],["09:03:00",27934.64],["09:07:00",27952.66],["09:07:00",27952.66],["09:07:00",27952.66]]
I expect time from 9:00am to 4:00pm on x-axis but I am just not getting it.
I tried changing time to unix time changing date format useUTC to true but noting worked out.
Update:
Tried this format too,
[["2014-11-14 09:01:00",27966.96],["2014-11-14 09:03:00",27934.64],["2014-11-14 09:03:00",27934.64]]
Update 2
My PHP code,
$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);
Update 3: (some of the latest values)
[["2014-11-17 09:00:00",28065.72],["2014-11-17 09:02:00",28048.8],["2014-11-17 09:04:00",28041.93],["2014-11-17 09:06:00",28029.58],["2014-11-17 09:08:00",28018.68],["2014-11-17 09:10:00",28018.68],["2014-11-17 09:12:00",28018.68],["2014-11-17 09:14:00",28018.68],["2014-11-17 09:16:00",27988.73],["2014-11-17 09:18:00",28001.06],["2014-11-17 09:20:00",28003.06],["2014-11-17 09:22:00",27988.44],["2014-11-17 09:24:00",28011.67],["2014-11-17 09:26:00",27988.56],["2014-11-17 09:28:00",27991.17],["2014-11-17 09:30:00",27983.98],["2014-11-17 09:32:00",27972.01],["2014-11-17 09:34:00",27980.87],["2014-11-17 09:36:00",27994.42],["2014-11-17 09:38:00",28007.38],["2014-11-17 09:40:00",28005.57],["2014-11-17 09:42:00",27986.39],["2014-11-17 09:44:00",28010.79],["2014-11-17 09:46:00",27998.44],["2014-11-17 09:48:00",28012.66]]
This is as per: $array_item[] = array(strtotime($price_date), (float)$last_traded_price);
[[1416195000,28065.72],[1416195120,28048.8],[1416195240,28041.93],[1416195360,28029.58],[1416195480,28018.68],[1416195600,28018.68],[1416195720,28018.68],[1416195840,28018.68],[1416195960,27988.73],[1416196080,28001.06],[1416196200,28003.06],[1416196320,27988.44],[1416196440,28011.67],[1416196560,27988.56],[1416196680,27991.17],[1416196800,27983.98],[1416196920,27972.01],[1416197040,27980.87],[1416197160,27994.42],[1416197280,28007.38],[1416197400,28005.57],[1416197520,27986.39],[1416197640,28010.79],[1416197760,27998.44],[1416197880,28012.66],[1416198000,28018.49],[1416198120,28010.15],[1416198240,28028.18],[1416198360,28035.61],[1416198480,28024.87],[1416198600,28018.95],[1416198720,28007.81],[1416198840,28001.57],[1416198960,28006.85],[1416199080,27997.68],[1416199200,27993.06]]
The output: Still not giving perfect timings although not giving 00:00 as before.
The graph is breaking in middle.
Update 3:
PHP Code,
while ($stocks_bse_price->fetch())
{
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
}
JSFidle link: http://jsfiddle.net/Ywr3L/38/
Update 4:
Just realized its going wrong if figures for entire day is given as an input to array.
I have stored entire days data http://pastebin.com/NVAD5EyG
Update 5:
This is what I did in MySql query:
DATE_FORMAT(price_date,'%d-%c-%Y %r') as price_date
And then in PHP
$price_date = $price_date.' UTC';
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
Which is giving me this:
http://jsfiddle.net/rof96xuo/1/
[[1416301200000,28177.51],[1416301320000,28180.46],[1416301440000,28181.03],[1416301560000,28198.98],[1416301680000,28209.03],[1416301800000,28209.03]]
new Date(1416301200000)
Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)
As #RaeenHashemi is saying in the comments, highcharts expects datetime data to be in JavaScript epoch times (number of milliseconds since 1970/01/01). You are giving it a string representation of your datetime.
It looks like you are generating JSON from PHP. If so, modify the PHP to convert the time to epoch. If you have a DateTime object in your PHP use getTimeStamp:
$date->getTimestamp() * 1000; // unix timestamp to javascript millisecond timestamp
If you have date time strings in your PHP, convert it to a DateTime first.
I have this simple code:
var store = {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": 0.01,
"Description": "A test object"
}
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: store,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: ['->', {
//iconCls: 'icon-save',
text: 'Sync',
scope: this,
// handler: this.onSync
}]
}]
});
The panel looks like this:
My app uses similar grid, the only difference is that the store variable is created dynamically (but has similar structure) and I also have a sync button that should save any changes to the grid's value field.
As of now, value field can be edited but not saved anywhere of course. I have been trying to add an event on sync button click, that would get all the rows from value and update the database.
Can anyone tell me step-by-step what to add in property.Grid's code, so that when I click sync
it would send all the values via AJAX to my php file, that would do the sync with database?
Thanks
Something like this should do the trick:
{
text: 'Sync',
handler: function() {
// get values
var gridvalues = this.up( 'propertygrid' ).getSource();
// send AJAX request
Ext.Ajax.request({
url: 'somephpurl...',
params: gridvalues
});
}
}
The docs, BTW, for these are as follows:
Get property grid values: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.property.Grid-method-getSource
Create AJAX request: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Ajax-method-request