A google.visualization.BarChart will not show tooltips for me in Firefox, but shows them in Chrome.
I am using Firefox 4.0.1 on Linux.
This might be related to issue 598 "Google Chart Tools: tooltip/line not shown on firefox using base tag" at google-visualization-api-issues which is reproduced when a base tag differs from a page location.
A possible solution could be to use jQuery to change the href attr of the tag.
jQuery("base").attr('href', document.location);
chart.draw(data, options);
I think that it will be better to add base-tag in frame-drawing, like that
chart.draw(data, options);
jQuery(document).ready
(
function()
{
jQuery('iframe[name^=Drawing_Frame]').contents().find('head').append('<base href="'+document.location+'"></base>')
}
);
It works for me
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
I'm trying to use Polymer's google-chart component to create a geo chart with the marker display mode, however, the component keeps showing an error of google.load is not a function.
I think the chart is being bound to the DOM before a call to the Google Maps API is completed but I'm not totally sure. Has anyone else had success making marker or text geo charts with the google-chart component?
Here's a repro of the issue using the marker and text geochart examples: https://jsbin.com/mewahibane/edit?html,output
This seems to be an issue with the google-chart library.
Recently there was a change where a google-chart-loader element was added to deal with some recent issues with the google charts library.
Maybe this causes an issue with the GeoChart library.
As a workaround add this line <script type="text/javascript" src="https://www.google.com/jsapi"></script> above the google-chjart import. This should fix it. See here:
https://jsbin.com/gejipiqehu/edit?html,output
What about this code ? >> https://jsbin.com/tabahu/edit?html,output
i am trying to add marker on google-chart. just copy code from this documentation.
https://developers.google.com/chart/interactive/docs/gallery/geochart#marker-geocharts
I want to change my kendo ui theme from default. The problem is it changes but only for controls: grid etc. but charts stay exactly the same.
I'm adding this styles in the bundle.
bundles.Add(new StyleBundle("~/Content/kendoUi").Include(
"~/Content/kendo/2016.1.112/kendo.common.min.css",
"~/Content/kendo/2016.1.112/kendo.mobile.all.min.css",
"~/Content/kendo/2016.1.112/kendo.metro.min.css"
));
Am I missing something ?
I was struggeling with the same thing today. For some reason, the Theme of a chart must be set via widget configuration.
From the Documentation of the Kendo Client Library:
The Kendo UI Chart widgets come with a set of predefined themes. Use
the theme option to select a theme, as demonstrated in the example
below. The theme name is case insensitive.
$("#chart").kendoChart({
theme: "blueOpal",
//...
});
There is no documentation for the Server-Wrappers. However, it will work this way:
#(Html.Kendo().Chart().Theme("blueOpal"))
The reason for this, seems to be explained here:
Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps use a mix of
browser technologies to attain the required precision and
responsiveness. Visualization is rendered as vector graphics with
computed layout. In contrast, interactive features are built using
traditional HTML elements. As a result, the appearance settings of
these widgets are split between declarative options and traditional
CSS.
If you want to do it globaly, you need to override kendo:
var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];
if (kendo.dataviz) {
for (var i = 0; i < themable.length; i++) {
var widget = kendo.dataviz.ui[themable[i]];
if (widget) {
widget.fn.options.theme = "blueOpal";
}
}
}
I have deployed my first page in Sitecore. But it is not rendered perfectly in Content editor preview mode.
Original html:
There is a nav menu and a banner below it. Behind them is a white transparent overlay & behind the overlay is a graffiti background image.
View from Experience editor:
The settings icon went offset. The white overlay is now above the Sitecore menu preventing the edits.
Error in browser console:
Uncaught TypeError: element.dispatchEvent is
not a function - prototype.js:5734
Uncaught TypeError:
element.attachEvent is not a function - prototype.js:5653
View in Content Editor:
It is rendered as if for a tablet, as you see the menu got shifted to the icon. I understand, it is because of the dimensions of the preview panel.
But, if this is the case, how will an author be able to edit/view the correct design.
Prototype.js is not a file being used by the site. So, it must be from Sitecore's.
Im guessing , certain CSS props, aren't being respected (Like position, transformnation).
Is this a bug. How to fix this. I have checked in different browsers (IE, chrome & firefox). It's the same
It looks like you are running into a conflict with prototype.js. Sitecore uses this in the experience editor.
If you are using jQuery in your site, there is a kb article about that here: https://kb.sitecore.net/articles/286042
To fix the issue, you need to run jQuery in no conflict mode. There are a few ways of doing that. Here is a simple example:
<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
You can find more on the jQuery website: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
You also need to be careful with your CSS - don't absolutely position elements to the top of your browser, always make sure they are relative to a container so that the Sitecore EE DOM elements can be added and positioned correctly.
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.