For an project i need to realise an chart with two circles. It need to looks like this one:
Is there an Jquery solution that support this? I already tried with Jqplot but with that plug-in i can't succeed to create something like this. I tried with this code:
// Create chart
var plot1 = $.jqplot('pie_chart', [s2,s1], {
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
startAngle: -90,
showDataLabels: true,
dataLabels: 'value',
innerDiameter :0,
padding:5,
highlightMouseOver:false
}
}
});
//Theming based in the rendered module items in the HTML
temp = {
seriesStyles: {seriesColors: array2},
grid: {
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
shadow: false
}
};
plot1.themeEngine.newTheme('uma', temp);
plot1.activateTheme('uma');
But the colors are for the inner and outer ring the same and create something like this:
The settings for the style are for the inner and outer ring. In my case i need to give the outer ring an different style.
Can i use this plug-in or do i need to use an other Jquery plug-in to realise my chart?
I found an solution wich works with d3.js (http://d3js.org/):
http://bl.ocks.org/mbostock/4063423
Works fine for me! Currently looks like this:
Related
I am using Chart.js via Angular Char. I have displayed all the tooltips in order to download a chart with the information displayed by creating a plugin.
The tooltips overlap, there doesn't seem to be any logic to distribute them so that they don't. Is there a way to do this?
Some of the plugin code. This isn't important to my question. The 'beforeRender' function creates a new Chart.Tooltip for each item in the dataset and afterDraw renders them:
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
The chart:
You can achieve some overlap solution using these snippets:
tooltips: {
mode: 'index',
intersect: false,
yPadding: 2,
xPadding: 2,
caretSize: 0,
borderWidth: 0,
}
I have made a highcharts graph which is intended to mirror the following:
I am using a triangle image as a marker for the graph, but by default, the marker is being situated in the center of the bar. I have tried to use the translation function
chart.series[1].data.graphic.translate(0, 20);
but this does not seem to be helping.
Here is my full code:
barchartFiddle
I was also wondering how I would add the percentage to the top of as it would move along with the bar.
Furthermore, I have tried using (multiple versions with different css properties + high zIndex - I will be listing the basic)
chart.renderer.text('blah',50,50).add();
to add the bottom 3 criteria, but for some odd reason, no text shows up.
Finally, I was wondering what logic to add in order to change the appearance of the text, depending on the data, to mirror the one shown in the image (Note difference between acceptable and healthy)
In your jsFiddle you have added your callback function in wrong place, when you will add it correctly it should work fine.
function(chart) {
var marker = chart.series[1].data[0];
marker.graphic.translate(-20, 0);
}
You can use dataLabels for showing the percent value near your marker.
dataLabels: {
enabled: true,
x: -5,
y: 10,
style: {
fontSize: 20
},
formatter: function() {
return this.y + '%'
}
}
Here you can find an example how it can work: http://jsfiddle.net/2TuCW/341/
I've come across a weird glitch with Highcharts export (to PNG, SVG etc). Essentially, when exporting, the datalabels on the chart become garbled, so that they duplicate like so:
I've tried changing the export image dimensions (even to match the original div size exactly) but I still have the same issue. The only thing I can think that might be affecting it is a custom formatter function (which shows the percentage after the total for each data point), but there's no manipulation of text size or anything. Any ideas?
This looks like a new problem in the export service.
I was able to work around it by disabling text shadows on the data labels. To do this, I added:
dataLabels: {
style: {
textShadow: ''
}
}
This is what worked for me. I disabled the textShadow inside the series
series: [
{
name:'Serie1',
data:[2027.15, 2027.15, 0.0],
dataLabels:{
enabled: true,
style: {textShadow: 'none'
}
}
]
I'm using Chart.js pie chart with tooltips which being cut for some reason.
Screenshot attached, didn't found any attribute/option to take care of it..
Is there anyway to take care of it?
Thanks!
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
This was determined to be a bug (evidently this bug hasn't yet been fixed)
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
I'm sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
- worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work
fine with bar charts.
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
Here is the code where I create my labels. The ratings is my actual data defined earlier:
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below.
Would be cool if you could choose which direction the tooltip appears compared to the mouse.
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }
I am using a theme, but i want to set background color around the chart to white or transparent or something.
I am trying this code:
var myTheme = dojox.charting.themes.PlotKit.orange;
myTheme.fill= "white";
chart10.setTheme(myTheme);
chart10.addPlot("default", {
type: "Pie",
labelOffset: -30,
radius: 150,
startAngle: 45,
font: "normal normal 10pt Tahoma",
fontColor: "black",
labelWiring: "grey",
labelStyle: "columns",
htmlLabels: true,
plotarea: { fill: "#000" }
});
But this code didn't works, none alteration is visible.
How can i set the color background ?
I believe you have to set both the chart.fill and plotarea.fill properties.
myTheme.chart.fill= "white";
myTheme.plotarea.fill = "white";
If you do console.debug(myTheme) you can inspect all the properties of the theme object. I usually have to experiment a little before I find the right ones.
I know this is old, but I had a situation where I was creating a pie chart and needed to change the background color behind the pie chart. I tried this solution, but it didn't work because I wasn't assigning a theme. I am creating it this way:
var pieChart = new Chart("myDIV");
pieChart.addPlot("default", {type: "Pie"});
pieChart.addSeries("Series A", pieString);
My pieString is where I am combining my variables together to form the pie. Basically, I concatenate a series of statements like this:
{y:200, tooltip: "layer", color:"red", text: "myText"}
I join those strings together and assign it to my pieString variable.
When I set up my chart, I got a standard white background behind it, which doesn't work well for my colored background since I wanted it to blend. There are two rectangles that make up the background. You can change the larger and furthest back one through pieChart.fill = "something", but the inner one didn't change.
The way I solved this for me is like this.
function ClearChartBackground() {
var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div
var firstRect = sumDivRects[0];
var secondRect = sumDivRects[1];
firstRect.attributes.item(1).value = "0";
secondRect.attributes.item(1).value = "0";
//this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent
}
As you can see in my photo, the original background was white, which doesn't work well on my gray background. After running my function, it is changed to transparent.
I am posting this because it took me a pretty long time to find out how to change this since I am having Dojo render it for me. I came across this post, but I didn't get much help from it since I wasn't doing a theme.
dojox.charting.themes.Claro.chart.fill = "#F1F1F0"
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0"
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0"
// Set the theme
chart.setTheme(dojox.charting.themes.Claro);
Using Jquery, you can do something like this:
$("#chartNode svg rect:eq(0)").attr("fill", "0");
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0");
So, basically you are accessing the element and changing the attribute manually. It is not very efficient way to do with, but it will do the trick.