Chartjs line graph dataset with offset

Chartjs line graph dataset with offset - javascript

How would one enter datasets with an offset into Chart.js, so first x values will not get drawn? e.g
I cannot seem to wrap my head around it :/

The below answer is for chartjs version 1.x
One way can be to create a custom graph that will allow for null values, in a previous question i answered i applied the same technique but it can also be used here.
In my answer, i explain how i have achieved the gaps
https://stackoverflow.com/a/25319120/2737978
The only difference here is rather than having gaps in 1 datasets data, the gaps can be used to create your desired effect.
When setting up your data just make sure the two datasets lineup with the labels like so,
//labels that will applied to both datasets
labels: ["January", "February", "March", "April", "May", "June", "July"],
//data sets will lineup to the labels
data: [65, 34, 21, null, null, null, null]
data: [null, null, 88, 19, 86, 27, 90]
fiddle http://jsfiddle.net/leighking2/yoqfwt8o/
the extend line graph
Chart.types.Line.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "MissingLine",
initialize: function(data) {
var helpers = Chart.helpers;
//Declare the extension of the default point, to cater for the options passed in to the constructor
this.PointClass = Chart.Point.extend({
strokeWidth: this.options.pointDotStrokeWidth,
radius: this.options.pointDotRadius,
display: this.options.pointDot,
hitDetectionRadius: this.options.pointHitDetectionRadius,
ctx: this.chart.ctx,
inRange: function(mouseX) {
return (Math.pow(mouseX - this.x, 2) < Math.pow(this.radius + this.hitDetectionRadius, 2));
}
});
this.datasets = [];
//Set up tooltip events on the chart
if (this.options.showTooltips) {
helpers.bindEvents(this, this.options.tooltipEvents, function(evt) {
var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
this.eachPoints(function(point) {
point.restore(['fillColor', 'strokeColor']);
});
helpers.each(activePoints, function(activePoint) {
activePoint.fillColor = activePoint.highlightFill;
activePoint.strokeColor = activePoint.highlightStroke;
});
this.showTooltip(activePoints);
});
}
//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(data.datasets, function(dataset) {
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
pointColor: dataset.pointColor,
pointStrokeColor: dataset.pointStrokeColor,
points: []
};
this.datasets.push(datasetObject);
helpers.each(dataset.data, function(dataPoint, index) {
/**
*
* Check for datapoints that are null
*/
if (helpers.isNumber(dataPoint) || dataPoint === null) {
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.points.push(new this.PointClass({
/**
* add ignore field so we can skip them later
*
*/
ignore: dataPoint === null,
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.pointStrokeColor,
fillColor: dataset.pointColor,
highlightFill: dataset.pointHighlightFill || dataset.pointColor,
highlightStroke: dataset.pointHighlightStroke || dataset.pointStrokeColor
}));
}
}, this);
this.buildScale(data.labels);
this.eachPoints(function(point, index) {
helpers.extend(point, {
x: this.scale.calculateX(index),
y: this.scale.endPoint
});
point.save();
}, this);
}, this);
this.render();
},
draw: function(ease) {
var helpers = Chart.helpers;
var easingDecimal = ease || 1;
this.clear();
var ctx = this.chart.ctx;
this.scale.draw(easingDecimal);
helpers.each(this.datasets, function(dataset) {
//Transition each point first so that the line and point drawing isn't out of sync
//We can use this extra loop to calculate the control points of this dataset also in this loop
helpers.each(dataset.points, function(point, index) {
point.transition({
y: this.scale.calculateY(point.value),
x: this.scale.calculateX(index)
}, easingDecimal);
}, this);
// Control points need to be calculated in a seperate loop, because we need to know the current x/y of the point
// This would cause issues when there is no animation, because the y of the next point would be 0, so beziers would be skewed
if (this.options.bezierCurve) {
helpers.each(dataset.points, function(point, index) {
//If we're at the start or end, we don't have a previous/next point
//By setting the tension to 0 here, the curve will transition to straight at the end
if (index === 0) {
point.controlPoints = helpers.splineCurve(point, point, dataset.points[index + 1], 0);
} else if (index >= dataset.points.length - 1) {
point.controlPoints = helpers.splineCurve(dataset.points[index - 1], point, point, 0);
} else {
point.controlPoints = helpers.splineCurve(dataset.points[index - 1], point, dataset.points[index + 1], this.options.bezierCurveTension);
}
}, this);
}
//Draw the line between all the points
ctx.lineWidth = this.options.datasetStrokeWidth;
ctx.strokeStyle = dataset.strokeColor;
var penDown = false;
var start = null
helpers.each(dataset.points, function(point, index) {
/**
* no longer draw if the last point was ignore (as we don;t have anything to draw from)
* or if this point is ignore
* or if it's the first
*/
if (!point.ignore && !penDown) {
ctx.beginPath();
penDown = true;
start = point;
}
if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
if (this.options.bezierCurve) {
ctx.bezierCurveTo(
dataset.points[index - 1].controlPoints.outer.x,
dataset.points[index - 1].controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
} else {
ctx.lineTo(point.x, point.y);
}
} else if (index === 0 || dataset.points[index - 1].ignore) {
ctx.moveTo(point.x, point.y);
}
if (((dataset.points.length > index + 1 && dataset.points[index + 1].ignore) ||
dataset.points.length == index + 1) && !point.ignore) {
ctx.stroke();
if (this.options.datasetFill) {
ctx.lineTo(point.x, this.scale.endPoint);
ctx.lineTo(start.x, this.scale.endPoint);
ctx.fillStyle = dataset.fillColor;
ctx.closePath();
if (point.x != start.x) {
ctx.fill();
}
}
penDown = false;
}
}, this);
//Now draw the points over the line
//A little inefficient double looping, but better than the line
//lagging behind the point positions
helpers.each(dataset.points, function(point) {
/**
* don't draw the dot if we are ignoring
*/
if (!point.ignore)
point.draw();
});
}, this);
}
});
then to use
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 34, 21, null, null, null, null]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [null, null, 88, 19, 86, 27, 90]
}
]
};
var myLineChart = new Chart(ctx).MissingLine(data);

