I have been trying to create a pie chart. I saw there were many different libraries and I have tried Chart.js since it seems to be one of the preferred ones. I am not determined to keep using this library so I am open to any other solution to my problem.
I have two main problems:
Loading an image to a section.
Making the segments clickable so that a div appears according to the selected section.
This is my HTML
<body>
<canvas id="mycanvas"></canvas>
</body>
This is my JS
<script>
$(document).ready(function(){
var ctx = $("#mycanvas").get(0).getContext("2d");
var data = [
{
value: 51,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Corn Flower Blue"
},
{
value: 51,
color: "lightgreen",
highlight: "yellowgreen",
label: "Lightgreen"
},
{
value: 51,
color: "orange",
highlight: "darkorange",
label: "Orange"
},
{
value: 51,
color: "beige",
highlight: "bisque",
label: "Beige"
},
{
value: 51,
color: "aliceblue",
highlight: "cadetblue",
label: "AliceBlue"
},
{
value: 51,
color: "brown",
highlight: "chocolate",
label: "Brown"
},
{
value: 51,
color: "darkviolet",
highlight: "deeppink",
label: "DarkViolet"
}
];
var piechart = new Chart(ctx).Pie(data);
});
</script>
Is there any way I can just give a backgroundImage to each segment? Like going through each one of them and adding the attribute while also assigning a click event?
Thank you.
If you are open to commercial charting libraries, you may consider ChartDirector. It can load images into section labels and the labels can be put on the sections. It can also use images as a "wallpaper" to fill the sections. The sections can also be responded to mouse events (such as mouse clicked). Some example images are:
ChartDirector runs on the server side and supports multiple programming languages. For your reference, the code for the above charts in the ASP.NET framework in C#/VB are at:
VB / C# Icon Pie Chart
VB / C# Texture Donut Chart
Related
I currently have an implementation exactly like the answer shown in this answer which I am going to include here for clarity. If you run the code and hover between items in the legend, you will notice that if you hover over items quickly, the tooltip on the chart will not display.
Compare this to hovering over items in the Doughnut chart. The functionality is much faster.
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
plugins: {
legend: {
position: 'left',
onHover: (evt, item, legend) => {
const chart = legend.chart;
const tooltip = chart.tooltip;
const chartArea = chart.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: item.index,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
chart.update();
},
},
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
For those who have ended reached this same problem I would like to share my findings.
What ends up happening is the tooltip requires too much time for it to "disappear". There are different 'transitions', 'animation', or 'animations' that you can edit from the documentation, that will all do different things. I could not find out how to speed the "disappearing" up.
Instead, implement the example External tooltip that is given in the documentation for Chart.js. This tooltip, by default, does not have the same problems that the default tooltip has with appearing/disappearing.
Edit:
I would like to provide some things that I learned that may be useful for implementing the external tooltip.
The example external tooltip is coded so that it uses the logic of the original tooltip. This can be good, however if you want the functionality of hovering over the legend and showing the tooltip, I would advise adding a 'flag' to that is true if you are hovering over a label, and false otherwise. This should be added as a check to show the tooltip.
When you are setting active elements in the onHover of the legend and you have set 'external' to the externalTooltipHandler, you the externalTooltipHandler will automatically know to make items out of the active elements array. You should NOT call or pass the externalTooltipHandler, you should just set 'external: externalTooltipHandler'
Let me know if I can clarify anything here, I have spent more time than I would like on this tooltip.
I am using chart.js library for showing graphs. I am trying to render a Doughnut graph. When i pass the data, where the values are grater than 0, it is showing the graph as the fiddle link http://jsfiddle.net/rajeshwarpatlolla/9mby62w4/1/
Data i'm passing in this case is
{ value: 10, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 70, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 80, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }
My concern is, when the values passed are all zeros, then it is not showing anything, as in this fiddle http://jsfiddle.net/rajeshwarpatlolla/9mby62w4/3/. So the user will never know, what is missing in the page.
Data i'm passing in this case is
{ value: 0, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 0, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 0, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }
I would like to show something like the below image, when all the values are zeros.
How can we achieve this, can someone help me on this?
Show chart when all data values are zero
This can be achieved in a more elegant way using the following chart plugin :
Chart.plugins.register({
beforeInit: function(chart) {
var data = chart.data.datasets[0].data;
var isAllZero = data.reduce((a, b) => a + b) > 0 ? false : true;
if (!isAllZero) return;
// when all data values are zero...
chart.data.datasets[0].data = data.map((e, i) => i > 0 ? 0 : 1); //add one segment
chart.data.datasets[0].backgroundColor = '#d2dee2'; //change bg color
chart.data.datasets[0].borderWidth = 0; //no border
chart.options.tooltips = false; //disable tooltips
chart.options.legend.onClick = null; //disable legend click
}
});
* add this at the beginning of your script
note: make sure to use the latest version of ChartJS, which is 2.6.0 atm.
see - working example
You can add some CSS that gives a background to the canvas when chart is not drawn onto it:
canvas {
background: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.2) 64%, rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%);
}
Here's the fiddle: http://jsfiddle.net/Nisarg0/9mby62w4/7/
I would ideally apply the radial-gradient when I know for a fact that the values are zero - so the CSS selector would be something like canvas.no-data, and I would add the class .no-data to the canvas only when the values are zero.
I have a pie chart using chart.js 2.0. (jsfiddle)
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7],
}]
},
options: {
legend: {
display: true,
position: 'top'
}
}
});
I wanna to determine the best way to place legend's labels on top-left position and each label will be on a new line:
What is the simplest way to do this? Is it possible to do this out of the box?
After reading the documentation, I found generatelabels function which generates a legend that we can use and assign to an DOM element and stylize and etc... But it seems to me that this is a difficult way and I believe that there is easier.
This is a hack but a satisfactory and dirt-cheap one, until better support is provided officially. Just append a long string of spaces eg. " " to the end of each label string.
This should successfully force the labels to be formatted one-per-line. Ideally this should be used with align: 'start' (v2.9+)
I'm using Chart.js to draw charts on my web page.
I'm successfully able to draw pie chart by below codes:
var dataPiChart = [
{
value: 350,
color:"#F7464A",
highlight: "#FF5A5E",
label: "PHP"
},
{
value: 100,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "JavaScript"
},
{
value: 500,
color: "#FDB45C",
highlight: "#FFC870",
label: "HTML"
}
];
new Chart(document.getElementById('canvas').getContext("2d")).Pie(dataPiChart, {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
});
NOTE: Here canvas is my canvas id. It's working fine the way I want it. Now I have a value for each dataset which is the % complete value for ex: PHP - 20%, JavaScript- 30%, HTML - 20%. Now I want to make 20% of PHP segment in deep color and 80% which is not complete in fade color. Some how to distinguish how much % complete.
Create a new canvas object and position it under the actual chart. This new chart has the split data values. Make sure that the datapoints in your original chart that are split have a transparent background so that the underlying splits show through.
Preview
HTML
<div class="splitContainer">
<canvas id="canvas" height="300" width="800"></canvas>
<canvas class="canvasSplit" id="canvas2" height="300" width="800"></canvas>
</div>
CSS
.splitContainer {
position: relative;
}
.canvasSplit {
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
Script
var dataPiChart2 = [
{
value: 200,
color:"rgba(247, 70, 74, 0.6)",
label: "PHP1"
},
{
value: 150,
color:"rgba(247, 70, 74, 0.2)",
label: "PHP2"
},
// values that are not split remain as is
{
value: 100,
color: "#46BFBD",
label: "JavaScript"
},
{
value: 500,
color: "#FDB45C",
label: "HTML"
}
];
new Chart(document.getElementById('canvas2').getContext("2d")).Pie(dataPiChart2, {
segmentShowStroke: false
});
var dataPiChart = [
{
value: 350,
// transparent show the split shows through
color:"rgba(247, 70, 74, 0.2)",
highlight: "rgba(247, 70, 74, 0.7)",
label: "PHP"
},
Fiddle - http://jsfiddle.net/ww8qpdvw/
I am using kendo ui to make an area chart.
http://docs.telerik.com/kendo-ui/dataviz/chart/chart-types/area-charts
I am trying to add a stroke to each series but I am not seeing the results
here is my code:
series: [{
name: "vendor0",
data: v0,
color: "green",
stroke: {
color: "black",
width: 3
}
}, {
name: "Vendor 1",
data: v1
}, {
name: "Vendor 6",
data: v6
}],
Any advice on how to get that stroke, below is a screenshot of my work, and you can see how inline it says stroke = none
here is an image of desired effect: