I have a chart containing data for each day of the year and I'm wanting to show the x-axis simply as months.
I've set up the following callback function which (crudely) grabs the month from the set of labels, checks to see whether it already exists and if not, returns it as an axis label
let rollingLabel;
...
function(label, index, labels) {
let _label = label.replace(/[0-9]/g, '');
if (rollingLabel != _label) {
rollingLabel = _label;
return rollingLabel;
}
}
However, it's only returning two of the expected four labels.
What's confusing me more is that if I add console.log(rollingLabel) within the conditional I can see that the variable is updating how I'd expect but it's not returning the value, or it is and the chart isn't picking it up for whatever reason. Even more confusing is that if I uncomment line 48 // return _label the chart updates with all the labels so I don't believe it's an issue with max/min settings for the chart.
If anyone has any ideas I'd be most grateful. I've been staring at it for hours now!
The expected output for the below snippet should have the following x-axis labels:
Aug | Sep | Oct | Nov
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
let data = [
1,6,3,11,5,1,2,6,2,10,5,8,1,1,2,4,5,2,3,1
];
let labels = [
"Aug 1","Aug 2","Aug 3","Aug 4","Aug 5","Sep 1","Sep 2","Sep 3","Sep 4","Sep 5","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Nov 1","Nov 2", "Nov 3","Nov 4","Nov 5"
];
let rollingLabel;
chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
backgroundColor: '#12263A',
data: data,
pointRadius: 0
}
],
labels: labels,
},
options: {
legend: {
display: false
},
responsive: false,
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
display: true,
autoSkip: true,
callback: function(label, index, labels) {
let _label = label.replace(/[0-9]/g, '');
if (rollingLabel != _label) {
rollingLabel = _label;
return rollingLabel;
}
// return _label;
}
}
}
]
},
tooltips: {
mode: "index",
intersect: false
},
hover: {
mode: "index",
intersect: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
You need to define ticks.autoSkip: false on the x-axis to make it work as expected:
autoSkip: If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
Please take a look at your amended code below:
let data = [
1,6,3,11,5,1,2,6,2,10,5,8,1,1,2,4,5,2,3,1
];
let labels = [
"Aug 1","Aug 2","Aug 3","Aug 4","Aug 5","Sep 1","Sep 2","Sep 3","Sep 4","Sep 5","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Nov 1","Nov 2", "Nov 3","Nov 4","Nov 5"
];
let rollingLabel;
chart = new Chart('chart', {
type: "line",
data: {
datasets: [
{
backgroundColor: '#12263A',
data: data,
pointRadius: 0
}
],
labels: labels,
},
options: {
legend: {
display: false
},
responsive: false,
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
display: true,
autoSkip: false,
callback: function(label, index, labels) {
let _label = label.replace(/[0-9]/g, '');
if (rollingLabel != _label) {
rollingLabel = _label;
return rollingLabel;
}
}
}
}
]
},
tooltips: {
mode: "index",
intersect: false
},
hover: {
mode: "index",
intersect: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
I found a easy solution via the chart.js documentation.
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart with Tick Configuration'
}
},
scales: {
x: {
ticks: {
// For a category axis, the val is the index so the lookup via getLabelForValue is needed
callback: function(val, index) {
// Hide the label of every 2nd dataset
return index % 2 === 0 ? this.getLabelForValue(val) : '';
},
color: 'red',
}
}
}
},
};
The callback function decides what labels will be shown. Current setup shows every 2nd label, if you want to show every 3rd for example you would change:
return index % 2 === 0 ? this.getLabelForValue(val) : '';
to:
return index % 3 === 0 ? this.getLabelForValue(val) : '';
I am trying to hide data labels generated by the data labels plugin for small screens.
I thought that I could use the onResize property of chartjs and set display to false when the width got small. This is much like the hide labels solution found here.
Unfortunately, I've not been able to get this to work. I have the following CodePen that doesn't work.
var moneyFormat = wNumb({
decimals: 0,
thousand: ',',
prefix: '$',
negativeBefore: '-'
});
var percentFormat = wNumb({
decimals: 0,
suffix: '%',
negativeBefore: '-'
});
/*
* Unregister chartjs-plugins-datalabels - not really necessary for this use case
*/
Chart.plugins.unregister(ChartDataLabels);
var doughnutdata = {
labels: ['Housing',
'Food',
'Transportation',
'Clothing',
'Healthcare',
'Childcare',
'Misc'],
datasets: [
{
backgroundColor: [
'#9B2A00',
'#5B5C90',
'#6B8294',
'#1A6300',
'#BE0000',
'#B8A853',
'#64A856'
],
borderColor: [
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF',
'#FFFFFF'
],
data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
}
]
};
var chartOptions = {
responsive: true,
maintainAspectRatio: true,
legend: {
labels: {
boxWidth: 20
}
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var index = tooltipItem.index;
return data.labels[index] + ': ' + moneyFormat.to(data.datasets[0].data[index]) + '';
}
}
},
plugins: {
datalabels: {
anchor: 'end',
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 1,
color: 'white',
font: {
size: 10
},
formatter: function (value, pieID) {
var sum = 0;
var dataArr = pieID.chart.data.datasets[0].data;
dataArr.map(function (data) {
sum += data;
});
var percentage = percentFormat.to((value * 100 / sum));
return percentage;
}
}
}
};
var doughnutID = document.getElementById('doughnutchart').getContext('2d');
var pieChart = new Chart(doughnutID, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: doughnutdata,
options: chartOptions,
onResize: function(chart, size) {
var showLabels = (size.width < 500) ? false : true;
chart.options = {
plugins: {
datalabels: {
display: showLabels
}
}
};
}
});
Any ideas concerning what I'm doing wrong (and fixes) would be greatly appreciated.
Responsiveness can be implemented using scriptable options and in your case, you would use a function for the display option that returns false if the chart is smaller than a specific size. (Example):
options: {
plugins: {
datalabels: {
display: function(context) {
return context.chart.width > 500;
}
}
}
}
As usual, as soon as I post a question I come up with an answer. One solution using inline plugin definitions is given at the following CodePen. If you put a browser into developer mode and shrink the window to less than 540 px, the data labels will vanish.
The code is shown below:
"use strict";
/* global Chart */
/* global wNumb */
/* global ChartDataLabels */
/*
* Unregister chartjs-plugins-datalabels - not really necessary for this use case
*/
Chart.plugins.unregister(ChartDataLabels);
var moneyFormat = wNumb({
decimals: 0,
thousand: ",",
prefix: "$",
negativeBefore: "-"
});
var percentFormat = wNumb({
decimals: 0,
suffix: "%",
negativeBefore: "-"
});
var doughnutdata = {
labels: [
"Housing",
"Food",
"Transportation",
"Clothing",
"Healthcare",
"Childcare",
"Misc"
],
datasets: [
{
backgroundColor: [
"#9B2A00",
"#5B5C90",
"#6B8294",
"#1A6300",
"#BE0000",
"#B8A853",
"#64A856"
],
borderColor: [
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF",
"#FFFFFF"
],
data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
}
]
};
var chartOptions = {
responsive: true,
maintainAspectRatio: true,
legend: {
labels: {
boxWidth: 20
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var index = tooltipItem.index;
return (
data.labels[index] +
": " +
moneyFormat.to(data.datasets[0].data[index]) +
""
);
}
}
},
plugins: {
datalabels: {
anchor: "end",
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: "white",
borderRadius: 25,
borderWidth: 1,
color: "white",
font: {
size: 10
},
formatter: function(value, pieID) {
var sum = 0;
var dataArr = pieID.chart.data.datasets[0].data;
dataArr.map(function(data) {
sum += data;
});
var percentage = percentFormat.to(value * 100 / sum);
return percentage;
}
}
}
};
var doughnutID = document.getElementById("doughnutchart").getContext("2d");
var pieChart = new Chart(doughnutID, {
plugins: [
ChartDataLabels,
{
beforeLayout: function(chart) {
var showLabels = (chart.width) > 500 ? true : false;
chart.options.plugins.datalabels.display = showLabels;
}
},
{
onresize: function(chart) {
var showLabels = (chart.width) > 500 ? true : false;
chart.options.plugins.datalabels.display = showLabels;
}
}
],
type: "doughnut",
data: doughnutdata,
options: chartOptions
});
I hope that this is useful.
The Grappelli default datepicker comes with Sunday as the first day of the week. This is really irritating! I want Monday to be the first day of the week for all my present and future models.
Is there a way to do this?
So far, the only "solution" I found involved changing the models' Media class. However, this solution does not seem to work as is with the following:
class Monkey(ImportExportActionModelAdmin):
class Media:
js = ("static/i18n/ui.datepicker-en-GB.js")
...
Where static/i18n/ui.datepicker-en-GB.js is
(function($) {
// datepicker, timepicker init
grappelli.initDateAndTimePicker = function() {
var options = {
closeText: "Done",
prevText: "Prev",
nextText: "Next",
currentText: "Today",
monthNames: [ "January","February","March","April","May","June",
"July","August","September","October","November","December" ],
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
weekHeader: "Wk",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
} )(grp.jQuery);
In any case, this solution is sub-optimal as any new model using a date would have to have the same Meta class defined.
The first part of the solution is to add another JavaScript file to the admin view, as already described by #Sardathrion:
class MyModelAdmin(ModelAdmin):
class Media:
js = ('js/grappellihacks.js',)
The second part is to re-configure the rendered datepicker widgets. Since they get a common class attribute, this code inside of your grappellihacks.js should be enough:
grp.jQuery(function() {
grp.jQuery('.hasDatepicker').datepicker('option', 'firstDay', 1);
});
The option is described in the jQuery UI documentation. The grp attribute is set by grappelli.js, which is loaded by the admin template before your custom media file.
There are indeed a few mistakes in the code above.
First, the AdminModel should be
class Monkey(ImportExportActionModelAdmin):
class Media:
js = ("i18n/ui.datepicker-en-GB.js", )
...
As the static directory is automatically appended and the js variable must be a tuple -- notice the comma.
Second, the javascrpt I used was a copy-and-paste of the static/grappelli/js/grappelli.js one with the option firstDay: 1, added to the options variable. It reads like so:
(function($) {
grappelli.initDateAndTimePicker = function() {
// HACK: get rid of text after DateField (hardcoded in django.admin)
$('p.datetime').each(function() {
var text = $(this).html();
text = text.replace(/^\w*: /, "");
text = text.replace(/<br>[^<]*: /g, "<br>");
$(this).html(text);
});
var options = {
firstDay: 1, // THIS IS THE ONLY CHANGE!!!
constrainInput: false,
showOn: 'button',
buttonImageOnly: false,
buttonText: '',
dateFormat: grappelli.getFormat('date'),
showButtonPanel: true,
showAnim: '',
// HACK: sets the current instance to a global var.
// needed to actually select today if the today-button is clicked.
// see onClick handler for ".ui-datepicker-current"
beforeShow: function(year, month, inst) {
grappelli.datepicker_instance = this;
}
};
var dateFields = $("input[class*='vDateField']:not([id*='__prefix__'])");
dateFields.datepicker(options);
if (typeof IS_POPUP != "undefined" && IS_POPUP) {
dateFields.datepicker('disable');
}
// HACK: adds an event listener to the today button of datepicker
// if clicked today gets selected and datepicker hides.
// use on() because couldn't find hook after datepicker generates it's complete dom.
$(document).on('click', '.ui-datepicker-current', function() {
$.datepicker._selectDate(grappelli.datepicker_instance);
grappelli.datepicker_instance = null;
});
// init timepicker
$("input[class*='vTimeField']:not([id*='__prefix__'])").grp_timepicker();
};
})(grp.jQuery);
Thirdly, I modified all the AdminModels that needed a datepicker. This is a PITA and I wish there was a better way of doing it. There might be...
I can't figure out why, I've triple checked that I'm passing in the right values. When I hover over any of the bars it displays the right data, but every single one of them displays at 10x scale on the graph and I can't figure out why. Here's my code if it helps:
var dashboard2 = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control2 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control2',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '80%'},
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0, 1, 14]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 259200000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 11, 7), 'end': new Date()}}
});
var chart2 = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart2',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '80%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 400}},
'title': 'Sales Made by Affiliate Name',
'seriesType': "bars",
'series': {0: {type: "line"}, 13: {type: "line"}},
'isStacked': true
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}
});
var jsonData2 = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server
var data2 = new google.visualization.DataTable(jsonData2);
dashboard2.bind(control2, chart2);
dashboard2.draw(data2);
Edit: Here's a small bit of the data at the very beginning, because I don't want to give out our data, but I suppose it might be necessary to get an idea for what is being passed in. I cut out the starting bracket for readability:
"cols":[ {"id":"","label":"Date","pattern":"","type":"date"}, {"id":"","label":"Total","pattern":"","type":"number"}, {"id":"","label":"andersce99","pattern":"","type":"number"}, {"id":"","label":"sojourn","pattern":"","type":"number"}, {"id":"","label":"warriorplus","pattern":"","type":"number"}, {"id":"","label":"potpie queen","pattern":"","type":"number"}, {"id":"","label":"60minuteaffiliate","pattern":"","type":"number"}, {"id":"","label":"bob voges","pattern":"","type":"number"}, {"id":"","label":"Grayth","pattern":"","type":"number"}, {"id":"","label":"TiffanyDow","pattern":"","type":"number"}, {"id":"","label":"AmandaT","pattern":"","type":"number"}, {"id":"","label":"Gaz Cooper","pattern":"","type":"number"}, {"id":"","label":"Sam England","pattern":"","type":"number"}, {"id":"","label":"Matthew Olson","pattern":"","type":"number"}, {"id":"","label":"Average Per Day Over Time","pattern":"","type":"number"} ],
"rows": [ {"c":[{"v":"Date(2012,11,7)","f":null},{"v":"387","f":null},{"v":"19","f":null},{"v":"275","f":null},{"v":"8","f":null},{"v":"0","f":null},{"v":"35","f":null},{"v":"3","f":null},{"v":"21","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"11","f":null},{"v":"6","f":null},{"v":"387","f":null}]},
{"c":[{"v":"Date(2012,11,8)","f":null},{"v":"98","f":null},{"v":"11","f":null},{"v":"39","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"15","f":null},{"v":"0","f":null},{"v":"7","f":null},{"v":"9","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"3","f":null},{"v":"6","f":null},{"v":"242.5","f":null}]},
{"c":[{"v":"Date(2012,11,9)","f":null},{"v":"58","f":null},{"v":"7","f":null},{"v":"16","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"3","f":null},{"v":"10","f":null},{"v":"2","f":null},{"v":"9","f":null},{"v":"0","f":null},{"v":"2","f":null},{"v":"181","f":null}]},
{"c":[{"v":"Date(2012,11,10)","f":null},{"v":"196","f":null},{"v":"5","f":null},{"v":"8","f":null},{"v":"126","f":null},{"v":"0","f":null},{"v":"2","f":null},{"v":"35","f":null},{"v":"0","f":null},{"v":"7","f":null},{"v":"4","f":null},{"v":"3","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"184.75","f":null}]},
{"c":[{"v":"Date(2012,11,11)","f":null},{"v":"76","f":null},{"v":"7","f":null},{"v":"5","f":null},{"v":"17","f":null},{"v":"30","f":null},{"v":"7","f":null},{"v":"1","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"1","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"163","f":null}]},
{"c":[{"v":"Date(2012,11,12)","f":null},{"v":"48","f":null},{"v":"4","f":null},{"v":"5","f":null},{"v":"9","f":null},{"v":"20","f":null},{"v":"7","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"143.833333333","f":null}]},
{"c":[{"v":"Date(2012,11,13)","f":null},{"v":"21","f":null},{"v":"3","f":null},{"v":"2","f":null},{"v":"5","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"126.285714286","f":null}]},
{"c":[{"v":"Date(2012,11,14)","f":null},{"v":"12","f":null},{"v":"1","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"4","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"112","f":null}]},
{"c":[{"v":"Date(2012,11,15)","f":null},{"v":"8","f":null},{"v":"3","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"100.444444444","f":null}]}
Your data is formatted incorrectly: numbers need to be stored as numbers in the JSON, not as strings. As an example, this:
{"v":"387","f":null}
should be like this:
{"v":387,"f":null}
If you are using PHP's json_encode function to build the JSON, you can add JSON_NUMERIC_CHECK as an argument to the function call to output the numbers properly:
json_encode($myData, JSON_NUMERIC_CHECK);