Related

Separating results in chartjs line chart

So, I have a form with a starting date, an end date and a selector so you can choose which server (selected by id) you'd like to select data from, and returns a json string with the day, temperature and server id. everything works just fine here.
My issue comes when I tried to make it so when you don't select a server, it gives you all data from all servers (select stuff from table where id like '%'). I adapted my chart generating function to this:
function generateChart(data) {
var results = JSON.parse(data);
if (results.error == true) {
var errCode = results.code;
var errText = results.text;
defineError(errCode, errText);
}
else {
var chartjsTemp = [];
var chartjsDate = [];
if (results.length > 1) {
for (var i = 1; i < results.length; i++) {
chartjsTemp.push(results[i].probeTemp);
chartjsDate.push(results[i].dateProbe);
}
}
else {
alert ("No results!");
}
var ctx = document.getElementById('myChart').getContext('2d');
var button = $("#submitButton");
submitButton.addEventListener("click", function(){
myChart.destroy();
});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartjsDate,
datasets: [{
label: 'temp',
data: chartjsTemp,
backgroundColor: "rgba(240,240,240,0.5)"
}]
}
});
}
}
I don't know how to adapt the datasets part so if I have an unknown number of servers with different values for data, (might return 3 servers or 5 different servers, depending on the database used) to be generated automatically instead of having to do a dataset for every existing server (which means I'd have to do a function for each database with each server).
Edit: This is an example of what happens if I leave it like this (which obviously is not good): http://imgur.com/a/IgH2c
Edit 2: Okay, doing a for loop like this:
for (i=0; i >= chartjsId.length; i++) {
datasets: [{
label: chartjsId[i],
data: chartjsTemp,
backgroundColor: "rgba(240,240,240,0.5)"
}]
}
didn't work much at all. I get a slim framework error.

