I have been trying to migrate some existing charts to the newer Google Material view however the Line chart won't allow me to display it with a curved line.
You can see their new chart half way down this link:
https://developers.google.com/chart/interactive/docs/gallery/linechart
Just wondering if anyone has found a way to get this working?
And yes, i am including this in my JSON options:
curveType: 'function',
Any help would be greatly appreciated!
the list of features not working in Material charts can be found here...
Tracking Issue for Material Chart Feature Parity #2143
which includes...
curveType
series.*.curveType
Related
I am trying to always enable all the tooltips for Bubble chart using react-charjs-2 plugin
I tried various approaches but none of them work with the latest version of the plugin
Would appreciate some advice, Thank you! :)
I tried the all possible approaches, including the following ones, but was unable to achieve the results
Tried the following:
Chart JS: Always show tooltips in a multi dataset line chart
By default it is not possible to show all the tooltips at once, if you really want it you will need to use the external (html) tooltip.
The easyer way is to use the datalabels plugin: https://chartjs-plugin-datalabels.netlify.app/samples/charts/bubble.html
and have been using Google Charts to visualize my data. I have tried to search for the answer to this question but couldn't not find anyone having the same problem as mine, or maybe my problem is really basic. Appreciate if someone can give me a hand.
I built a sankey diagram by following the steps listed in Google Charts - Sankey Diagram.
Here is my chart:
http://kuangkeng.github.io/keng-data-journalism/procurement%20project/sankey/index.html
However I would like to add tooltip to each line/path/link so when users mouseover, they can see the value and other details of the line.
According to Google Charts (the link above), I can fire a mouseover event using 'onmouseover' and 'onmouseout', but Google Charts does not show how to do it for Sankey diagram.
I then came over an example of using 'onmouseover' and 'onmouseout' in a Google Bar Chart:
https://developers.google.com/chart/interactive/docs/examples#mouseovertooltip
So I copied the code, modified and pasted into my code.
google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
function barMouseOver(e) {
chart.setSelection([e]);
}
function barMouseOut(e) {
chart.setSelection([{'row': null, 'column': null}]);
}
When I mouseover, I got the error message "undefined is not a function". You can see the error message appears at the top of the chart when you mouseover the lines.
I tried to use another alternative showed by Google Charts documentation by adding a another column to my data and set its role as 'tooltip' but it didn't work for my chart because Google Sankey Diagram can only accept 3 columns.
Appreciate if someone can have a look or refer me to any solution available. Thanks.
i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!
I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?
In the Configuration Options of the chart, specify
backgroundColor: { fill:'transparent' }
This worked for me in Chrome and Firefox.
It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.
Setting a transparent background for Google Charts:
// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};
JSFIDDLE DEMO
backgroundColor: "00000000" worked for me.
If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.
fill-opacity="0.0"
Example:
$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');
Use the eq:() selector to select the rectangle you want to be transparent.
On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".
When you paste the chart, you can still choose to link it, and it will paste with the background transparent.
I want a similar behavior Chart as Google Annotated Time Line Chart to display my Time Series Data from DataBase In our environment we are restricted using Flash .
But i see that Google Annotated Time Line Chart works only with Flash .
I want a similar behavior as of Google Annotated Time Line Chart showing two charts , where the below Chart helps us to select a Range and the Upper Chart displays the Zoomed Area .
I wanted to develop this by taking two divs , but i am struck up as how to maintain synchronization between these two divs (Chart Div and Slider Div)
If anybody developed has developed Google Annotated Time Line Chart Without Flash , please give some inputs as how to develop this .
Thank you very much for reading .
check out https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control
I believe you can do simple annotations also using data roles 'annotation' and 'annotationtext' (not too much styling though). You can find more info here https://developers.google.com/chart/interactive/docs/roles.
I just ran into this:
http://www.highcharts.com/demo/dynamic-master-detail
It's not free but it looks interesting.
there is no other way to make charts in Google without Flash at the moment