We are using Chartjs to plot the charts ,However there is no to give the x-axis titles,There is a solution for y-Axis title in here , But for x-Axis I could add the x axis name but could not create the space below the chart to properly place it , using y as this.chart.height overlapped the text with x axis title.
I have looked the chartjs v2.0 but it also does not have support for x-Axis title.
We set the height of the chart depending on how much height we want for the x axis label and then write in that space.
We don't have to do anything in the draw override because the canvas clearing too happens based on the height (that we adjusted)
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
this.chart.height -= 30;
Chart.types.Line.prototype.initialize.apply(this, arguments);
var ctx = this.chart.ctx;
ctx.save();
// text alignment and color
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillStyle = this.options.scaleFontColor;
// position
var x = this.chart.width / 2;
var y = this.chart.height + 15 + 5;
// change origin
ctx.translate(x, y)
ctx.fillText("My x axis label", 0, 0);
ctx.restore();
}
});
and then
...
new Chart(ctx).LineAlt(data);
Fiddle - http://jsfiddle.net/ct2h2wde/
Related
For a project I made something in chartjs that looked something to this: https://jsfiddle.net/ethernetz/e50fn31m/2/
I had to do some digging around on the internet to get a number to show up in the middle of the doughnut graph, but that was exactly what I wanted. Then I wanted to make a second doughnut graph, which made the project looks something like this: https://jsfiddle.net/ethernetz/4uw1ksu1/
As you can see, the "60" from the completion graph shows up on top of the "40" from the incompletion graph and vice versa.
I suspect it has to do with me never specifying what graph I want to edit here:
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
...but I don't know how to fix it. Any help would be appreciated.
Change the following line of code in your plugin :
var text = 60;
to this :
var text = chart.id == 0 ? 60 : 40;
basically, when a chart is created, it is assigned an id (0 based). so you need to set the text based on that chart-id.
also, there's no need to add two separate plugins, as you are creating a global plugin, which will be applied to all of your charts.
Here is the working example on JSFiddle
use only one "chart.pluginService.register" for all charts, because it subscribes to the chart class, so mychart and mychart2 belong to chart class, then don't use the callback "chart"... use mychart and mychart2 instead of callback to recognize each chart registered.
new code:
var charts = [{
current: myChart
, text: 60
}, {
current: myChart2
, text: 40
}];
Chart.pluginService.register({
beforeDraw: function(chart) {
for (var iterator of charts) {
var width = iterator.current.chart.width,
height = iterator.current.chart.height,
ctx = iterator.current.chart.ctx;
//ctx.clearRect(0, 0, width, height);
//ctx.restore(); dont clear, this delete the previous chart, drawing only text
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em lato";
ctx.fillStyle = "rgba(0,0,0, 0.85)"
ctx.textBaseline = "middle";
var text = iterator.text,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2.5;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
});
updated jsfiddle: https://jsfiddle.net/4uw1ksu1/2/
is there any way to get the coordinates for the labels in the radar chart?
I'm trying to put images instead of text in the labels area.
You can calculate it using the scale property. Here is something that draws a blue circle at those points after the animation completes.
onAnimationComplete: function () {
for (var i = 0; i < this.scale.valuesCount; i++) {
// get the poitn position
var pointLabelPosition = this.scale.getPointPosition(i, this.scale.calculateCenterOffset(this.scale.max) + 5);
// draw a circle at that point
this.chart.ctx.beginPath();
this.chart.ctx.arc(pointLabelPosition.x, pointLabelPosition.y, 5, 0, 2 * Math.PI, false);
this.chart.ctx.fillStyle = '#77e';
this.chart.ctx.fill();
this.chart.ctx.stroke();
}
}
Fiddle - http://jsfiddle.net/1jgmbyb7/
Too much code to paste here so....
Please see JS Fiddle at http://jsfiddle.net/1a2s35m2/ for current code.
I am attempting to create a horizontal bar chart using flot. As you will see from the Fiddle, this works fine but I want to display the values of the bars within the bars themselves and not as labels in the Y Axis, as in the picture below...
I have attempted to use the "labels" plugin and also the barnumbers plugin but these don't seem to work. (Barnumbers comes close but displays 0 1 2 3 as the values.
Any ideas?
I'm really starting to sound like a broken record on here, but as your charts become really complicated forget the plugins and do it yourself.
Here's modified code from my links above catered for how you drew your plots:
// after initial plot draw, then loop the data, add the labels
// I'm drawing these directly on the canvas, NO HTML DIVS!
// code is un-necessarily verbose for demonstration purposes
var ctx = somePlot.getCanvas().getContext("2d"); // get the context
var allSeries = somePlot.getData(); // get your series data
var xaxis = somePlot.getXAxes()[0]; // xAxis
var yaxis = somePlot.getYAxes()[0]; // yAxis
var offset = somePlot.getPlotOffset(); // plots offset
ctx.font = "12px 'Segoe UI'"; // set a pretty label font
ctx.fillStyle = "black";
for (var i = 0; i < allSeries.length; i++){
var series = allSeries[i];
var dataPoint = series.datapoints.points; // one point per series
var x = dataPoint[0];
var y = dataPoint[1];
var text = x + '%';
var metrics = ctx.measureText(text);
var xPos = xaxis.p2c(x)+offset.left - metrics.width; // place at end of bar
var yPos = yaxis.p2c(y) + offset.top - 2;
ctx.fillText(text, xPos, yPos);
}
Updated fiddle.
I'm plotting a graph on a canvas and having trouble to draw the grid of the plot underneath the graph. My data points are drawn as rectangles (fillRect). When I first draw the graph and then draw the grid it works as expected, but since the grid is on the graph it doesnt look good. But when I draw the grid first and then plot the graph, all the grids disappear underneath.
I draw my plots as follows:
var plots = document.getElementsByClassName("PlotCanvas");
for (var x=0; x < tokens.length; x++)
{
var canvas = plots[x];
canvas.width = arrayOfArrays[x].length;
var context = canvas.getContext("2d");
for(var point=1; point<arrayOfArrays[x].length; point++)
{
context.fillRect(point, arrayOfArrays[x][point],...);
}
}
Then draw the grids as:
function DrawGrids(plots)
{
for(var count=0; count<plots.length; count++)
{
var ctx = plots[count].getContext("2d");
ctx.beginPath();
for (var x = 0.5; x < plots[count].width; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, plots[count].height);
}
for (var y = 0.5; y < plots[count].height; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(plots[count].width, y);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
}
}
Could someone suggest me how I can draw the grid underneath the plot. Or how to draw the graph such that it doesn't draw on the whole canvas thus disappearing the grid drawn earlier.
Thank you.
Use ctx.globalCompositeOperation="destination-over" to draw your grid behind your plots!
// draw your plots here
// save the context
ctx.save();
// set compositing to "destination-over"
// New drawings are drawn behind the existing canvas content.
ctx.globalCompositeOperation = "destination-over";
// draw your grids behind your plots!
DrawGrids();
// restore the context
ctx.restore();
I need to draw vertical and horizontal rectangle / bands (like in Gantt charts) on the HTML 5 / JavaScript Tee charts.
I could draw a rectangle using the Bar series as below but I want the rectangle to float on a particular XY cor-ordinate rather standing from the x axis.
var series1 = new Tee.Bar();
series1.data.values = [30000];
//alert(" openValues[y] "+ openValues[y] + " closeValues[y] "+ closeValues[y] );
series1.data.x = [ (openValues[y] + closeValues[y]) /2 ];
series1.format.shadow.visible = false;
series1.format.lineCap = "round";
series1.format.stroke.fill = "#D3D3D3";
series1.format.stroke.size = .5;
series1.colorEach = "auto";
series1.format.join = "round";
series1.format.cap = "square";
series1.format.fill="#F8F8FF";
series1.barSize=100000;
//series1.format.transparent =1;
series1.color = "silver";
series1.marks.visible = false;
//series1.hover.shadow =false;
series1.hover.stroke.size =.01;
Chart1.addSeries(series1);
Is it possible to just draw a rectangle using HTML 5 / Javascript Teecharts. I want to to draw rectangles like in gantt chart with specific x1,y1,x2 and y2 values.
I tried using the Format Object in Teecharts but it didn't help
Chart1.panel.format.rectPath(20,20,30,40);
To draw simple rectangle using html5...
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
};
here is example link for gantt chart using html5
http://www.eecg.toronto.edu/~brousse1/Libraries/RGraph/docs/gantt.html
The next TeeChart Javascript v1.1 will incude the Gantt Series. Here it is the demo:
http://www.steema.us/files/jscript/demos/series/gantt/gantt.htm
We'll be glad to hear any comment about it.
Steema Support Central