What I understand, you have draw all the charts you want and know you want to hide all other and show the selected ones.
We can achieve this through Legends, when user click on the legend its display will toggle from graph.
Or we can achieve like this jsFiddle
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "First",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,20,20,1)",
pointColor: "rgba(220,20,20,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 90]
}, {
label: "Second",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(15,187,25,1)",
pointColor: "rgba(15,187,25,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [38, 55, 50, 65, 35, 67, 54]
}]
};
var options = {
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value + ' %' %>",
};
var ctx = document.getElementById("myChart").getContext("2d");
window.myLineChart = new Chart(ctx).Line(data, options);
window.myLineChart.store = new Array();
$('#selectbox').change(function () {
var label = $('#selectbox').val();
var chart = window.myLineChart;
var store = chart.store;
var finded = false;
//Restore all
for (var i = 0; i < store.length; i++) {
var restored = store.splice(i, 1)[0][1];
chart.datasets.push(restored);
}
//Если нет, то добавляем в стор
if (label!='All') {
console.log('Start search dataset with label = ' + label);
for (var i = 0; i < chart.datasets.length; i++) {
if (chart.datasets[i].label === label) {
chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
}
}
}
chart.update();
});

Chart Js Change Label orientation on x-Axis for Line Charts

I am using chart.js.
Similar to this Question, I would like to rotate my x-axis labels 90 degrees.
Currently my labels are rotated about 80 degrees with default settings.
Could somebody help me adapt the bar-chart solution for rotating labels, so that I can use it on line-charts?

If you are using chart.js 2.x, just set maxRotation: 90 and minRotation: 90 in ticks options. It works for me! And if you want to all x-labels, you may want to set autoSkip: false. The following is an example.
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}]
}
}
});

It worked for me on version 3.1.0
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
x: {
ticks: {
maxRotation: 90,
minRotation: 90
}
}
}
}
})

for x axis use this
options: {
legend: {
display: false
},
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
and can filter the label with a for loop:
arrayLabels.forEach((date, i) => {
let label = "";
if (i % step == 0 && fecha) {
label = moment(date, "DD/MM").format("DD MMM");
}
labels.push(label);
});
chartOptions.data.labels = labels;

This answer is for chartjs 1.X for an answer covering 2.X take a look at the great answer from #tabetomo https://stackoverflow.com/a/39706986/2737978
Using the same method as in the previous answer the only thing that needs to changed is the extension of the graph type. This time it is extending the line chart and the set-up is a little different as the Line charts scale is created in the build scale so this time it is buildScale is overridden so that the custom scale is used and the new option overrideRotation can be passed in. initialize is also overridden but only so that the super initialize can be called and get the ball rolling on building the graph.
var helpers = Chart.helpers;
Chart.MyScale = Chart.Scale.extend({
calculateXLabelRotation: function() {
//Get the width of each grid by calculating the difference
//between x offsets between 0 and 1.
this.ctx.font = this.font;
var firstWidth = this.ctx.measureText(this.xLabels[0]).width,
lastWidth = this.ctx.measureText(this.xLabels[this.xLabels.length - 1]).width,
firstRotated,
lastRotated;
this.xScalePaddingRight = lastWidth / 2 + 3;
this.xScalePaddingLeft = (firstWidth / 2 > this.yLabelWidth + 10) ? firstWidth / 2 : this.yLabelWidth + 10;
this.xLabelRotation = 0;
if (this.display) {
var originalLabelWidth = helpers.longestText(this.ctx, this.font, this.xLabels),
cosRotation,
firstRotatedWidth;
this.xLabelWidth = originalLabelWidth;
//Allow 3 pixels x2 padding either side for label readability
var xGridWidth = Math.floor(this.calculateX(1) - this.calculateX(0)) - 6;
if (this.overrideRotation) {
this.xLabelRotation = this.overrideRotation;
cosRotation = Math.cos(helpers.radians(this.xLabelRotation));
// We're right aligning the text now.
if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
}
this.xScalePaddingRight = this.fontSize / 2;
this.xLabelWidth = cosRotation * originalLabelWidth;
} else {
//Max label rotate should be 90 - also act as a loop counter
while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)) {
cosRotation = Math.cos(helpers.radians(this.xLabelRotation));
firstRotated = cosRotation * firstWidth;
lastRotated = cosRotation * lastWidth;
// We're right aligning the text now.
if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
}
this.xScalePaddingRight = this.fontSize / 2;
this.xLabelRotation++;
this.xLabelWidth = cosRotation * originalLabelWidth;
}
}
if (this.xLabelRotation > 0) {
this.endPoint -= Math.sin(helpers.radians(this.xLabelRotation)) * originalLabelWidth + 3;
}
} else {
this.xLabelWidth = 0;
this.xScalePaddingRight = this.padding;
this.xScalePaddingLeft = this.padding;
}
},
});
Chart.types.Line.extend({
name: "MyLine",
initialize: function(data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
buildScale: function(labels) {
var self = this;
var dataTotal = function() {
var values = [];
self.eachPoints(function(point) {
values.push(point.value);
});
return values;
};
var scaleOptions = {
templateString: this.options.scaleLabel,
height: this.chart.height,
width: this.chart.width,
ctx: this.chart.ctx,
textColor: this.options.scaleFontColor,
offsetGridLines: this.options.offsetGridLines,
fontSize: this.options.scaleFontSize,
fontStyle: this.options.scaleFontStyle,
fontFamily: this.options.scaleFontFamily,
valuesCount: labels.length,
beginAtZero: this.options.scaleBeginAtZero,
integersOnly: this.options.scaleIntegersOnly,
calculateYRange: function(currentHeight) {
var updatedRanges = helpers.calculateScaleRange(
dataTotal(),
currentHeight,
this.fontSize,
this.beginAtZero,
this.integersOnly
);
helpers.extend(this, updatedRanges);
},
xLabels: labels,
font: helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
lineWidth: this.options.scaleLineWidth,
lineColor: this.options.scaleLineColor,
showHorizontalLines: this.options.scaleShowHorizontalLines,
showVerticalLines: this.options.scaleShowVerticalLines,
gridLineWidth: (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
showLabels: this.options.scaleShowLabels,
display: this.options.showScale,
overrideRotation: this.options.overrideRotation,
};
if (this.options.scaleOverride) {
helpers.extend(scaleOptions, {
calculateYRange: helpers.noop,
steps: this.options.scaleSteps,
stepValue: this.options.scaleStepWidth,
min: this.options.scaleStartValue,
max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
});
}
this.scale = new Chart.MyScale(scaleOptions);
},
});
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(20,20,220,0.2)",
strokeColor: "rgba(20,20,220,1)",
pointColor: "rgba(20,20,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(20,20,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(120,120,120,0.2)",
strokeColor: "rgba(120,220,120,1)",
pointColor: "rgba(120,120,120,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(120,120,120,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).MyLine(barChartData, {
overrideRotation: 90
});
}
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="canvas" height="150" width="300"></canvas>

Here's a slightly more hackier version (Quince's answer is better - the following may break if a future implementation of Chart.js does calculateXLabelRotation differently)
The label rotation is calculated by progressively rotating the labels so that they fit between the vertical grid lines - the space between them is calculated using scale.calculateX(1) - scale.calculateX(0). We jump in at the right point to force the result of this calculation to be 0 (by making scale.calculateX return the same value) - this in turn forces the rotation to progress to it's maximum (i.e. 90 degrees)
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var scale = this.scale;
var originalCalculateXLabelRotation = scale.calculateXLabelRotation;
var originalXScalePaddingLeft = scale.xScalePaddingLeft;
scale.calculateXLabelRotation = function () {
var originalCalculateX = scale.calculateX;
scale.calculateX = function () {
return 0;
}
originalCalculateXLabelRotation.apply(this, arguments);
scale.xScalePaddingLeft = originalXScalePaddingLeft;
scale.calculateX = originalCalculateX;
}
this.scale.fit();
}
});
and then
...
new Chart(ctx).LineAlt(data);
Fiddle - http://jsfiddle.net/gc5gdg7e/

