I am trying to update a chart depending on the dates and and shifts selected using ajax. My ajax call returns an array like this:
0
date "2017-11-20"
shift "Day Shift"
availability 100
1
date "2017-11-21"
shift "Day Shift"
availability 63.63636363636363
2
date "2017-11-22"
shift "Day Shift"
availability 63.63636363636363
3
date "2017-11-23"
shift "Day Shift"
availability 63.63636363636363
4
date "2017-11-24"
shift "Day Shift"
availability 14.285714285714285
5
date "2017-11-20"
shift "Night Shift"
availability 67.56756756756756
6
date "2017-11-21"
shift "Night Shift"
availability 67.56756756756756
7
date "2017-11-22"
shift "Night Shift"
availability 67.56756756756756
8
date "2017-11-23"
shift "Night Shift"
availability 67.56756756756756
my javascript looks like this:
// on change event
var request;
$('input').on('change', function(event) {
console.log('changed');
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
var rangeStart = moment($('#daterange').data('daterangepicker').startDate).unix();
var rangeEnd = moment($('#daterange').data('daterangepicker').endDate).unix();
var shift = 'all';
request = $.ajax({
url: "report_availability.php",
type: "post",
data: {
rangeStart: rangeStart,
rangeEnd: rangeEnd,
shift: shift
}
});
request.done(function (response, textStatus){
drawChart(response);
});
request.fail(function (textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
request.always(function () {
console.log('request finished');
});
});
function drawChart(data) {
var dates = [];
var shift1Score = [];
var shift2Score = [];
for(var i in data) {
var found = jQuery.inArray(data[i].date, dates);
if (found < 0) {
dates.push(data[i].date);
}
if(data[i].shift == 'Day Shift' ) {
shift1Score.push(data[i].availability);
} else {
shift2Score.push(data[i].availability);
}
}
// Destroy the chart if it already exists
// NOT WORKING
if(myChart!=null){
myChart.destroy();
console.log('destroy');
}
var ctx = document.getElementById("myChart").getContext('2d');
ctx.canvas.height = 50;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dates,
datasets: [
{
label: "Day Shift",
backgroundColor: "#3e95cd",
data: shift1Score
}, {
label: "Night Shift",
backgroundColor: "#8e5ea2",
data: shift2Score
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: true,
maintainAspectRatio: false
}
});
}
I have 2 problems with this:
problem 1: The chart is not being destroyed so when I redraw it, it just redraws on top of the old chart which causes problems with the hover events. I have tried to use chart.update() to resolve this issue however this seems to just add to the original data instead of replacing it.
EDIT:- I have solved problem 1 by removing the canvas and then creating a new canvas:-
$('#myChart').remove();
$('#chartBar').append('<canvas id="myChart"></canvas>');
Problem 2: There is more than 2 shifts.. sometime upto 5 and I do not want to hard code all of these. I would like to draw each dataset depending on how many shifts are returned in the array, I am open to changing the array structure in php or javascript but just cannot seem to figure out the correct array structrue or how to build a dynamic dataset array for the chart.
the chart should output like this for 2 shifts:
Any help would be great thanks
I had the same problem that you have.
In order to update the graph i am using two functions:
Remove all datasets in current graph:
function removeDataset(chart) {
chart.data.datasets = [];
};
Add a new dataset to the graph:
function addDataset(chart, name, data, background, border, fill) {
var newDataset = {
label: name,
data: [],
backgroundColor: background,
borderColor: border,
fill: fill
};
for (var index = 0; index < data.length; ++index) {
newDataset.data.push(data[index]);
}
chart.data.datasets.push(newDataset);
};
So, when i have the ajax done, i use like this:
removeDataset(ctx1);
addDataset(ctx1, "Dataset Name", resp.dataset_data_json, "#007bff", "#007bff", true);
ctx1.update();
To declare the graph, i use:
var ctx1;
$(document).ready(function () {
var canvas1 = $("#canvas1")[0];
canvas1.height = "300";
ctx1 = new Chart(canvas1, config_ctx1);
});
I hope it helps.
Related
I have a small problem in my Bar Chart. I am using Chart.js v 2.9.4. I have successfully made the chart. The data is also coming. But I have a small issue. let me explain that.
I have 2 datasets both are getting from the Database. The datasets are as follows:
The total number of calls received on a certain date e.g, (5 calls on 5th October, 7 Calls on 6th October, 3 call on 7th October etc)
The number of paid calls received on a certain date e.g (3 calls on 5th October, 2 Calls on 6th October )
I successfully gets the data in JSON format and put it on the bar chart. The code for this is as follows:
var data_s = response.call_data;
var data_b = response.bill_data;
var c_days = [];
var b_days = [];
var calls = [];
var b_calls = [];
for (var i in data_s) {
var date = data_s[i].dated // date of the call (Total Call)
var res = date.split("-");
var year = res[0];
var month = res[1];
var day = res[2];
var dm = day + "/" + month;
c_days.push(dm);
calls.push(data_s[i].calls); // Number of calls
}
for (var i in data_b) {
var date = data_b[i].b_dated; // Date of Paid Call
var res = date.split("-");
var year = res[0];
var month = res[1];
var day = res[2];
var dm = day + "/" + month;
b_days.push(dm);
b_calls.push(data_b[i].b_calls); // Number of paid calls
}
var c = c_days.concat(b_days);
var unique = c.filter(function(itm, i, c) {
return i == c.indexOf(itm);
});
var chartdata = {
labels: unique,
datasets: [{
label: 'Total Calls',
backgroundColor: '#007bff',
borderColor: '#007bff',
hoverBackgroundColor: '#007bff',
hoverBorderColor: '#666666',
responsive: true,
maintainAspectRatio: false,
datasetFill: false,
data: calls
},
{
label: 'Billed Calls',
backgroundColor: '#28a745',
borderColor: '#28a745',
hoverBackgroundColor: '#28a745',
hoverBorderColor: '#666666',
responsive: true,
maintainAspectRatio: false,
datasetFill: false,
data: b_calls
}
]
};
var graphTarget = $("#barChart");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: barChartOptions
});
The problem is that that on a single bar chart the data on the dates are mismanaged. Like for example the total number of calls received on 7th October can be 10 while the billed calls (paid calls) can be 0.
My SQL query which fetch data from the database only gives total number of calls on the date.
The bar chart is successfully plotted but the paid calls data get a bit miss managed as told earlier.
You can say it is not necessary that if we receive call on certain day it must be paid call. Like on 5th October we can have total of 15 calls and none of it can be billed or paid. So the bar chart populates total call correctly but on paid call it doesn't put zero but next day billed or paid call on that 5th October date.
You should define the x-axis as a time cartesian axis and provide the data as individual points, an array of objects, having a x (alternatively also t) and an y property each.
There's no need for complex data processing using for loops. The response can instead be converted and directly assigned to the data properties through the Array.map() method as follows.
var chartdata = {
// omit labels
datasets: [{
...
data: response.call_data.map(v => ({ x: v.dated, y: v.calls }))
},
{
...
data: response.bill_data.map(v => ({ x: v.b_dated, y: v.b_calls }))
}]
};
For further information, please take a look at this answer.
The different date/time formats from the mentioned answer obviously need to be adapted to the format of your data and the desired display.
I am a new programmer and this is my first time using highcharts.
I have code like this using highstocks library too:
Highcharts.getJSON('https://gmlews.com/api/data', function(data) {
console.log(data);
var accelero_x = [],
timestamp = [];
for (var i = 0; i < data.length; i++) {
accelero_x.push(data[i].accelero_x);
timestamp.push(data[i].timestamp);
}
console.log(accelero_x);
console.log(timestamp);
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Accelero X'
},
series: [{
name: 'Accelero X',
data: accelero_x,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
});
You can see the full running code on : https://jsfiddle.net/estri012/y1usoxd7/1/
The problem is how to make the x-axes based on my timestamp?
New problem after get the x-axes right is : in my api, some of the last data is in 19March. But on the chart the last data shows 18March not 19March. Actually there is no one single data on 18March in my API. You can check the api on the URL above. Meanwhile the other data before those are showing the right date on the chart.
This is the capture of the chart :
You need to convert your data to the format required by Highcharts, in your case - an array of arrays or an array of objcts ({ x, y }).
Highcharts.getJSON('https://gmlews.com/api/data', function(data) {
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([
new Date(data[i].timestamp).getTime(),
data[i].accelero_x
]);
}
// Create the chart
...
});
Live demo: https://jsfiddle.net/BlackLabel/82vqcwsr/
API Reference: https://api.highcharts.com/highstock/series.line.data
I have a code for standard area-spline highchart where I made a function for prediction based on previous data. Prediction / forecasting is showing next 4 values in a trendline where the first prediction point is counting with real data, second point with real data plus first prediction point and the next two points about the same plus previous predictions. Otherwise it would be only a line with same values. But my data are increasing so the forecasting must be about the same.
Data in highchart are connected to Microsoft SQL Server.
Prediction is based on this code, just with few changes:
Forecast formula from Excel in Javascript
The highchart is now showing increasing data (values of resistance) as a decimal in yAxis and datetime in xAxis. Prediction is working as well but the thing is that not all data are relevant.There is always a point which is very different (lower than previous) and thats the place from where I need to count new prediction. The plotline is generated in the last high value, then starting the new (low) - and that is from where I need to count.
So here is what I do have:
-the function 'average' is counting average from values
-second function 'forecast' as you can expect is counting the forecasting (based on the code from link above)
-third function 'test' is already putting all together
-the 'results' (2,3,4) are the counted points of prediction
-'vlastnidata' are the data from mssql
-'datumek' is for the date
Now the condition for plotline (as you can see there) is that the previous point in chart must be 20 higher and then the plotline is generated - this is also working, just need to find a way how to count only with new data behind the plotline.
And here you can reach the connection function to mssql in php - if needed
Is there a way how to dynamically create a plotline in highchart when the value is lower than previous one?
As I said everything is working, plotlines and the prediction. But to see clear prediction I need to count only with relevant data.
Hope everything is clear. Thank you in advance for any recommendations.
function average(ar)
{
var r=0;
for (i=0;i<ar.length;i++)
{
r = r+ar[i];
}
return r/ar.length;
}
function forecast(x, ky, kx)
{
var i=0, nr=0, dr=0,ax=0,ay=0,a=0,b=0, result=0;
ax=average(kx);
ay=average(ky);
for (i=0;i<kx.length;i++)
{
nr = nr + ((kx[i]-ax) * (ky[i]-ay));
dr = dr + ((kx[i]-ax)*(kx[i]-ax))
}
b=nr/dr;
a=ay-b*ax;
result = (a+b*x);
return result;
}
function test(container,nazev,rtop,vlastnidata,colorSeries)
{
var result = 0, result2 = 0, result3 = 0, result4 = 0, datumek=[],hodnoty=[];
for (a=0;a<vlastnidata.length;a++)
{
datumek[a]=vlastnidata[a][0];
hodnoty[a]=vlastnidata[a][1];
}
kalkulace=(datumek[vlastnidata.length-1]-datumek[vlastnidata.length-2]);
hodnoty_nove=hodnoty;
datumek_nove=datumek;
result = forecast((datumek[vlastnidata.length-1]+kalkulace), hodnoty, datumek);
hodnoty_nove[hodnoty_nove.length]=result;
datumek_nove[datumek_nove.length]=(datumek[vlastnidata.length-1]+kalkulace);
result2 = forecast((datumek[vlastnidata.length-1]+2*kalkulace), hodnoty_nove, datumek_nove);
hodnoty_nove[hodnoty_nove.length]=result2;
datumek_nove[datumek_nove.length]=(datumek[vlastnidata.length-1]+2*kalkulace);
result3 = forecast((datumek[vlastnidata.length-1]+3*kalkulace), hodnoty_nove, datumek_nove);
hodnoty_nove[hodnoty_nove.length]=result3;
datumek_nove[datumek_nove.length]=(datumek[vlastnidata.length-1]+3*kalkulace);
result4 = forecast((datumek[vlastnidata.length-1]+4*kalkulace), hodnoty_nove, datumek_nove);
Highcharts.chart(container, {chart: {type: 'areaspline',
events: {
load:function(){
let points = this.series[0].points;
let plotLines = [];
console.log(this)
let previousPoint = points[0];
points.forEach(function(point) {
if(point.y < previousPoint.y/100*80) {
plotLines.push({
value: previousPoint.x,
color: 'red',
width: 3
});
}
previousPoint = point;
});
this.xAxis[0].update({
plotLines: plotLines
})
}
}
},
title: {text: 'Average of resistance per month, '+rtop},
legend: {layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'},
xAxis: { type: 'datetime'},
yAxis: {title: {text: 'Resistance: in ohms'}},
tooltip: {shared: true,valueSuffix: ' ohms',valueDecimals: 2},
credits: {enabled: false},
plotOptions: {areaspline: {fillOpacity: 0.5}},
series: [{ name: nazev,
color: colorSeries,
data: vlastnidata},
{name: 'Prediction',
color: '#001a33',
data: [[(datumek[vlastnidata.length-1]+kalkulace),result], [(datumek[vlastnidata.length-1]+2*kalkulace),result2], [(datumek[vlastnidata.length-1]+3*kalkulace),result3], [(datumek[vlastnidata.length-1]+4*kalkulace),result4]]
}]
});
}
I have a chart where the X-axis pulls data from a cell in an SQL table. The source data cell for the SQL table is formatted as DATE. The SQL cell is formatted DATETIME. When the data is exported to a .csv the cell format is again DATE and a chart built in the .csv has the X-axis in sequential date order. When the same data is viewed in a chart on our GIS the X-axis dates are out of order making the plotted data impossible to decipher. Here is the code for the chart. Any assistance would be greatly appreciated. Thanks.
function makeChart(featureset) {
dojo.empty("chartDiv");
var dlg = dijit.byId('chartDialog');
// When resources are loaded and the DOM is ready....
dojo.ready(function () {
var data = featureset._jsonData.items;
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier: "TestID",
label: "Parameter",
items: data
}
});
chart = new dojox.charting.DataChart("chartDiv", {
comparative: true
//scroll:stretchToFit
});
chart.setStore(store, { Parameter: '*' }, "Result");
//chart.addAxis("x", {title: "Sample#", titleOrientation: "away", majorLabels:true, minorTicks:true, minorLabels:true,
if (data.length > 2) {
chart.addAxis("x", {
title: "Collection Date",
titleOrientation: "away",
majorTicks: false,
majorLabels: true,
majorTickStep: 5,
minorTicks: false,
from: 0, to: (data.length + 0.5),
labelFunc: function (n) {
// I am assuming that your timestamp needs to be multiplied by 1000.
//var date = new Date(parseInt(data[n].CollectionDate) * 1000);
var date = data[n].CollectionDate;
return date;
}
});
}
chart.addAxis("y", { vertical: true });
var c = dojo.connect(chart, "onData", function () {
dojo.disconnect(c);
if (dijit.byId("chartlegend")) {
dijit.byId("chartlegend").destroy();
dojo.create("div", { id: "chartlegend" }, "chLegHd");
chlegend = new dojox.charting.widget.Legend({ chart: chart }, "chartlegend");
}
else {
chlegend = new dojox.charting.widget.Legend({ chart: chart }, "chartlegend");
chlegend.startup();
}
});
});
dlg.show();
}
I changed the source cell from datatype "datetime" to "date" and that made no difference in how the chart displays. It should show sequential dates i.e. 6/14/2015 7/01/2015 8/13/2015
but it is displaying thusly 8/13/2015 7/01/2015 6/14/2015
I am not very sure I understood your question very clearly. You want to display the date in sequential order retrieved from the DB. Here is what you can do:
You can create the labels array by the data base data retrieved.
var dBDateArray= ["array of dates from the DB in sequential order"];
var labelsArray = [];
for (var i = 0; i < dBDateArray.length; i++,) {
var obj = {};
obj.value = i;
obj.text = dbDateArray[i].name;
labelsArray.push(obj);
}
Set the labels in x Axis to this.labelsArray
this.chart1.addAxis("x", {
title: "Collection Date",
titleOrientation: "away",
labels:labelsArray
})
I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn't find any parameter that would limit this.
I don't want to take only three labels for example, because then the chart is also limited to three points. Is it possible?
I have something like that right now:
If I could just leave every third-fourth label, it would be great. But I found absolutely nothing about labels options.
Try adding the options.scales.xAxes.ticks.maxTicksLimit option:
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
For concreteness, let's say your original list of labels looks like:
["0", "1", "2", "3", "4", "5", "6", "7", "8"]
If you only want to display every 4th label, filter your list of labels so that every 4th label is filled in, and all others are the empty string (e.g. ["0", "", "", "", "4", "", "", "", "8"]).
For anyone looking to achieve this on Chart JS V2 the following will work:
var options = {
scales: {
xAxes: [{
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 == 1){
xLabels[i] = '';
}
});
}
}]
}
}
Then pass the options variable as usual into a:
myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});`
UPDATE:
I'v updated my fork with the latest pull (as of Jan 27, 2014) from NNick's Chart.js master branch.
https://github.com/hay-wire/Chart.js/tree/showXLabels
ORIGINAL ANSWER:
For those still facing this issue, I forked Chart.js a while back to solve the same problem. You can check it out on:
https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Older branch! Check showXLabels branch for latest pull.
How to use:
Applicable to bar chart and line chart.
User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)
Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.
See the attached images for a comparison.
Without showXLabels option:
With { showXLabels: 10 } passed into option:
Here's some discussion on it:
https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304
For Chart.js 3.3.2, you can use #Nikita Ag's approach with a few changes. You can check the documentation. Put ticks in xAxis in scales. Example:
...
options: {
scales: {
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
}
}
...
for axis rotation
use this:
scales: {
xAxes: [
{
// aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
ticks: {
autoSkip: true,
maxRotation: 0,
minRotation: 0
}
}
]
}
In Chart.js 3.2.0:
options: {
scales: {
x: {
ticks: {
maxTicksLimit: 10
}
}
}
}
According to the chart.js github issue #12. Current solutions include:
Use 2.0 alpha (not production)
Hide x-axis at all when it becames too crowd (cannot accept at all)
manually control label skip of x-axis (not in responsive page)
However, after a few minutes, I thinks there's a better solution.
The following snippet will hide labels automatically. By modify xLabels with empty string before invoke draw() and restore them after then. Even more, re-rotating x labels can be applied as there's more space after hiding.
var axisFixedDrawFn = function() {
var self = this
var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
var xLabelPerFontSize = self.fontSize / widthPerXLabel
var xLabelStep = Math.ceil(xLabelPerFontSize)
var xLabelRotationOld = null
var xLabelsOld = null
if (xLabelStep > 1) {
var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
xLabelRotationOld = self.xLabelRotation
xLabelsOld = clone(self.xLabels)
self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
for (var i = 0; i < self.xLabels.length; ++i) {
if (i % xLabelStep != 0) {
self.xLabels[i] = ''
}
}
}
Chart.Scale.prototype.draw.apply(self, arguments);
if (xLabelRotationOld != null) {
self.xLabelRotation = xLabelRotationOld
}
if (xLabelsOld != null) {
self.xLabels = xLabelsOld
}
};
Chart.types.Bar.extend({
name : "AxisFixedBar",
initialize : function(data) {
Chart.types.Bar.prototype.initialize.apply(this, arguments);
this.scale.draw = axisFixedDrawFn;
}
});
Chart.types.Line.extend({
name : "AxisFixedLine",
initialize : function(data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.scale.draw = axisFixedDrawFn;
}
});
Please notice that clone is an external dependency.
i had a similar type of issue, and was given a nice solution to my specific issue show label in tooltip but not in x axis for chartjs line chart. See if this helps you
you can limit at as
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 % 5 === 0 ? this.getLabelForValue(val) : '';
},
}
}
}
this will skip 4 labels and set the 5th one only.
you can use the following code:
xAxes: [{
ticks: {
autoSkip: true,
maxRotation: 90
}
}]
You may well not need anything with this new built-in feature.
A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally. https://www.chartjs.org/docs/latest/axes/
To set a custom number of ticks regardless of your chartsjs version:
yAxes: [{
ticks: {
stepSize: Math.round((Math.max.apply(Math, myListOfyValues) / 10)/5)*5,
beginAtZero: true,
precision: 0
}
}]
10 = the number of ticks
5 = rounds tick values to the nearest 5. All your y values will have the same step size.
Similar will work for xAxes too.
This answer works like a charm.
If you are wondering about the clone function, try this one:
var clone = function(el){ return el.slice(0); }
In the Chart.js file, you should find (on line 884 for me)
var Line = function(...
...
function drawScale(){
...
ctx.fillText(data.labels[i], 0,0);
...
If you just wrap that one line call to fillText with if ( i % config.xFreq === 0){ ... }
and then in chart.Line.defaults add something line xFreq : 1 you should be able to start using xFreq in your options when you call new Chart(ctx).Line(data, options).
Mind you this is pretty hacky.