I have some troubles with customization of chartjs tooltips.
var animationComplete = function () {
var self = this;
Chart.helpers.each(self.datasets[0].points, function (point, index) {
Chart.helpers.each(self.datasets, function (dataset) {
new Chart.MultiTooltip({
x: point.x,
y: dataset.points[index].y,
xPadding: self.options.tooltipXPadding,
yPadding: self.options.tooltipYPadding,
xOffset: self.options.tooltipXOffset,
//yOffset: self.options.tooltipYOffset,
fillColor: self.options.tooltipFillColor,
textColor: self.options.tooltipFontColor,
fontFamily: self.options.tooltipFontFamily,
fontStyle: self.options.tooltipFontStyle,
fontSize: self.options.tooltipFontSize,
titleTextColor: self.options.tooltipTitleFontColor,
titleFontFamily: self.options.tooltipTitleFontFamily,
titleFontStyle: self.options.tooltipTitleFontStyle,
titleFontSize: self.options.tooltipTitleFontSize,
cornerRadius: self.options.tooltipCornerRadius,
labels: [dataset.points[index].value],
legendColors: [{
fill: dataset.strokeColor,
stroke: dataset.strokeColor
}],
legendColorBackground: self.options.multiTooltipKeyBackground,
//title: point.label,
//title: false,
title: '',
chart: self.chart,
ctx: self.chart.ctx,
custom: self.options.customTooltips
}).draw()
});
self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
self.chart.ctx.textAlign = 'center';
self.chart.ctx.textBaseline = "middle";
self.chart.ctx.fillStyle = "#666";
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint);
});
};
var ctx = document.getElementById("weeksChart").getContext("2d");
window.weeksChart = new Chart(ctx).Line(dataWeeks, {
responsive: true,
pointDot: true,
datasetStrokeWidth: 0.5,
bezierCurve : false,
scaleSteps: 2,
scaleLabel: "<%=value + '°'%>",
//tooltipTemplate: "<%= value %>",
tooltipTemplate: "<%= value + '°'%>",
tooltipFillColor: "transparent",
tooltipFontColor: "#000",
tooltipFontSize: 14,
tooltipXOffset: -10,
//tooltipYOffset: -100,
//tooltipYOffset: 100,
tooltipYPadding: 0,
showTooltips: true,
scaleShowLabels: false,
scaleFontColor: "transparent",
onAnimationComplete: function () {
animationComplete.apply(this)
},
tooltipEvents: []
});
Is it possible:
to remove colored squares?;
to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;
to move numbers higher on Y-axis? (i'd tried to add/change lines 30,78,79 in my Fiddle, but nothing works);
to remove Titles from tooltips? (everything what is works for me right now is to set title: '', on line 49. Line 48 doesn't work);
to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: "<%= value + '°'%>", but it doesn't work...)
Here is my Fiddle
1.to remove colored squares?;
2.to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;
4.to remove Titles from tooltips? (everything what is works for me right now is to set title: '', on line 49. Line 48 doesn't work);
5.to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: "<%= value + '°'%>", but it doesn't work...)
All of these can be done by just switching from the MultiTooltip constructor to a (single series) Tooltip constructor (the single series tooltip doesn't have a colored square or a title) and adjusting the options textColor and text like so
new Chart.Tooltip({
x: point.x,
y: dataset.points[index].y,
xPadding: self.options.tooltipXPadding,
yPadding: self.options.tooltipYPadding,
fillColor: self.options.tooltipFillColor,
textColor: dataset.strokeColor,
fontFamily: self.options.tooltipFontFamily,
fontStyle: self.options.tooltipFontStyle,
fontSize: self.options.tooltipFontSize,
caretHeight: self.options.tooltipCaretSize,
cornerRadius: self.options.tooltipCornerRadius,
cornerRadius: self.options.tooltipCornerRadius,
text: dataset.points[index].value + '°',
chart: self.chart,
custom: self.options.customTooltips
}).draw()
3.to move numbers higher on Y-axis? (i'd tried to add/change lines 30,78,79 in my Fiddle, but nothing works);
I assume you mean the x axis labels that are on the top (I couldn't see lines 78 and 79 on your fiddle, and 30 seemed unrelated).
If it's a slight change you could do it easily by adjusting the y parameter in the line that writes out the label.
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 2);
However, if you want to move it up a lot further, you need to make some space on the top of the chart or the top of your labels will be clipped off. You can do this by extending the chart and overriding scale.startPoint in the draw function.
So
Chart.types.Line.extend({
name: "LineAlt",
draw: function (data) {
this.scale.startPoint = 25;
Chart.types.Line.prototype.draw.apply(this, arguments);
}
});
and then using LineAlt instead of Line
window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {
will allow you to do
self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);
without clipping off the label
Fiddle - http://jsfiddle.net/kphmkL0e/
Related
I am trying to create a line graph, wherein if all the values for the particular series is zero then, I want the line to be drawn on the bottom over the x-axis line. But it seems like the line of the x-axis takes the preference than the series line. Is there any way to change that?
Below is my configuration:
xAxis: {
type: "datetime",
tickmarkPlacement: "on",
lineWidth: 10,
lineColor: 'red',
},
yAxis: {
min: 0,
minRange : 0.1,
title: {
text: ""
}
},
plotOptions: {
line: {
softThreshold: false
}
},
Example:
http://jsfiddle.net/shivajyothibalavikas/twxs7mL2/3
In the above example the axis line color is red and series line color is black. but red takes the preference. I want the black line to take the preference while displaying
It is not possible to move a series line above an axis line by options in Highcharts API. As a solution, you can use the Highcharts.SVGRenderer class and draw a custom line at the chart bottom.
chart: {
...,
events: {
render: function() {
const chart = this;
const x1 = chart.plotLeft;
const x2 = x1 + chart.plotWidth;
const y = chart.plotTop + chart.plotHeight;
if (!chart.customLine) {
chart.customLine = chart.renderer
.path().attr({
stroke: 'red',
'stroke-width': 10
}).add();
}
chart.customLine.attr({
d: ['M', x1, y, 'L', x2, y]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/70d6sg2o/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I have a line with one end at a fixed point that can be rotated or stretched by the user.
jsfiddle here
It seems that in fabricJS the only way to select a line/object for rotation is the little selection box in the middle. Also, a line is narrow so it is hard to select. Typically one must drag a rectangular selection box across the line to select it, then grab the unlabeled rotation box.
I want to simplify this to: click anywhere on the line and drag to rotate.
ideas?
thx.
code snippet:
var canvas = new fabric.Canvas("c", {stateful: true});
var line1 = new fabric.Line([ 100, 200, 330, 200 ], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
selectable: true,
evented: false,
minScaleLimit: 0.25,
lockRotation: false,
centeredRotation: false,
centeredScaling: false,
originX: "left", // origin of rotation/transformation.
originY: "bottom", // origin of rotation/transformation.
lockMovementX: true,
lockMovementY: true,
lockScalingFlip: true,
lockScalingX: false,
lockScalingY: false,
lockSkewingX: false,
lockSkewingY: false,
lockUniScaling: true
});
Here's one way to do what you need.
The idea is that on each scale event, we're going to rotate the line using fabric's internal fabric.canvas._rotateObject(), supplying it with current pointer's position. Then, immediately adjust the length of line to match the scale and reset the line's scale to 1.
This would be it, but while your example is relatively easy to do (the line is horizontal), it gets much trickier if you want to initialize a diagonal line. Imagine a line with [0, 0, 100, 100] as coordinates. This would render a rectangular 100x100 bounding box. You'd be able to rotate the line but the huge bounding box is obviously not something you want.
Because of that, we need to initialize the line as if it was rotated back to a horizontal position, then set an angle that it's supposed to have. To do that, we extend the built-in fabric.Line class and modify the constructor to make the calculations. And, since we already have new class, we're going to add the scale handler and default options into it as well. The constructor signature stays the same - new fabric.RotatingLine([x1, y1, x2, y2], options), where x1, y1 - fixed point, x2, y2 - draggable tip.
Lastly, we're changing some of the properties. E.g. evented: false was the reason you couldn't select the line on click.
Below is the snippet with more comments, just in case.
const canvas = new fabric.Canvas("c", {stateful: true})
fabric.RotatingLine = fabric.util.createClass(fabric.Line, {
minLength: 50, // we need to set this thing in px now
initialize: function (points, options) {
const a = new fabric.Point(points[0], points[1])
const b = new fabric.Point(points[2], points[3])
// find this line's vector
const vectorB = b.subtract(a)
// find angle between line's vector and x axis
let angleRad = Math.atan2(vectorB.y, vectorB.x)
if (angleRad < 0) {
angleRad = 2 * Math.PI + angleRad
}
const angleDeg = fabric.util.radiansToDegrees(angleRad)
// find initial horizontal position by rotating the tip back
const c = fabric.util.rotatePoint(b.clone(), a, -angleRad)
options = options || {}
// finally, initialize using transform points to make a horizontal line
this.callSuper('initialize', [a.x, a.y, c.x, c.y], {
noScaleCache: false, // false to force cache update while scaling (doesn't redraw parts of line otherwise)
selectable: true,
evented: true, // true because you want to select line on click
//minScaleLimit: 0.25, // has no effect now because we're resetting scale on each scale event
lockRotation: false,
hasRotatingPoint: false, // to disable rotation control
centeredRotation: false,
centeredScaling: false,
originX: "left", // origin of rotation/transformation.
originY: "bottom", // origin of rotation/transformation.
lockMovementX: true,
lockMovementY: true,
lockScalingFlip: true,
lockScalingX: false,
lockScalingY: false,
lockSkewingX: false,
lockSkewingY: false,
lockUniScaling: true,
...options,
angle: angleDeg // note that we use the calculated angle no matter what
})
this.setControlsVisibility({
tr: false,
tl: false,
bl: false,
mt: false, // middle top disable
mb: false, // midle bottom
ml: false, // middle left
mr: false, // I think you get it
})
this.on('scaling', function (e) {
// rotate to the pointer's x,y
this.canvas._rotateObject(e.pointer.x, e.pointer.y)
// while _rotateObject() tries to keep left/top at initial value,
// it sometimes fails because of rounding errors (?)
// so we need to do it manually again
this.set({left: this.x1, top: this.y1})
// calculate new length before resetting scale
const xOffset = (this.x2 - this.x1) * this.scaleX
const newLength = Math.max(this.minLength, xOffset)
// reset scaleX/scaleY and set new x coord for the tip point
this.set({
scaleX: 1,
scaleY: 1,
x2: this.x1 + newLength
})
})
}
})
const line1 = new fabric.RotatingLine([ 200, 200, 330, 200 ], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
});
const line2 = new fabric.RotatingLine([ 200, 200, 100, 100 ], {
fill: 'blue',
stroke: 'blue',
strokeWidth: 3,
});
canvas.add(line1, line2)
// Disables group selection.
canvas.on('selection:created', (e) => {
if(e.target.type === 'activeSelection') {
canvas.discardActiveObject();
} else {
//do nothing
}
})
// Keeps objects inside canvas. undos move/rotate/scale out of canvas.
canvas.on('object:modified', function (options) {
let obj = options.target;
let boundingRect = obj.getBoundingRect(true);
if (boundingRect.left < 0
|| boundingRect.top < 0
|| boundingRect.left + boundingRect.width > canvas.getWidth()
|| boundingRect.top + boundingRect.height > canvas.getHeight()) {
obj.top = obj._stateProperties.top;
obj.left = obj._stateProperties.left;
obj.angle = obj._stateProperties.angle;
obj.scaleX = obj._stateProperties.scaleX;
obj.scaleY = obj._stateProperties.scaleY;
obj.setCoords();
obj.saveState();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
<canvas id='c' width="500" height="400"></canvas>
I am using the line graph in Chart.js v1 stable, and I want to dynamically change the point location along with the ling thats attached to it, so like if I slide the point up using javascript, then the point attached to it moves too. Does anyone know how to do it?
Thanks
$(document).ready(function() {
var data = {
labels: ["Dec", "Jan", "Feb", "March", "April", "May", "June"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "#ed1b2e",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [-28, -48, -40, -19, -86, -27, -90]
}
]
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
bezierCurve: false
});
setTimeout(function() {
var len = myLineChart.datasets[0].points.length;
myLineChart.datasets[0].points[len-1].fillColor = "blue";
myLineChart.datasets[0].points[len-1].y = 250; // <---- doesn't work, it moves but then slides back to initial location
myLineChart.update();
}, 5000);
var g = myLineChart.datasets[0];
Chart.defaults.global = {
// Boolean - Whether to animate the chart
animation: true,
// Number - Number of animation steps
animationSteps: 60,
// String - Animation easing effect
// Possible effects are:
// [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
// easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
// easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
// easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
// easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
// easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
// easeOutElastic, easeInCubic]
animationEasing: "easeOutQuart",
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - If we want to override with a hard coded scale
scaleOverride: false,
// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: null,
// Number - The value jump in the hard coded scale
scaleStepWidth: null,
// Number - The scale starting value
scaleStartValue: null,
// String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
// Number - Pixel width of the scale line
scaleLineWidth: 1,
// Boolean - Whether to show labels on the scale
scaleShowLabels: true,
// Interpolated JS string - can access value
scaleLabel: "<%=value%>",
// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,
// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,
// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Scale label font size in pixels
scaleFontSize: 12,
// String - Scale label font weight style
scaleFontStyle: "normal",
// String - Scale label font colour
scaleFontColor: "#666",
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
customTooltips: false,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}
});
Use .value instead of .y i.e.
myLineChart.datasets[0].points[len - 1].value = 250
I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?
Here is my code
var chart = null;
barChart: function (data1, data2, data3, label) {
var data = {
labels: label,
datasets: [
{
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)",
data: data1
},
{
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: data2
},
{
fillColor: "rgba(0,255,0,0.3)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(0,255,0,0.3)",
data: data3
},
]
}
var cht = document.getElementById('exampleCanvas');
var ctx = cht.getContext('2d');
if (chart)
chart.destroy();
chart = new Chart(ctx).Bar(data);
}
Try this:
You can make changes globally using this code:
Chart.defaults.global = {
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}
Use this Link for reference
The new version of chart.js, version 2, is found here:
https://github.com/nnnick/Chart.js/releases
Version 2 adds tooltip callbacks:
Every tooltip callback (beforeTitle, title, afterTitle, etc..) accepts a string or an array. If an array is used, it will produce multiple lines. Tooltips now come with a lot more options for visual customization as well.
However, there is a fork of chart.js called chartNew.js, found here:
https://github.com/FVANCOP/ChartNew.js/
It adds several great enhancements to the venerable chart.js, including:
tooltip functions (when download/unzip, look in the Samples folder and look at annotateFunction.html. When hover over any point, you can do anything.)
passing an array of colors to a bar chart (instead of each bar in series having the same color)
putting text on the chart wherever you want it
many etceteras.
Note that chart.js has been greatly enhanced in version 2, but the new version is not fully backwards compatible (just changing to the v2 plugin broke my existing code) whereas chartNew.js will work with old code whilst extending capabilities.
I have used this, i've found it on stackoverflow, but i try hardly to find it again
<div id="chartjs-tooltip"></div>
var chartoptions =
{
customTooltips: function ( tooltip )
{
var tooltipEl = $( "#chartjs-tooltip" );
if ( !tooltip )
{
tooltipEl.css( {
opacity: 0
} );
return;
}
tooltipEl.removeClass( 'above below' );
tooltipEl.addClass( tooltip.yAlign );
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split( ":" );
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html( innerHtml );
tooltipEl.css( {
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle
} );
}
}
Link to where i got it: Chart.js: changing tooltip template
You can check for tooltip css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
tooltips:
{
bodyFontColor: "#000000", //#000000
bodyFontSize: 50,
bodyFontStyle: "bold",
bodyFontColor: '#FFFFFF',
bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
footerFontSize: 50,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if(tooltipItem.index == 0) {
return "<?php echo $data1;?>";
}
else if(tooltipItem.index == 1) {
return "<?php echo $data2;?>";
}
else if(tooltipItem.index == 2) {
return "<?php echo $data3;?>";
}
else {
return "<?php echo $data4; ?>";
}
},
},
},
It is very simple when you know where to put the option.
The answer is to add the custom option when you create the chart :
chart = new Chart(ctx).Bar(data, {"options goes here"} );
After you pass the data variable with the data info you can add custom options, so for example you want to change the size of the Title of the tooltip and you also want to put a light grey color in the title of the tooltip you would do something like that:
chart = new Chart(ctx).Bar(data, {
//Option for title font size in pixels
tooltipTitleFontSize: 14,
//Option for tooltip title color
tooltipTitleFontColor: "#eee"
});
Another way you can do is to create the set of options as a variable for organisation purposes and to be able to reuse it.
// Create a set of relevant options for you chart
var myoptions = {
scaleShowGridLines : false,
responsive : true,
scaleFontSize: 12,
pointDotRadius : 4,
scaleFontStyle: 14,
scaleLabel: "<%= ' ' + value%> %",
}
//Create the Chart
chart = new Chart(ctx).Bar(data, myoptions);
I hope it is clear now
Regards
I found this page to be helpful:
https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html
He shows where and how to define the function for your custom tooltip, as well as an example of the styling.
I had to modify the code to match my needs, but this is a great example on how to implement the custom tooltip feature.
Some things to note that threw me off at first:
1) The id in the style rules need to be modified to match your tooltip div. (this is obvious, but I didn't catch it at first)
2) tooltip.text will follow the format you set for 'tooltipTemplate' in your options, or the default tooltipTemplate set in chart.js
may be this can help you
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var xLabels = this.scale.xLabels
xLabels.forEach(function (label, i) {
if (i % 2 == 1)
xLabels[i] = label.substring(1, 4);
})
}
});
var data = {
labels: ["1/jan/08", "15/fab/08", "1/mar/08", "1/apr/08", "10/apr/08", "10/may/2008", "1/jun/2008"],
datasets: [{
label: "First dataset",
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: "Third dataset",
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 ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data);
// Chart.js replaces the base inRange function for Line points with a function that checks only the x coordinate
// we replace it with the original inRange fucntion (one that checks both x and y coordinates)
myChart.datasets.forEach(function(dataset) {
dataset.points.forEach(function(point) {
point.inRange = Chart.Point.prototype.inRange;
});
});
// Chart.js shows a multiTooltip based on the index if it detects that there are more than one datasets
// we override it to show a single tooltip for the inRange element
myChart.showTooltip = function(ChartElements, forceRedraw) {
// this clears out the existing canvas - the actual Chart.js library code is a bit more optimized with checks for whether active points have changed, etc.
this.draw();
// draw tooltip for active elements (if there is one)
Chart.helpers.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: Chart.helpers.template(this.options.tooltipTemplate, Element),
chart: this.chart,
custom: this.options.customTooltips
}).draw();
}, this);
};
http://jsfiddle.net/6cgo4opg/747/
I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru
I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/
Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.