Chart.js remove dataset from tooltip [duplicate]

I'm trying to make a Graph which has to show the Account movement from each Customer.
What I'm trying to do
I've tree lines ;
First line : The minimum balance, if the customer has less than the min. balance, his balance will auto load from his bank account.
Second Line : The current balance
Third Line: The maximum balance : If the customer has more than the max. balance he will become the difference from the system on his bank account.
My Problem
Link to the picture : chartjs tooltip problem
As you see in the tooltip are the all 3 values. The values of the straight lines are irrelevant for the customer because the Limits (max and min are setted from the customer his own) .

To achieve this you can extend the line graph to add an option to show/hide tool-tips on a per dataset basses. The annoying thing is there are only a few changes but whole methods have to be overridden to get the changes in there so the below looks like a lot but its basically 3 changes to the following methods
Initialize - added option to store showTooltip option in each point
getPointsAtEvent - added check to make sure we want to disaply a tool tip when getting points
showTooltip - added check again to make sure we want to dispaly a tool tip
to then use it the chart is set up the same but instead you make it a LineTooltip (thats what i have called the extended chart) and pass anextra option in the datasets call showToolip.
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
showTooltip: false, //NEW OPTION DON"T NEED TO INCLUDE IT IF YOU WANT TO DISPLAY BUT WON"T HURT IF YOU DO
data: [15, 10, 10, 10, 10, 10, 10]
}, {
label: "My second dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
showTooltip: false, //NEW OPTION DON"T NEED TO INCLUDE IT IF YOU WANT TO DISPLAY BUT WON"T HURT IF YOU DO
data: [100, 100, 100, 100, 100, 100, 100]
}, {
label: "My third dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
i have added bigger comment banners in the below code to try and highlight where the changes got made. I have also added this feature to my fork of chartjs as this could be useful to more people https://github.com/leighquince/Chart.js, using this you can just use a normal line chart and add the showTooltip
Below is the example of extending the Line into a custom chart to include this feature, ive called in LineTooltip as but could be called anything you like that.
Chart.types.Line.extend({
name: "LineTooltip",
/*
* we have to add one item in the init so need to rewrite it again here with the one edit
*/
initialize: function(data) {
//have to get the helpers as we are using this outside chart where it was declared
var helpers = Chart.helpers;
//Declare the extension of the default point, to cater for the options passed in to the constructor
this.PointClass = Chart.Point.extend({
strokeWidth: this.options.pointDotStrokeWidth,
radius: this.options.pointDotRadius,
display: this.options.pointDot,
hitDetectionRadius: this.options.pointHitDetectionRadius,
ctx: this.chart.ctx,
inRange: function(mouseX) {
return (Math.pow(mouseX - this.x, 2) < Math.pow(this.radius + this.hitDetectionRadius, 2));
}
});
this.datasets = [];
//Set up tooltip events on the chart
if (this.options.showTooltips) {
helpers.bindEvents(this, this.options.tooltipEvents, function(evt) {
var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
this.eachPoints(function(point) {
point.restore(['fillColor', 'strokeColor']);
});
helpers.each(activePoints, function(activePoint) {
activePoint.fillColor = activePoint.highlightFill;
activePoint.strokeColor = activePoint.highlightStroke;
});
this.showTooltip(activePoints);
});
}
//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(data.datasets, function(dataset) {
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
pointColor: dataset.pointColor,
pointStrokeColor: dataset.pointStrokeColor,
showTooltip: dataset.showTooltip,
points: []
};
this.datasets.push(datasetObject);
helpers.each(dataset.data, function(dataPoint, index) {
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.points.push(new this.PointClass({
/*
* set wether to show the tooltip or not, left this as being able to be undfined
* and default to true
*/
showTooltip: dataset.showTooltip === undefined ? true : dataset.showTooltip,
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.pointStrokeColor,
fillColor: dataset.pointColor,
highlightFill: dataset.pointHighlightFill || dataset.pointColor,
highlightStroke: dataset.pointHighlightStroke || dataset.pointStrokeColor
}));
}, this);
this.buildScale(data.labels);
this.eachPoints(function(point, index) {
helpers.extend(point, {
x: this.scale.calculateX(index),
y: this.scale.endPoint
});
point.save();
}, this);
}, this);
this.render();
},
/*
* need to edit how points at event works so it only uses points that we want to show the tool tip for
*/
getPointsAtEvent: function(e) {
//have to get the helpers as we are using this outside chart where it was declared
var helpers = Chart.helpers;
var pointsArray = [],
eventPosition = helpers.getRelativePosition(e);
helpers.each(this.datasets, function(dataset) {
helpers.each(dataset.points, function(point) {
if (point.inRange(eventPosition.x, eventPosition.y) && point.showTooltip) pointsArray.push(point);
});
}, this);
return pointsArray;
},
/*
* also need to change how the core showTooltip functions as otherwise, it trys to be helpful
* and grab any points it thinks also need to be displayed
*/
showTooltip: function(ChartElements, forceRedraw) {
//have to get the helpers as we are using this outside chart where it was declared
var helpers = Chart.helpers;
var each = helpers.each;
var indexOf = helpers.indexOf;
var min = helpers.min;
var max = helpers.min;
// Only redraw the chart if we've actually changed what we're hovering on.
if (typeof this.activeElements === 'undefined') this.activeElements = [];
var isChanged = (function(Elements) {
var changed = false;
if (Elements.length !== this.activeElements.length) {
changed = true;
return changed;
}
each(Elements, function(element, index) {
if (element !== this.activeElements[index]) {
changed = true;
}
}, this);
return changed;
}).call(this, ChartElements);
if (!isChanged && !forceRedraw) {
return;
} else {
this.activeElements = ChartElements;
}
this.draw();
if (ChartElements.length > 0) {
// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
if (this.datasets && this.datasets.length > 1) {
var dataArray,
dataIndex;
for (var i = this.datasets.length - 1; i >= 0; i--) {
dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
dataIndex = indexOf(dataArray, ChartElements[0]);
if (dataIndex !== -1) {
break;
}
}
var tooltipLabels = [],
tooltipColors = [],
medianPosition = (function(index) {
// Get all the points at that particular index
var Elements = [],
dataCollection,
xPositions = [],
yPositions = [],
xMax,
yMax,
xMin,
yMin;
helpers.each(this.datasets, function(dataset) {
dataCollection = dataset.points || dataset.bars || dataset.segments;
/*
*check to make sure we want to show the point
*/
if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue() && (dataCollection[dataIndex].showTooltip === undefined || dataCollection[dataIndex].showTooltip)) {
Elements.push(dataCollection[dataIndex]);
}
});
helpers.each(Elements, function(element) {
xPositions.push(element.x);
yPositions.push(element.y);
//Include any colour information about the element
tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
tooltipColors.push({
fill: element._saved.fillColor || element.fillColor,
stroke: element._saved.strokeColor || element.strokeColor
});
}, this);
yMin = min(yPositions);
yMax = max(yPositions);
xMin = min(xPositions);
xMax = max(xPositions);
return {
x: (xMin > this.chart.width / 2) ? xMin : xMax,
y: (yMin + yMax) / 2
};
}).call(this, dataIndex);
new Chart.MultiTooltip({
x: medianPosition.x,
y: medianPosition.y,
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
xOffset: this.options.tooltipXOffset,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
titleTextColor: this.options.tooltipTitleFontColor,
titleFontFamily: this.options.tooltipTitleFontFamily,
titleFontStyle: this.options.tooltipTitleFontStyle,
titleFontSize: this.options.tooltipTitleFontSize,
cornerRadius: this.options.tooltipCornerRadius,
labels: tooltipLabels,
legendColors: tooltipColors,
legendColorBackground: this.options.multiTooltipKeyBackground,
title: ChartElements[0].label,
chart: this.chart,
ctx: this.chart.ctx
}).draw();
} else {
each(ChartElements, function(Element) {
var tooltipPosition = Element.tooltipPosition();
new Chart.Tooltip({
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
caretHeight: this.options.tooltipCaretSize,
cornerRadius: this.options.tooltipCornerRadius,
text: template(this.options.tooltipTemplate, Element),
chart: this.chart
}).draw();
}, this);
}
}
return this;
},
});
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
showTooltip: false, //TO USE JUST ADD THIS NEW OPTION ONLY REALLY NEEDS TO PRESENT IF SETTING TO FALSE
data: [15, 10, 10, 10, 10, 10, 10]
}, {
label: "My second dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
showTooltip: false, //TO USE JUST ADD THIS NEW OPTION ONLY REALLY NEEDS TO PRESENT IF SETTING TO FALSE
data: [100, 100, 100, 100, 100, 100, 100]
}, {
label: "My third dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var myBarChart = new Chart(ctx).LineTooltip(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="chart" width="600px"></canvas>
and a fiddle if you find that easy to view http://jsfiddle.net/leighking2/1Lammwpt/

Different labels in tooltip with chartjs

I am making a radar chart with chartjs. The labels on the side of the radar I have given numbers (so the dataset Labels are numbers, 1 to 10). In the tooltip I do not want to these numbers, but a text linked to it (the text the number refers to). These are in a difrent array.
Is there a way to do this?
At the moment I have the following code:
$scope.drawGraph = function() {
radarOptions = {
scaleShowLabels : false,
scaleFontSize: 10,
pointLabelFontSize : 14,
scaleBeginAtZero: true,
showScale: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
showTooltips: true,
customTooltips: false,
tooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value + '%'%>"
};
var tempComp = []
for (var i = 0; i < $scope.competencesDB.length; i++) {
tempComp.push({
number: i + 1,
competence: $scope.competencesDB[i]
})
}
var tempLabels = [];
var tempData = [];
var tempName = [];
for (var i = 0; i < tempComp.length; i++) {
// console.log($scope.competencesDB[i])
tempName.push(tempComp[i].competence.name)
tempLabels.push(tempComp[i].number);
if (tempComp[i].competence.progress.length === 0) {
tempData.push(0)
} else{
tempData.push(tempComp[i].competence.progress[tempComp[i].competence.progress.length -1].value);
}
}
radarData = {
//names : tempName
labels : tempLabels,
datasets : [
{
label: tempName,
fillColor : "rgba(173, 209, 244, 0.54)",
strokeColor : "rgba(49, 137, 225, 0.94)",
data : tempData
},
]
};
//Get the context of the Radar Chart canvas element we want to select
var ctx = document.getElementById("radarChart").getContext("2d");
// Create the Radar Chart
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);
}
I think I need to change something in the following part:
tooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value + '%'%>"
But I don't know how this part of the code works. Can I but some kind of forloop in this to loop through the second datasetLabel part?
Thanks!

