Im using flotcharts.org to present some data on my site and I would like to turn the option points on or off(true or false) with a click, checkbox or a button. Here is a example when point is on(true): http://www.flotcharts.org/flot/examples/basic-options/index.html
Here's the simplest example I can code up:
var plot = null;
drawChart = function(showPoints) {
plot = $.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
lines: { show: true },
points: { show: showPoints }
}
});
}
drawChart(false);
$('#button').click(function(){
drawChart(!plot.getOptions().series.points.show );
});
Fiddle here
Related
I am working on a check website to validate some information of a users' website. I have a C3JS Chart configured with the following code:
window.onload = function () {
var debug = {{ env('APP_DEBUG') }}
console.log('Debug: ' + debug);
var chart = c3.generate({
data: {
columns: [
['alpha', 100],
['bravo', 100],
['charlie', 50],
['delta', 1],
],
colors: {
'alpha': '#3FB34F',
'bravo': '#3FB34F',
'charlie': '#E8B30C',
'delta': '#EB370F',
},
type: 'bar',
labels: true,
},
bar: {
space: 0.05
},
axis: {
rotated: true
},
});
This code results in the next chart
How can I add a label (like alpha, bravo...) in the green/orange/red bar instead of having them on the bottom of the chart?
I do not have a solution ready but I could think of two possible solutions.
You should be able to create a custom legend like described here: https://c3js.org/samples/legend_custom.html and then move these labels to the respective bars using translate/transform and D3js.
You could try to move the existing labels using D3 and translate/transform.
I am building a series of doughnut charts and I would like to remove the second item in the legend, so when I generate the legend with the generateLegend() method I just want to get the first value.
In the documentation there is an option that reads
Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data
But I can't find an example how to use it. In this Pen you can see the 2 labels in the middle, I just want to show the first label. I tried different approaches with no success. Just deleting the item doesn't work for me because the <li> item still there. Here's the code I am using.
$id = function(id) {
return document.getElementById(id);
};
var langDataEs = {
type: "doughnut",
data: {
datasets: [
{
data: [75, 25],
backgroundColor: ["#8dc63f", "#1d1d1d"]
}
],
labels: ["es", "learning"]
},
options: {
legend: {
display: false,
/* I would like to remove the item "learning" */
filter: function() {
},
},
responsive: true
}
};
langChartEs = new Chart($id("langEs").getContext("2d"), langDataEs);
$id("es").innerHTML = langChartEs.generateLegend();
Thanks in advance for any pointers.
The filter function works exactly like the Javascript's native Array.prototype.filter. So just return true if you want to show the legend at a particular index.
EDIT: The filter function would come inside the labels field.
legend: {
display: true,
labels: {
filter: function(legendItem, data) {
return legendItem.index != 1
}
}
}
I'm using chart.js for a web project and it's working pretty fine. However, I do have one question. I'm trying to connect a line graph with n data points to a list of n html divs. When the user hovers over data point 2, div 2 will be highlighted and a function is called. That does work. However, when the user unhovers data point 2, div 2 should change its style back to the default style.
My question is: How can I detect the mouseout event on data points?
That is how I define what happens when the data point is hovered.
myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
title: {
...
},
tooltips: {
enabled: true,
custom: function(tooltip) {
if (!tooltip) {
return;
}
if(tooltip.dataPoints != null) {
// here, the function that highlights the respective div is called, and it works fine
}
}
}
}
});
Is there such a thing for unhovering? I found out that there is a global events -> mousout option, but I don't figure out how to use it and I also think that it references the whole chart.
Thank you!
Not sure if this will help you, but I had a similar issue with stacked bar charts. I wanted to show values at the top of the bars, but I found that if the tooltips were open the values were written over the top of the tooltips, making both unreadable. I decided I wanted to show the values only if the tooltips were not showing (and were not rendered if a tooltip was open).
Turns out I can use the tooltip's opacity setting to determine if the tooltip is showing or not. This is very over-simplified, but this is what I came up with:
options: {
tooltips: {
custom: function( tooltip ) {
if( tooltip.opacity > 0 ) {
console.log( "Tooltip is showing" );
} else {
console.log( "Tooltip is hidden" );
}
return;
}
}
}
Having worked that out, I was then able to save a global variable that I could test elsewhere to see if the tooltip was showing.
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Chart.pluginService.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// 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();
});
chart.options.tooltips.enabled = false;
}
}
})
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
showAllTooltips: true
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<canvas id="canvas"></canvas>
I have created a donut chart. I want to display the tooltip always in the donut chart along with the legends.
I have followed this stack overflow question.
Question which explain the tooltip to be shown always
I have followed the answer and created a doughnut chart and tried to show the tooltip always.
it works fine, however it is not showing all the label, esp. when you have multiple data with 0 value.It just overwrite the label.
my label and values are
"Red" -0,
"Green" -0 &
"Yellow"-100
here is shows tooltip for "Yellow-100" and "Green-0", i think it is overwriting on top of "Red-0". How to show tooltip for "Red-0" and "Green-0" both together.
html:
<canvas id="canvas"></canvas>
Javascript:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [0, 0, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// 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();
});
chart.options.tooltips.enabled = false;
}
}
})
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
showAllTooltips: true
}
});
here is the link for jsfiddle.
doughnut chart 0 data tooltip is not shown for all
Chart Version : 2.1.0
please help.
you could use the tooltip callbacks in order to check which data is inside and place it on a different position.
For example you could return the red label in the title and the green one in the footer:
callbacks: {
title: function(tooltipItems, data) {
return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
},
label: function(tooltipItem, data) {
//remove body, show data only in title
},
footer: function(tooltipItems, data) {
return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
}
}
How can I colour the markers in a Highcharts Sparkline? Below has no effect, the markers all stay in their default blue colour.
var $sparkline = $('.sparkline'),
colors = ['red','green','blue','green','red'],
data = [10,20,30,40,50];
$sparkline.highcharts('SparkLine', {
series: [{
data: data
}],
plotOptions: {
series: {
marker: {
fillColor: {
formatter: function () {
return colors[this.x];
}
}
}
}
},
chart: {}
});
I don't know if there's a way to target that particular aspect of the chart, but the blue colour used is the default, first colour in the chart's main colors array (#7cb5ec). This is configured via the colors property (http://api.highcharts.com/highcharts#colors):
$sparkline.highcharts('SparkLine', {
colors: [ ... ],
series: [{
data: data
}],
...
});
To change it to red as an example, you'd simply place '#f00' as the first item in the array:
$sparkline.highcharts('SparkLine', {
colors: [ '#f00' ],
...
});
JSFiddle demo.