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>
I have array From ajax Responses Look Like This
[
{
"name":"online",
"data":["34","155","12"]
},
{"name":"ofline",
"data":["34","155","12"]
}
]
ANd I want to add to Highchart Using ajax look this , but thats Wrong
$.getJSON("MYURL", {"cab":cab,"spv":spv,"sls":sls,"rg":rg}, function(data){
options.series = data;
var chart = new Highcharts.Chart(options);
});
In your example, the yAxis is missing.
Besides, the data must be under following format:
{
name: 'online',
marker: {
symbol: 'diamond'
},
data: [0, 0, 0, 0, 0, 0, 34, 155, 12, 0, 0, 0]
},{
name: 'offline',
marker: {
symbol: 'square'
},
data: [0, 0, 0, 0, 0, 0, 291, 182, 37, 0, 0, 0]
}
For more details, view this
The data array must be an array of numbers, not the strings - you need to change that on the backend site while rendering data or parse the data to an array of numbers just before to insert to the chart.
Demo: https://jsfiddle.net/BlackLabel/twkxezpy/
let dataFromDataBase = [{
"name": "online",
"data": [34, 155, 12]
},
{
"name": "ofline",
"data": [34, 155, 12]
}
];
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.
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/
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.