I'm working with chart.js and I followed this to create a custom HTML legend.
The thing is, the hide/show functionality is not working. The first legend click hides the whole chart, while the others produce the error:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
so it traces back to t.getDatasetMeta.
I gotta say it's working great with line/bar charts, so its only my doughnut chart which breaks.
Let me know if you need more info.
Oh and thanks :P
EDIT: fiddle
The problem is that you have only one dataset and your code use the index of legend item clicked to hide datasets[index].
On the contrary you need to hide single item data as below:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
Check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/
Related
In a Kendo MVC line chart, when the user hovers over a point, I'd like to display several custom values, resulting in a tooltip looking something like:
Date produced: 10/18/2018
Quality value: A+
Grade: STD
Obviously, each point would display different values. I've seen other posts that refer to template dataitem, but can't figure out how to populate the dataitem. Can someone steer me in the right direction?
Thx,
Steve.
Figured it out! I was using an unbound chart. Once I bound my chart to a list of classes, I was able to reference a class property as my dataItem, such as .Template("#=dataItem.DateProduced#")
I am using chartjs to draw a line chart. I am making these charts dynamically and there can be 2 to 10 charts depending on the different data types. Right now i want to update the chart when i click a button or a text. This update will change the min and max of the y-axes ticks. I have try to do it in the javascript console on one chart by doing this
myChart.options.scales.yAxes[0].ticks.min=some_value;
myChart.update();
but the problem is how would i change it when i click on a text or button. Is i have to make a legend?
this is my jsfiddle for a test run.
Any kind of help would be much appreciated.
You can use jQuery:
Add the jQuery library
Add a button, I added <button id="action">action</button>
Add a jQuery trigger that executes the 2 lines on click:
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
})
See: https://jsfiddle.net/gdqkLtc2/3/
I am using Chart.js 2.5.0 and wondered if anyone could give me some pointers on the following functionality requirement.
I have a bubble chart that for arguments sake contains tweets.
I have a list view next to the chart that display the tweets. Connected to this is the ability to filter, so it will only display tweets with specific string value the user inputs.
What I would like to do is when the user utilities the filter, it only shows the bubbles corresponding to the filtered result. I am passing the pointIndex and the datSetIndex into my table. However, I am really struggling in working out how to update the chart so it hides the bubbles that are not matching the current filter output.
Any suggestions?
This doesnt solve my entire issue as Im using Vue which seems to be causing issues with updating the chart. However if you are using plain chart.js the blow fiddle gives one way to hide specific or all points
`https://jsfiddle.net/prmw1bm2/12`
it may help someone somewhere
I am creating a markers-based Geochart to display the location of schools. I have my data in a Google docs spreadsheet. I'm using 3 columns: lat, long and marker size. Currently, the tooltips display lat and long. Ideally, they would display information about each school instead but removing them would be fine, too. See what I have so far on jsfiddle.
Some of the other Google visualizations seem to allow a trigger:'none' option for tooltip (e.g., Pie Chart). Am I correct that there is no such thing for GeoChart?
It seems there's an experimental feature that allows assigning a tooltip role to a particular data column. I tried to use that to no avail.
I tried finding and hiding the tooltip div but I couldn't figure out how to access any elements in the iframe that contains the map. I'd be perfectly happy with this kind of solution if I could get it to work!
I realize this is not exactly what Geochart seems meant for but I'm using other Geochart region maps on the same page and would like to keep the same aesthetic.
I know this is an old question, but maybe it can still help.
Check out this example:
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('string','tooltip');
data.addColumn('number','Example');
data.addRows([[41.151636,-8.569336,'Portugal',{v:0,f:'test PT'}]]);
data.addRows([[ 39.059575,-98.789062,'USA',{v:1,f:'test US'}]]);
You can now also disable the tooltip adding, which was not previously available:
tooltip.trigger:'none';
Here is an example: http://jsfiddle.net/cmoreira/njB6m/
How do I remove the legend that appears in the bottom of the Google geoChart? I know that if I don't pass data.setValue to the chart object it wont show, but I need them to populate the map. All I want to do is get rid of the colors. Any ideas?
See : http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Configuration_Options
"An object with members to configure various aspects of the legend, or 'none', if no legend should appear."
So basically, when you're passing your configuration options into the API, you want to include the following:
legend: 'none'
A simple example set of chart options would be:
var options = {
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']},
legend: 'none',
}
The modified version of the marker example provided by google on: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Examples
Set the option legend to none.
legend: 'none'
This hides the legend/colorAxis displayed at the left bottom corner of the chart.
So apparently there isn't a way to do this. If you are using google geoMap wich renders a Flash object then there is a simple property you set to false in the geoMap object to not render the legend on the bottom left. I did how ever using jQuery manage to remove it but that just doesn't flow nicely given that it has to exist in the DOM before you can remove it. If you are seeking to use a world map I strongly recommend jVecotor Map.
It renders exactly the same in old IE browsers and has less vectors in the map so it is faster to load since the DOM is not over saturated.