I have multiple charts showing different data. however they are all the same object type e.ge [acc1, acc2, acc3]. Therefore I was wondering if it is possible to have one parent legend set on a page somewhere and clicking it will show/hide all the corresponding dataset from all the charts?
I think you can hide all the legends of the charts except for one and implement a custom onClick function to handle clicks on that legend and hide all the corresponding datasets for each chart.
The current onClick implementation looks like this:
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
}
This function needs to be defined in options.legend.onClick. To make this work you would need to rewrite the above function to implement a loop, selecting all the charts necessary and select the meta, hide it and update the chart.
Related
I am trying to build a watchOS app that has charting and I can't use Swifts built in charts because I need to support down to version 7 and swift charts are only available for watchOS 9+. So instead I am using a library I found here...
https://github.com/willdale/SwiftUICharts
It has some sample and examples, trying to follow them I was able to get the chart to show up and customize it some, but I can't get the bar chart items to change their color. It seems simple enough, but for whatever reason I can't get it to actually change the color.
I'll provide a simple sample that should help show what's going on.
struct ChartView: View {
var items: [TimeEntries] = [
TimeEntry(dateString: "01/23/2023", entry: 97, timestamp: Date().millisecondsSince1970)]
var body: some View {
let chartData = makeData(items)
BarChart(chartData: chartData)
.touchOverlay(chartData: chartData)
.padding()
}
private func makeData(_ items: [TimeEntries]) -> BarChartData {
var data: [BarChartDataPoint] = [BarChartDataPoint]()
for item in items {
let stat = BarChartDataPoint(
value: Double(item.entry),
xAxisLabel: "Wed",
date: Date(milliseconds: entry.timestamp),
colour: ColourStyle(colour: Color.purple)
)
data.append(stat)
}
let dataSet = BarDataSet(dataPoints: data)
return BarChartData(dataSets: dataSet)
}
}
That should give me an entry on my bar chart with purple filling, I simplified this for sake of ease of posting, my real data has 7 points in it.
However, what actually happens is I have a single red bar on my chart. I am not using red anywhere in the app at all, but it won't take the color that I specify in the colour property of the BarChartDataPoint.
I know it's based on a library, but hopefully someone here will have used this library and will know what I have done wrong. I'll attach a screenshot of the chart so you can see. Thank you.
I'm creating a Blazor component as a facade of ChartJs. I opened a question on the Microsoft forum to understand how I can call a JavaScript function for the component.
My problem is how to add some events to the chart before the creation. So, from the Blazor page, I pass a model called config that contains all the configuration for the chart.
Then, I create the chart in JavaScript like
var ctx = document.getElementById(id).getContext('2d');
var chart = new Chart(ctx, eval(config));
Now, I want to add an event and send to Blazor an event. For example, I added the following code for the event onHover and it works.
chart.options.onHover = function () {
DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'ChartHover');
}
With onClick is working too.
chart.options.onClick = function (event, array) {
var rtn = 0;
if (array !== undefined && array.length > 0)
rtn = array[0].index;
DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'ChartClick', rtn);
};
Now, I want to do the same with onAnimationComplete.
chart.onAnimationComplete = window["AnimationComplete1"];
In this cases, the function is not being called. Some if I write this code
chart.onAnimationComplete = function () {
console.log('onAnimationComplete animation completed');
};
How can I fix the code?
there is no onAnimationComplete event you can configure directly on the chart. This has to be done in the options like you did for the onHover and the name has to be different:
chart.options.animation.onComplete = function () {}
I have a requirement according to which I need to have custom tooltips on a chart instead of default Series, Group and Value labels. I need to change these with my own custom ones.
Is there any way to have custom tooltips to a line with area chart?
1) Edit the chart region, and in the chart attribute JavaScript Code, enter the following code snippet:
function( options ){
// Add new group and series labels to tooltips
if ( options.valueFormats.group ) {
$.extend( options.valueFormats.group, { tooltipLabel: 'Apple' });
} else {
options.valueFormats.group = { tooltipLabel: 'Apple' };
}
$.extend(options.valueFormats.value, { tooltipLabel: 'Fruits' });
return options;
}
2) Save the changes, and run the page. Note that the 'Group' label will now display 'Apple', and the 'Value' label will now display 'Fruits'.
I'm trying to replace instances of jsTree with Foundation's drilldown menu as it has better benefits, but in some places I'm utilizing jsTree's lazy loading however there's no option for this in Foundation. Is there any way of doing this, or does anybody know if it's been done before?
I had the initial parent-level list populating, but the drilldown functionality wasn't being applied after calling Foundation.Drilldown(), and I haven't been able to figure out the next-level items yet.
$(function(){
var tree = $("ul#tree_id");
$.getJSON("/url/",function(data){
console.log(data);
if(data){
$.each(data,function(key,value){
var node = document.createElement("li");
$(node).html(value.text);
tree.prepend($(node))
});
}
var elem = new Foundation.Drilldown(tree);
});
});
Thanks.
What I am trying to do is have a "load more" button at the bottom of a ajax populated list. I have got all the code working with a docked button, but I would now like to have it at the bottom.
What is happening is when the listView card is show I see my list but the list won't scroll. It pulls up and down a little but just won't have it. I have tried adding different configurations and layouts to listView with no different.
What I have done is the following
var moreButton = new Ext.Button({
text: 'Load more...',
ui: 'round',
handler: function() {//Do the loading - this works}
});
//In my list config I have a docked top bar for going "back" other than that pretty standard
var list = new Ext.List(Ext.apply(listConfig, {
fullscreen: false
}));
//This is my view for what I am trying to do
var listView = new Ext.Container({
items:[list, moreButton]
});
listView is then added to an other container as it is populated from a search box, it is show with setCard when I get a valid response from the server.
[sencha person] are you on 0.98? I think we had a regression in our scroller. Might want to downgrade back to 0.97