I was using django and chartjs to render the charts. when I use legend onclick function hidding all the dataset, the y-axis will show like this while I want nothing to be shown, even the grid lines.
This is the example chart:
Is there any solution or proposal?
Without fully knowing exactly what you are wanting to show/hide, I put together an example that hides the x/y axes when all series are turned off. To do this I followed the instructions in their documentation about how write an onClick handler for the legend.
Here is the relevant code for that handler:
{
...
options: {
scales: {
yAxes: [{
display: true, // <-- Added to make sure property was in options to read
...
}],
xAxes: [{
display: true // <-- Added to make sure property was in options to read
}]
},
legend: {
onClick: function (e, legendItem) {
const index = legendItem.datasetIndex;
const ci = this.chart;
var meta = ci.getDatasetMeta(index);
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
/* Start: Custom code to handle the showing/hiding */
const allHidden = ci.data.datasets.every((dataSet, index) => ci.getDatasetMeta(index).hidden);
ci.options.scales.yAxes[0].display = !allHidden;
ci.options.scales.xAxes[0].display = !allHidden;
/* End: Custom code to handle the showing/hiding */
// We hid a dataset ... rerender the chart
ci.update();
}
}
}
});
I follow Daniel's proposal and rewrite the custom onClick function. Now it's working exactly as I expected.
//start
const allHidden = ci.data.datasets.every((dataSet, index) => ci.getDatasetMeta(index).hidden)
const rightAxisDataSetsAllHidden = ci.data.datasets.every((dataSet, i) => {
if (ci.getDatasetMeta(i).yAxisID === "rightAxis") {
if (ci.getDatasetMeta(i).hidden === null) {
return false}
else {
return true
}
}
else {
return true
}})
const leftAxisDataSetsAllHidden = ci.data.datasets.every((dataSet, i) => {
if (ci.getDatasetMeta(i).yAxisID === "leftAxis") {
if (ci.getDatasetMeta(i).hidden === null) {
return false
}
else {
return true
}
}
else {
return true
}})
if (ci.options.scales.yAxes.length != 1) {
ci.options.scales.yAxes[0].display = !leftAxisDataSetsAllHidden
ci.options.scales.yAxes[1].display = !rightAxisDataSetsAllHidden
}
else {
ci.options.scales.yAxes[0].display = !leftAxisDataSetsAllHidden;
}
ci.options.scales.xAxes[0].display = !allHidden;
//end
Related
I have embedded ember-cli-chart in my hbs file as
<div class="chart">
{{ember-chart type='line' data=data options=options}}
</div>
In my component file I have created an options property as
options: computed('metric', function() {
let opts = defaultOptions;
if (this.metric === 'height') {
opts.scales.yAxes = [{
ticks: {
callback: function(value, index, values) {
// code to return labels
}
}
}]
} else {
opts.scales.yAxes = [{
ticks: {
callback: function(item, index, items) {
// code to return labels
}
}
}]
}
return opts;
});
I want to display Y-Axis labels based on the current selected metric.
When first time chart loads it renders correct labels on y-Axis and if I change the metric then the same callback is getting used instead of the other one (in else part) and renders same labels but with updated data values.
Can anyone help on this?
Hmmm I don't know the addon or chart.js for the matter, but when looking at the source code for the ember-chart component, I see
didUpdateAttrs() {
this._super(...arguments);
this.updateChart();
},
updateChart() {
let chart = this.get('chart');
let data = this.get('data');
let options = this.get('options');
let animate = this.get('animate');
if (chart) {
chart.config.data = data;
chart.config.options = options;
if (animate) {
chart.update();
} else {
chart.update(0);
}
}
}
So, in order for chart.js to update, you need didUpdateAttrs to fire, which means in your case here that options itself needs to change. I don't know how you're creating defaultOptions, but assuming this reference never changes, there's no reason that didUpdateAttrs would fire since you aren't changing the reference to options (you're only changing child props of defaultOptions in the computed). I would suppose that:
import { assign } from '#ember/polyfills';
...
options: computed('metric', function() {
let opts = assign({}, defaultOptions);
if (this.metric === 'height') {
opts.scales.yAxes = [{
ticks: {
callback: function(value, index, values) {
// code to return labels
}
}
}]
} else {
opts.scales.yAxes = [{
ticks: {
callback: function(item, index, items) {
// code to return labels
}
}
}]
}
return opts;
})
would be enough to trigger the behavior you want since we always return a new object when a recomputation of options occurs.
Right now, the following command operates automatically. I am wondering how I can create a button that will enable the getUserMedia command, and subsequently display the text below.
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({
video:true, audio: true
},
function(stream) {
// returns true if any tracks have active state of true
var result = stream.getVideoTracks().some(function(track) {
return track.enabled && track.readyState === 'live';
});
if (!result) {
$('.abada').append('<h4>2000(works)</h4>');
} else {
$('.abada').append('<h4>2000(works)</h4>');
}
},
function(e) {
$('.abada').append('<h4>2001(does not work)</h4>');
});
}
The key here is to use an onclick function. So we can use:
onclick="function" as an attribute for the HTML tag,
var element = document.querySelector("#button");
element.addEventListener("click", function);,
element.onclick = function; are both acceptable in JavaScript,
var element = $("#button");
element.on("click", function);,
element.click(function); in jQuery.
Shown below:
Using jQuery:
$('#button').on("click", function () {
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true, audio: true
}, function(stream) {
// returns true if any tracks have active state of true
var result = stream.getVideoTracks().some(function(track) {
return track.enabled && track.readyState === 'live';
});
if (!result) {
$('.abada').append('<h4>2000(works)</h4>');
} else {
$('.abada').append('<h4>2000(works)</h4>');
}
}, function(e) { $('.abada').append('<h4>2001(does not work)</h4>');
});
);
HTML:
<button id="button">Click Me For Streaming</button>
There are solutions to using legend onClick to toggle on/off visibility of (all other) datasets on the clicked chart, but I needed a way to sync this toggle on multiple charts if they have the same label/legend. For example, I have 6 charts presenting different information about the same data. However, not all the charts have all the datasets. One may have 5 datasets, another has 3 and so on. And they may not show up in the same order either.
The goal was to be able to click a legend item on one chart, and that same item be toggled on all the charts.
Since I did not find an existing solution, I'm posting this.
To do this, I put all the charts in a global var and loop through them to match dataset by legendItem.text instead of legendItem.datasetindex, since the label may or may not exist or even be in the same index position on other charts.
Here's how I create/replace the multiple charts: https://stackoverflow.com/a/51882403/1181367
And here's the legend onClick toggle solution:
var config = {
type: type,
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
legend: {
position: 'right',
onClick: function (e, legendItem) {
var text = legendItem.text;
Object.keys(charts).forEach(function (id) {
// loop through the charts
var ci = charts[id].chart
var cindex = (function () {
var match = null;
ci.legend.legendItems.forEach(function (item) {
if (item.text == text) {
// get index for legend.text that matches clicked legend.text
match = item.datasetIndex;
}
});
return match;
})();
if (cindex !== null) {
// if there's a match
var alreadyHidden = (ci.getDatasetMeta(cindex).hidden === null) ? false : ci.getDatasetMeta(cindex).hidden;
ci.data.datasets.forEach(function (e, i) {
var meta = ci.getDatasetMeta(i);
if (i !== cindex) {
if (!alreadyHidden) {
meta.hidden = meta.hidden === null ? !meta.hidden : null;
} else if (meta.hidden === null) {
meta.hidden = true;
}
} else if (i === cindex) {
meta.hidden = null;
}
});
ci.update();
}
});
}
}
}
};
After using Chris's answer here https://stackoverflow.com/a/51920456/671140 I created a simplified solution.
var config = {
type: type,
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
legend: {
position: 'right',
onClick: function (e, legendItem) {
var text = legendItem.text;
Object.keys(charts).forEach(function (id) {
// loop through the charts
var ci = charts[id].chart
ci.legend.legendItems.forEach(function (item) {
if (item.text == text) {
ci.options.legend.onClick.call(chart.legend, null, item);
ci.update();
}
});
});
}
}
}
};
The benefit of using this solution is that it will call any custom onClick() handlers that have been added to any of the chart legends.
If anyone's looking for a way to sync a pie chart legend with a line chart legend, try this (it should also work just fine if the charts are the same type, too):
onClick: function(e, legendItem) {
// Save name of clicked label, for later comparison
var legendName = legendItem.text;
// Iterate through global charts array
Object.keys(myCharts).forEach(function(id) {
// Assign shorthand variable to address chart easier
var chrt = myCharts[id];
// Determine chart type
var chartType = chrt.config.type;
// Iterate through each legend in the chart
chrt.legend.legendItems.forEach(function(item) {
// If legend name matches clicked label
if (item.text == legendName) {
if (chartType == 'pie') { // If pie chart
if (chrt.getDatasetMeta(0).data[item.index].hidden === true) chrt.getDatasetMeta(0).data[item.index].hidden = false;
else if (chrt.getDatasetMeta(0).data[item.index].hidden === false) chrt.getDatasetMeta(0).data[item.index].hidden = true;
} else if (chartType == 'line') { // If line chart
if (chrt.getDatasetMeta(item.datasetIndex).hidden === true) chrt.getDatasetMeta(item.datasetIndex).hidden = null;
else if (chrt.getDatasetMeta(item.datasetIndex).hidden === null) chrt.getDatasetMeta(item.datasetIndex).hidden = true;
}
// Trigger chart update
chrt.update();
}
});
});
Place this onClick function in the legend section of the options, just like you can see in the other answers.
My line chart was a day-to-day trend, while the pie chart compared totals across the entire range.
The chart's labels must be identically named for this to work, of course.
Like the other solutions, you must store both charts in one, global variable, like:
window.myCharts['pieChart1']
window.myCharts['lineChart1']
Since hiding datasets, and getting their indexes within the whole dataset, is different depending on the chart type, this function will check the chart type and act accordingly.
Also notice that for pie charts, the "hidden" setting is either true or false, but for line charts, it's either true or null (thanks, chart.js).
I'm sure you can expand this for other chart types, but I've only bothered setting it up for 'line' and 'pie' charts.
If someone is looking for this, here is the working solution:
onClick: function (e, legendItem, legend) {
var text = legendItem.text;
Object.keys(charts).forEach(function (id) {
var ci = charts[id]
ci.legend.legendItems.forEach(function (item) {
if (item.text == text) {
if (ci.data.datasets[item.datasetIndex].hidden == true) {
ci.data.datasets[item.datasetIndex].hidden = false;
} else {
ci.data.datasets[item.datasetIndex].hidden = true;
}
}
});
ci.update();
});
}
I need help to put the number of the pie chart in the legend
Chart Image
If i hover the chart with mouse i can see the number relative to each item
i want to display it in the legend either
the important code so far:
var tempData = {
labels: Status,
datasets: [
{
label: "Status",
data: Qtd,
backgroundColor: randColor
},
]
};
var ctx = $("#pieStatus").get(0).getContext("2d");
var chartInstance = new Chart(ctx, {
type: 'pie',
data: tempData,
options: {
title: {
display: true,
fontsize: 14,
text: 'Total de Pedidos por Situação'
},
legend: {
display: true,
position: 'bottom',
},
responsive: false
}
});
"Qtd","randColor" are "var" already with values
You need to edit the generateLabels property in your options :
options: {
legend: {
labels: {
generateLabels: function(chart) {
// Here
}
}
}
}
Since it is quite a mess to create on your own a great template. I suggest using the same function as in the source code and then edit what is needed.
Here are a small jsFiddle, where you can see how it works (edited lines - from 38 - are commented), and its result :
Maybe this is a hacky solution, but for me seems simpler.
The filter parameter
ChartJS legend options have a filter parameter. This is a function that is called for each legend item, and that returns true/false whether you want to show this item in the legend or not.
filter has 2 arguments:
legendItem : The legend item to show/omit. Its properties are described here
data : The data object passed to the chart.
The hack
Since JS passes objects by reference, and filter is called for each legend item, then you can mutate the legendItem object to show the text that you want.
legend : {
labels: {
filter: (legendItem, data) => {
// First, retrieve the data corresponding to that label
const label = legendItem.text
const labelIndex = _.findIndex(data.labels, (labelName) => labelName === label) // I'm using lodash here
const qtd = data.datasets[0].data[labelIndex]
// Second, mutate the legendItem to include the new text
legendItem.text = `${legendItem.text} : ${qtd}`
// Third, the filter method expects a bool, so return true to show the modified legendItem in the legend
return true
}
}
}
Following on from tektiv's answer, I've modified it for ES6 which my linter requires;
options: {
legend: {
labels: {
generateLabels: (chart) => {
const { data } = chart;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const ds = data.datasets[0];
const arc = meta.data[i];
const custom = (arc && arc.custom) || {};
const { getValueAtIndexOrDefault } = Chart.helpers;
const arcOpts = chart.options.elements.arc;
const fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
const stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
const bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
const value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];
return {
text: `${label}: ${value}`,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: Number.isNaN(ds.data[i]) || meta.data[i].hidden,
index: i,
};
});
}
return [];
},
},
},
},
I wanted to let the user select from 100+ data sets, but rather than adding/removing them from my Chart I decided to set the showLine: false on any dataset that I want hidden. Unfortunately the default legend would show all 100+. So in my solution I generate the legend manually, filtering out any dataset that has showLine: false.
Your settings will have this:
legend: {
labels: {
generateLabels: (a) => {
return a.data.labels
}
}
And you'll generate your own labels with a helper function:
function updateAllLabels() {
const myNewLabels = [];
myChart.data.datasets.forEach((element) => {
if (element.showLine) {
myNewLabels.push(generateLabel(element));
}
});
myChart.data.labels = myNewLabels;
}
And you'll generate the label with another function:
function generateLabel(data) {
return {
fillStyle: data.borderColor,
lineWidth: 1,
strokeStyle: data.borderColor,
text: data.countyName, // I attach countryName to my datasets for convenience
}
}
Now just don't forget to call the function whenever updating your chart:
updateAllLabels();
myChart.update();
Happy graphing!
I'm filtering a list of stocks by symbol, but it doesn't work. Maybe there's something wrong with the code? Something I have missed? Here are some of things I've tried:
function filterBySymbol: function(select, value) {
var ordersStore = this.getBrokerageOrderHistoryList().getStore();
ordersStore.clearFilter();
if (value !== '') {
ordersStore.data.filterBy(function (record, id) {
// log to make certain this gets called (and it is)
console.log(id, record.get('symbol') === value);
return record.get('symbol') === value;
});
// Other things I've tried (nothing worked):
// 1)
// var f = new Ext.util.Filter({
// filterFn: function(record) {
// return record.get('symbol') === value;
// }
// });
// ordersStore.filterBy(f);
// 2)
// ordersStore.filter(function (record) {
// return record.get('symbol') === value;
// });
// 3)
// this.getBrokerageOrderHistoryList().setStore(ordersStore);
// this.getBrokerageOrderHistoryList().refresh();
}
}
It turns out we had to disable remote filtering on the store, which is supposed to default to false, but it wasn't:
this.getOrderList().getStore().setRemoteFilter(false);
one of these should work
// 1
ordersStore.filter("symbol", value);
// 2
ordersStore.filter([
{ filterFn: function(item) { return item.get("symbol") === value; }}
]);
// 3
ordersStore.filterBy(function(item) {
return item.get("symbol") === value;
}
UPDATE: sample that works:
Ext.define('ST.store.Products', {
extend: 'Ext.data.Store',
config: {
fields: ["title", "category" ],
storeId: "Products",
data: [
{ title: 'Text1', category: 'cat1'},
{ title: 'Text2', category: 'cat2'},
{ title: 'Text3', category: 'cat3'},
]
}
});
console.log("before");
Ext.getStore("Products").each(function(item){
console.log(item.data.title);
});
Ext.getStore("Products").filterBy(function(item){
return item.get('title') == 'Text1';
});
console.log("after");
var store = Ext.getStore("Products").each(function(item){
console.log(item.data.title);
});
in my case I see the following in the developer console
before
Text1
Text2
Text3
after
Text1