I need to show data points on the line chart, i.e. which appear on mouse over at a point, i need them all displayed by default i.e. not by mouse over. Any clues?
You can use
data.addColumn({type: 'string', role: 'annotation'});
and add one more value at the time of adding record with data.addRows of type string.
That will be shown just above the point on chart.
Thanks!
Related
I see how to add a horizontal line to an Apache Superset chart, but can't figure out how to display the label on the chart. I want users to be able to see it without having to mouseover the chart.
Here's an example with the Games per Genre over time demo chart. My annotation:
That gets the line to display at 100, but its label - Target Number of Games - is not visible:
Is there a way to get the label to display just above or below its line?
Per a moderator in the Apache Superset Slack message board, this is not currently possible as of v1.5.0.
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/
I am working with a Google Motion Chart with has a play button and slider at the bottom that animates the chart. I would like to set the time unit/steps used by the slider. The default seems to be a day ("D").
My drawChart method sets the initial state and I tried setting the timeUnit to "M" - "duration":{"multiplier":1,"timeUnit":"M"} - for month but this did not change anything. I could not find any documentation on possible settings for the initial state variables.
Below is my method which sets the state:
function drawChart(data) {
var evalObj = eval("(" + data + ")");
var dataTbl = new google.visualization.DataTable(evalObj);
var motionchart = new google.visualization.MotionChart(document.getElementById('chart'));
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,
"iconType":"BUBBLE","sizeOption":"_UNISIZE","xZoomedDataMin":null,
"xZoomedIn":false, "duration":{"multiplier":1,"timeUnit":"M"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_UNIQUE_COLOR",
"nonSelectedAlpha":0.4,"dimensions":{"iconDimensions": []},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,
"showTrails":false,"xZoomedDataMax":null};';
options['width'] = 800;
options['height'] = 400;
motionchart.draw(dataTbl, options);
}
Is "M" the setting for month? How do I change the slider to use months instead of days for its steps?
The documentation says:
The second column must contain time values. Time can be expressed in any of the following formats:
Year - Column type: 'number'. Example: 2008.
Month, day and year - Column type: 'date'; values should be javascript Date instances.
Week number- Column type: 'string'; values should use the pattern YYYYWww, which conforms to ISO 8601. Example: '2008W03'.
Quarter - Column type: 'string'; the values should have the pattern YYYYQq, which conforms to ISO 8601. Example: '2008Q3'.
Reading another thread, it looks like Google is throwing this in the trash and are not going to be enhancing the time units.
Try this.
You can specify that the motion chart start with a specific state: that is, a set of selected entities and view customizations. To do this, you'll need to first create and display the chart, then make any state changes that you want the chart to show (select values, change settings, etc), then export these settings as a string, and finally use this string in your code, assigning it to the "state" option. The next two sections describe how to export and then use the state code.
Open a working chart and set the settings that you'd like to capture. Settings you can specify include opacity levels, zooming, and log vs linear scaling.
Open the Settings panel by clicking the wrench symbol in the lower right corner of the chart.
Click the Advanced link in the lower left corner to add the Advanced panel to the set.
Expand the Advanced panel and copy the contents of the State text box to your clipboard. (Note: instead of using the menu, described in steps 2—4, you could insert a button on your page that calls getState() and displays the current state in a message box.)
Assign the state string that you copied in the previous step to the "state" options parameter in your code, as shown here. When passed into the draw() method, the chart will be initialized to the state specified on startup.
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.