Can't get the Highcharts x-axis date to work - php
I have searched the high and low in Stackoverflow for a fix on this date problem. I'm really struggling to get the date to display on the chart with the points being correctly set onto them.
Here is the JS Script:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'drawing',
zoomType: 'x',
width: 900,
height: 222
},
exporting: {
enabled: true
},
title: {
text: url+' - '+keyword
},
credits: {
text: 'Testing',
href: ''
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
reversed: true,
title: {
text: 'Rankings'
}
},],
tooltip: {
crosshairs: true,
shared: true
},
series: [{}]
};
var url = "****/chart.php";
$.getJSON(url, function(data1){
options.series = data1;
var chart = new Highcharts.Chart(options);
});
});
This is what our PHP Script Generated for the JSON
[{"name":"Google Rank","data":[["Date.UTC(2013, 3, 08)",23],["Date.UTC(2013, 3, 05)",24],["Date.UTC(2013, 3, 04)",23],["Date.UTC(2013, 3, 03)",22],["Date.UTC(2013, 3, 02)",24],["Date.UTC(2013, 3, 01)",26],["Date.UTC(2013, 2, 31)",24],["Date.UTC(2013, 2, 30)",24],["Date.UTC(2013, 2, 29)",25],["Date.UTC(2013, 2, 28)",25],["Date.UTC(2013, 2, 27)",25],["Date.UTC(2013, 2, 26)",26],["Date.UTC(2013, 2, 25)",25],["Date.UTC(2013, 2, 24)",24],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",10],["Date.UTC(2013, 2, 21)",10],["Date.UTC(2013, 2, 20)",10],["Date.UTC(2013, 2, 19)",10],["Date.UTC(2013, 2, 18)",10],["Date.UTC(2013, 2, 17)",10],["Date.UTC(2013, 2, 16)",9],["Date.UTC(2013, 2, 15)",9],["Date.UTC(2013, 2, 14)",9],["Date.UTC(2013, 2, 13)",9]],"visible":true,"pointInterval":86400000,"showInLegend":true},{"name":"Bing Rank","data":[["Date.UTC(2013, 3, 08)",0],["Date.UTC(2013, 3, 05)",0],["Date.UTC(2013, 3, 04)",0],["Date.UTC(2013, 3, 03)",0],["Date.UTC(2013, 3, 02)",0],["Date.UTC(2013, 3, 01)",0],["Date.UTC(2013, 2, 31)",0],["Date.UTC(2013, 2, 30)",0],["Date.UTC(2013, 2, 29)",0],["Date.UTC(2013, 2, 28)",0],["Date.UTC(2013, 2, 27)",0],["Date.UTC(2013, 2, 26)",0],["Date.UTC(2013, 2, 25)",0],["Date.UTC(2013, 2, 24)",0],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",0],["Date.UTC(2013, 2, 21)",0],["Date.UTC(2013, 2, 20)",0],["Date.UTC(2013, 2, 19)",0],["Date.UTC(2013, 2, 18)",0],["Date.UTC(2013, 2, 17)",0],["Date.UTC(2013, 2, 16)",0],["Date.UTC(2013, 2, 15)",0],["Date.UTC(2013, 2, 14)",0],["Date.UTC(2013, 2, 13)",0]],"visible":true,"pointInterval":86400000,"showInLegend":true},{"name":"Yahoo Rank","data":[["Date.UTC(2013, 3, 08)",0],["Date.UTC(2013, 3, 05)",0],["Date.UTC(2013, 3, 04)",0],["Date.UTC(2013, 3, 03)",0],["Date.UTC(2013, 3, 02)",0],["Date.UTC(2013, 3, 01)",0],["Date.UTC(2013, 2, 31)",0],["Date.UTC(2013, 2, 30)",0],["Date.UTC(2013, 2, 29)",0],["Date.UTC(2013, 2, 28)",0],["Date.UTC(2013, 2, 27)",0],["Date.UTC(2013, 2, 26)",0],["Date.UTC(2013, 2, 25)",0],["Date.UTC(2013, 2, 24)",0],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",0],["Date.UTC(2013, 2, 21)",0],["Date.UTC(2013, 2, 20)",0],["Date.UTC(2013, 2, 19)",0],["Date.UTC(2013, 2, 18)",0],["Date.UTC(2013, 2, 17)",0],["Date.UTC(2013, 2, 16)",0],["Date.UTC(2013, 2, 15)",0],["Date.UTC(2013, 2, 14)",0],["Date.UTC(2013, 2, 13)",0]],"visible":true,"pointInterval":86400000,"showInLegend":true}]
In JSON you cannot use functions like Date.UTC(), so I advice to use timestamp number.
Related
How to get all the arrays of the same value into a new array
I have the array below
[0: {id: 2, restult_typeid: 1, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}
1: {id: 2, restult_typeid: 2, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}
2: {id: 2, restult_typeid: 3, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}
3: {id: 2, restult_typeid: 4, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}
4: {id: 2, restult_typeid: 1, studentid: 3, academic_periodid: 1, subjectid: 1, classroomid: 6,…}]
i want to turn this array into this, that is all the array with the same subjectid should been in a group and vice versa
[
0: [{id: 2, restult_typeid: 1, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}, {id: 2, restult_typeid: 2, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}, {id: 2, restult_typeid: 3, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}, {id: 2, restult_typeid: 4, studentid: 3, academic_periodid: 1, subjectid: 2, classroomid: 6,…}]
1: [{id: 2, restult_typeid: 1, studentid: 3, academic_periodid: 1, subjectid: 1, classroomid: 6,…}]
]
i have tried this
$allSubjects = [];
$subs = [];
foreach($result as $res){
// solve for everysubjectid
$subject = array_push($allSubjects, $res->subjectid);
$returnValue = array_unique($allSubjects);
$getScores = array_push($subs, [$res->subjectid=>[
'type'=>$res->restult_typeid,
'subjecttitle'=>$res->subjecttitle,
'score'=>$res->score_obtained,
]]);
}
You can simply try this to group by subjectid
$subs = [];
foreach($result as $res){
$subs[$res->subjectid][] = $res;
}
You can do something like this
$data = [...] //your array
$grouped = array_values(
array_reduce($data, function(array $res, $item){
$subject = $data['subjectid'];
$existing = $res[$subject] ?? [];
$res[$subject] = array_merge($existing, [$item]);
return $res;
}, []));
Range grouping data and label in Chartjs
So, I would like to range my data and labels in Chartjs so that I can represent them properly. Please take a look at this reference which exactly shows what I am trying to do. You can see that the data is grouped and ranged according to the order totals. The bar is then representing the total order counts. One thing to notice here is that this data will change when the specified date range changes. However, the chart should always show 6 labels at max even if the date range changes, meaning, the data set changes (increases). Now, I would like to know if this is possible directly in Chartjs where I add some funky option value to make it work automagically or, as I am working with PHP in the backend, there's a way in PHP where I can dynamically chunk these elements by only knowing the date range. Please let me know if more explanation is required. Any help would be appreciated. PS: I have database access and I have all the data required to display in the chart, just need to display it in the said format.
You can use the tick callback to filter out ticks:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7],
backgroundColor: 'lime'
}
]
},
options: {
scales: {
x: {
ticks: {
callback: function(value, index, values) {
let skips = values.length / 6;
return index % skips === 0 ? this.getLabelForValue(value) : ''
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
Order collection by points using Laravel
I have a collection where I get the points for each player.
$rankings = Player::with(['rankings'])
->map(function($item){
return ['points' => $item->rankings->pluck('points')];
})->sortByDesc('total');
This gives me back the following:
[
{
"player": 5,
"points": [
4,
2,
1,
2,
2,
3
]
},
{
"player": 1,
"points": [
2,
3,
3,
4,
4,
4
]
},
{
"player": 10,
"points": [
1,
4,
2,
1,
1,
2
]
},
{
"player": 6,
"points": [
3,
1,
1,
3,
3,
1
]
}
]
How can I sort the collection so that the players who score the most points 1? The ones with the most 2 points remaining second and so on? And in case there are players tied in points 1, get those who have more points 2?
[
{
"player": 10,
"points": [
1,
4,
2,
1,
1,
2
]
},
{
"player": 6,
"points": [
3,
1,
1,
3,
3,
1
]
},
{
"player": 5,
"points": [
4,
2,
1,
2,
2,
3
]
},
{
"player": 1,
"points": [
2,
3,
3,
4,
4,
4
]
},
]
Thanks.
How to change order of columns while exporting CSV data in Datatables?
I have TableTools file version like below
File: TableTools.min.js
Version: 2.1.4
I have a scenario like below
I have a data-table with Export to Excel / CSV (from client side)
In data table I need columns in the order 0,1,2,3,4 and so on
While exporting into excel I need columns in the order 0,2,1,4,3.
Is that possible in Table Tools? If so could you please help me.
Edit
I have following code:
"oTableTools": {
"sSwfPath": "path/to/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [
{
"sExtends": "csv",
"sFileName": "Sample.csv",
"oSelectorOpts": {
page: 'current'
},
"mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16],
"fnClick": function (nButton, oConfig, oFlash) {
//$(".DTTT_button_xls").trigger('click');
oTable.colReorder.order( [ 1, 2, 3, 4, 16, 6, 7, 8, 9, 12, 13, 14, 15 ] );
}
},
{
"sExtends": "xls",
"sFileName": "Sample.xls",
"oSelectorOpts": {
page: 'current'
},
"mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16],
}
],
}
]
},
$("#ExportButton").on("Click", function (e) {
table.colReorder.order( [ 0,2,1,4,3 ] );
} );
There isn't any existing feature available in Datatables that can re-order columns while exporting them. So I had to write a PHP code at server side and had generate `CSV' file from it.
Highchart error with date values on xaxis
I am trying to build a line chart but my highchart isn't rendering with the following code.
Could someone check what am I doing wrong?
$('#employee_chart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'REPORTS AT A GLANCE (LAST 30 DAYS)'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%d'
},
tickInterval: 24 * 3600 * 1000,
min: Date.UTC(<?php echo date("Y, m, d",strtotime("-30 days"));?>),
max: Date.UTC(<?php echo date("Y, m, d");?>)
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Unique Logins',
data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9, 7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9, 7, 6, 9, 14, 18, 21]
}]
});
Thank you
It seems you are missing pointStart which is cause of the issue. pointStart :someDate See Fiddle with similar issue when no pointStart and Working fiddle when defined pointStart
The problem seems to be coming from your xaxis settings:
As you can see here your chart renders without these settings: http://jsfiddle.net/e4fru078/
tickInterval: 24 * 3600 * 1000,
min: Date.UTC(<?php echo date("Y, m, d",strtotime("-30 days"));?>),
max: Date.UTC(<?php echo date("Y, m, d");?>)
I would recommend to look into categories for your xaxis:
example here: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/reflow-true/