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
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 working on charts using the chart.js library. I want to show image gallery like a carousel on click of any segment of pie/doughnut chart. I'm not able to find the proper solution. Please suggest some solution
If I understand correctly what you are trying is to trigger an event after user clicks on chart segment. chart.js has this prototype method getElementAtEvent(); See the documentation.
It seems as a good place to start - you could create some function to open image gallery and call it there.
And the gallery/slider implementation is a separate issue, but if you are using some of the popular ui libraries some of them have a solution for that already. Bootstrap, for example has carousel, and JQuery has many plugins for that purpose. Here are some examples. Hope this helps...
I have a weird issue using Ember 1.11 (built with ember-cli) and D3 Pie chart.
The chart is not displayed properly on ember routes, only on the index route (index.hbs).
The generated HTML code is the same on routes templates and index.hbs. I've used the same view/component on index.hbs as on routes.
Weirdly enough, I can fix this issue if by going to Inspect Element and removing the entire <head></head> tag. (Removing the content line by line does not fix it!)
I've installed a sample Ember application here. On the index you will see the chart. On the menu routes, there is the same chart (rendered with same view as it was rendered on index.hbs), but not displayed properly (it works a bit when you hover over that area).
The HTML code generated by the chart view is the same on all pages. If you copy the code from <div id="pieChart">..</div> and paste it in a empty static html page, the chart will be rendered correctly.
This issue can be reproduced using: Firefox/Chrome. In safari it seems to work.
Here is a paste2 which renders the chart.
The entire application code before build can be found here.
Edit: I've also reported this issue on github, here.
Set ENV.locationType to "hash" instead of the default ("auto"). Since you're working with an ember-cli application, this lives in config/environment.js.
The ultimate culprit for this can be found here: https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44. Basically, d3pie is using a pattern fill for the circle arcs, which is exposed as a URL. When you're inside a route, that ends up having to go through Ember, which is configured by default to ignore hashed routes. By switching it, you effectively take that call out of Ember's routing namespace and it's able to resolve correctly.
Edit
See here for a working example: https://github.com/Little-Jon/so-29780096
I am trying to install firebug lite onto IE and Chrome. The documentation states to simply add the javascript location in the document and all should be well. This works but the iframe containing then firebug is hidden with a visibility: hidden attribute. I am unable to find anywhere to actually activate the firebug, normally you would think you could right click and "inspect" but that option is not there. The chrome extension and bookmarklet works but my main concern is trying to firebug through internet explorer.
Anyone had or solved this issue?
Yeah I had the same problem using the stable channel. I switched to the debug channel & it worked perfectly, opening right up. So use this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
Also, I find it useful to throw a quick 300px-high div in there at the bottom of my page to make room for Firebug Lite, like this:
<div style="display:block; height:300px; background:blue;"></div>
Just don't forget to remove it with the FBL script tag!
I am currently in a situation where i need to remove the metamorph tags used in a ember js select box. I use a JS plugin that takes my select box and turns it into a styled select box which i have customized using css.
I currently have this ember js select box in my view.
<script type="text/x-handlebars" data-template-name="opportunities">
{{view Ember.Select
contentBinding="controller.filter"
optionLabelPath="content.metacode"
optionValuePath="content.description"
class="mydds opportunitylistcategory"}}
</script>
I just need a way to remove the metamorph code but for ember selectbox to still have binding etc enabled... I have read about removing metamorphic data with a jquery sortable but that hasnt helped me. Thanks in advance!
The best way to work around this is to use an Ember.CollectionView.
I've run into this issue with a simple unordered list (<ul><li>).
Here is an answer that demonstrates how to do it https://stackoverflow.com/a/11749736/701368
Edit
The original answer was for a version of Ember before 1.0.
I would recommend using the {{each}} helper with the itemViewClass attribute when dealing with newer versions of Ember.js. You can find the documentation here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_specifying-a-view-class-for-items.
So don't use the block level helper; you want to use {{each}} instead of {{#each}}.