You can do this using a function instead of a template string. As you guessed you need to figure out the name from the number.
Here is a generic sample
var numberNames = [
{ number: 1, name: "Eating" },
{ number: 2, name: "Drinking" },
{ number: 3, name: "Sleeping" },
{ number: 4, name: "Designing" },
{ number: 8, name: "Coding" },
{ number: 9, name: "Cycling" },
{ number: 10, name: "Running" }
];
var data = {
labels: numberNames.map(function(e) { return e.number }),
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 9, 10, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Radar(data, {
tooltipTemplate: function (valueObject) {
return numberNames.filter(function (e) { return e.number === valueObject.label })[0].name + ': ' + valueObject.value;
}
});
I used numberNames but you should be able to replace that with tempComp (after adjusting the labels property and the tooltipTemplate function body slightly).
Fiddle - http://jsfiddle.net/80wdhbwo/

Lightswitch HTML custom control show only once

I've a LS project with one Custom Control where I render a chart with chartjs. The first time I load the page everything is ok, but if I move to another page and then come back the custom control is not rendered anymore (the code is called but nothing appear). I have to press F5 everytime I want to see it!
How can I fix this?
UPDATE:
I've notice that if I set a global variable, when I come back to the screen the variable is not reinizialized .Also another page containing the jquery-week calendar has the same issue. When I navigate away from a screen and later come back I load another instance of the "screen" or only get the old one, with all the stuff already loaded?
here the code
/// <reference path="~/GeneratedArtifacts/viewModel.js" />
function updateGraphs(chart, query, inizio, fine) {
var last = 0;
for (var i = inizio; i <= fine; i.addDays(1)) {
query(i).execute().then(function (res) {
try {
if (chart.datasets[0].points.length > 25)
chart.removeData();
var date = new Date(inizio.valueOf()).addDays(last++);
var str = format_2digit(date.getDate()) + "/" + format_2digit(date.getMonth() + 1) + "/" + date.getFullYear();
chart.addData([res.results.length], last % 5 == 0 ? str : "");
}
catch (e) { alert(e); }
});
}
}
myapp.Home.created = function (screen) {
var now = new Date();
var month = now.getMonth();
var year = now.getFullYear();
screen.GraficoInizio = new Date(year, month, 1);
screen.GraficoFine = new Date(year, month + 1, 0);
};
myapp.Home.GraficoFine_postRender = function (element, contentItem) {
contentItem.dataBind("screen.GraficoInizio", function (value) {
var month = contentItem.screen.GraficoInizio.getMonth();
var year = contentItem.screen.GraficoInizio.getFullYear();
contentItem.value = new Date(year, month + 1, 0);
});
};
myapp.Home.GraficoClienti_render = function (element, contentItem) {
// creo il grafico
$(element).append("<canvas id='chartClienti' width='500px' height='300px' />");
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};
myapp.Home.StampaQRCode_execute = function (screen) {
var popup = window.open("../QRCode.aspx");
popup.focus();
};

Lightswitch does not remove (it hides) html elements from page when you navigate to another page. -> That's how the "Back Button" Works, it shows/set visible the "old page".
When you navigate back to the page in page source you will be able to find more than one "chartClienti" element.
One possible solution is to remove the element if it already exists:
myapp.Home.GraficoClienti_render = function (element, contentItem) {
// creo il grafico
var existedChart = $('#chartClienti');
//element exists if it's length is more than 0
if (existedChart.length > 0) {
existedChart.remove();
}
$(element).append("<canvas id='chartClienti' width='500px' height='300px' />");
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};
Better solution would be following:
A) getting the all elements with that id and updating the latest.
B) give unique id each time you render your control (autoincrement by one: chartClienti0, chartClienti1, ... chartClientiN)

var globalVariableForchartClienti;
myapp.Home.GraficoClienti_render = function (element, contentItem) {
// creo il grafico
var chartClientiElementId = 'chartClienti_' + Math.floor((Math.random() * 999999) + 1);
$(element).append("<canvas id='" + chartClientiElementId + "' width='500px' height='300px' />");
//You can use "globalVariableForchartClienti" to access custom element in any other function
globalVariableForchartClienti = chartClientiElementId;
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};

Develop Reference

JavaScript is the programming language of the Web.

Chartjs line graph dataset with offset - javascript

How would one enter datasets with an offset into Chart.js, so first x values will not get drawn? e.g I cannot seem to wrap my head around it :/

Related

Separating results in chartjs line chart

Chart Js Change Label orientation on x-Axis for Line Charts

Chart.js remove dataset from tooltip [duplicate]

Different labels in tooltip with chartjs

Lightswitch HTML custom control show only once

Categories

Resources