Add these two lines in the properties of the categoryAxis. "boldPeriodBeginning":false, "markPeriodChange":false, This should get you the desired solution....
AmCharts won't listen to dataContext changes, so you have to do it on your own using validateData(). However, as the chart is completly redrawn, the point will lose its hover state. Fiddle
Ok so what i got for you is this Fiddle. It uses the labelFunction to move the label. As labelFunction returns a blank string you have to do this with \u00a0 (space) or \n (new line). So the function checks, if the previous(!) point has the same(!) coordinates.You could modify...
In time I found the solution in the documentation. We can do that by adding a field in the dataProvider, e.g. columnColor with value and setting the colorField of the graph to 'columnColor' (we also have the possibility to set the lineColorField). UPDATE: working fiddle...
If you want the data to be streaming to the page in "real time" you're going to have to have some framework to do it. Django is all about generating html and will return the data needed when the page requests it but what you want is data transfer after...
javascript,android,webview,amcharts
There is a typo in your code: sb.append("chart.backgroundAloha = \"1.0\";"); It should read this instead: sb.append("chart.backgroundAlpha = \"1.0\";"); Also, alpha is a numeric parameter. I strongly suggest you supply it as number. I know you won't be displaying it in some old browsers that might be thrown off by this,...
to archive this you need to add a "dump" entry in your dataProvider dataProvider = [{ date: new Date(2014,0,1) }, ... { date: new Date(2014,11,31) }] ...
javascript,php,html,css,amcharts
The chart does not load the language file. You need to include it as the rest of the JS includes: <script src="amcharts/amcharts.js"></script> <script src="amcharts/serial.js"></script> <script src="amcharts/lang/cn.js"></script> Also, like you correctly pointed out, you need to add an instruction to chart to use the specific language: AmCharts.makeChart( "chartdiv", { "language": "cn",...
javascript,charts,pie-chart,amcharts,drilldown
Altering the function has accomplished the multiple level drill down, updated function below: function generateChartDataPie () { var chartDataPie = []; if (selected) { for (var x = 0; x < selected.length; x++) { chartDataPie.push({ response: selected[x].response, count: selected[x].count, pulled: true, subdata: selected[x].subdata }); } } else { chartDataPie =...
Yes, you can. You should add balloonText to the guide object, not like you did but like this: "guides": [{ category: "2001", toCategory: "2003", lineColor: "#CC0000", lineAlpha: 1, fillAlpha: 0.2, fillColor: "#CC0000", dashLength: 2, inside: true, labelRotation: 90, label: "fines for speeding increased", "balloonText": "<img src='http://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px;...
I have updated your fiddle here... http://jsfiddle.net/47qdtboa/1/ What you need to do is basically refer to the x or y axis rather than a field name. You also need to add bullet points to the chart to make the balloons appear. "graphs": [ { "id": "AmGraph-4", "balloonText": "[[x]] (km)", /*CHANGED...
You can't pass event listeners as property. (as far as i know) What you can do, is adding the listener after the chart is created. chart.addListener("clickGraph", graphClicked); function graphClicked(e) { alert(e.graph.title); } Fiddle...
You're searching for the "rollOverSlice" event.See documentation here. Usage: chart.addListener("rollOverSlice", function(e) { // Do something. }); and fiddle....
graph,stack,scrollbar,amcharts
Just for the sake of sport I tried to implement it. Good news - it's possible :) First of all you will need to prepare both charts First chart Scrollbar enabled Chart cursor enabled Category axis hidden Legend disabled Bottom margin: 0 Second chart Scrollbar disabled Chart cursor enabled Category...
If you want to destroy the chart object, at all, call: chart.clear(); and then null chart variable: chart = null;...
finally i figured out the problem i have set valueAxis by array and it solved my issue Please have a look at http://jsfiddle.net/LLWft/3/ chart1.valueAxes=[{ "stackType": "regular", "axisAlpha": 0.3, "gridAlpha": 0.3 }]; ...
I got the labels to display by setting the graphs label position, like this: "labelPosition": "bottom" here is the JSFiddle: http://jsfiddle.net/Cww3D/291/ Apparently, this forces the labels to display, while the one you'd expect, "showAllValueLabels": true does not. Weird!...
To resolve my problem and get the map to display i had to change the value of the mapVar property from "worldLow" to AmCharts.maps.worldLow. I don't know if the tutorial is just not maintained very well or maybe I have an outdated version of the library.
In the end I discovered I should be using valueText not labelText and so was able to change to this: "legend": { "align": "center", "position": "bottom", "marginRight": 21, "markerType": "circle", "right": -4, "labelText": "[[title]]", "valueText": " $[[value]] [[percents]]%", "valueWidth": 80, "textClickEnabled": true }, ...
javascript,python,json,flask,amcharts
First things first, if you are looking at plotting a line graph out of arbitrary X and Y coordinates (as opposed plotting series-based data), you're better off using XY chart than serial one. Also, amCharts will not be able to plot data in separate arrays of coordinates. You can either...
Try to use the new initialization style of amCharts. See my answer to a question related to this.It seems like the old approach you tried is not working anymore. (At least my few tests were not running)To enable the export use this in the initialization code: export: { enabled: true,...
jquery,asp.net,twitter-bootstrap,amcharts
The issues is that the chart container, or more correctly it's parent is hidden at the moment of chart creation. Because of that the chart can't correctly measure it's dimensions, hence it's not appearing when modal is shown. You need to build (or force to redraw) the chart after the...
As you can see here the stockchart itself does not support click events on the graph or items.However, you can solve this by adding listeners to single panels. (see docs) As the panels are initialized after the chart chart.panels[x].addListener() won't work.Instead you have to wrap it in the charts init...
you need to access the SVG element directly and change it's fill/stroke color, access like following within your event callback event.item.bulletGraphics.node http://codepen.io/amcharts/pen/3abea07c9fd4c1f44d3523d3dd80d489...
It's because you messed things up in css. First, you set style on "chartdiv" and your div is "chart", and you have an extra } in the middle of css, which makes width and height ignored. It should be: #chart { width : 100%; height : 500px; font-size : 11px;...
javascript,highcharts,parse.com,amcharts
amCharts wrote a tutorial how to load external data, if you receive an array of objects you can pass it directly to the chart instance to create it or call "validateData" to apply the data changes. var chart = AmCharts.makeChart("chartdiv", { ... }); ... chart.dataProvider = newDataArray; chart.validateData(); ...
I have solved the issue with amchart support team help that my mistake to pass index of category axis instead of its value as var ss = chart.categoryAxis.index; Thanks all for support....
if you look at the console log in chrome you will see it says your error Uncaught ReferenceError: weekendGuides is not defined categoryAxis: { guides: weekendGuides << this is not defined. }, what does weekendGuides need to be set to.. that is where your problem is set that to a...
Ok. So changing the labelFunction depending on zoom is pretty easy. Just take a look at this fiddle. (I used this as template). The other approach is not as easy as i thought. You can modify the labels when the zoomed event is fired, however i haven't found a way...
javascript,charts,playframework,amcharts
Since you haven't posted your code which parses the HTML table into a JSON data format, I can't provide any insight into why it did not work. The chart not showing up indicates that most probably the resulting JSON was not constructed the way amCharts expects it to. However, here's...
I forgot to add this : "autoMargins": false, and it worked!...
javascript,jquery,charts,amcharts
yes am chart provides option for balloon location "balloon": { "borderThickness": 3, "horizontalPadding": 17, "offsetX": 50, "offsetY": 8 } offsetX , and offsetY are horizontal and vertical distance from mouse pointer ...
javascript,json,charts,amcharts
There's no need to iterate through all of the data. When the chart builds itself, it calculates min and max values for each value axis anyway. We can tap into those auto-calculated values and add a Guide for each of them. We can use chart's "rendered" event to do it....
javascript,html,css,charts,amcharts
You can easily force all columns at the same constant pixel width using graph.fixedColumnWidth property. Here's the related documentation: http://docs.amcharts.com/3/javascriptcharts/AmGraph#fixedColumnWidth Code: "graphs": [{ "balloonText": "[[category]]: <b>[[value]]</b>", "fillAlphas": 0.8, "lineAlpha": 0.2, "type": "column", "valueField": "visits", "fixedColumnWidth": 50 }], And working example: http://jsfiddle.net/amcharts/nctpzzbr/ If you need the chart container to grow/shrink depending...
You can use "clickMapObject" event to catch all the information about clicked object. I.e.: map.addListener("clickMapObject", function (event) { alert( 'Clicked ID: ' + event.mapObject.id + ' (' + event.mapObject.title + ')' ); }); Here's a working example: http://jsfiddle.net/amcharts/k67gB/light/ Please note that in order for this event to fire the country...
working fiddle http://jsfiddle.net/Se2UE/2/ the core of my change is here var NewChartDataArray = []; for(i=0; i<CD.length; i++) { var D = CD[i]; D = D.replace("{",""); D = D.replace("}",""); D = "{" + D + "}"; NewChartDataArray.push(JSON.parse(D)); } declare NewChartDataArray as array and not string then add an object to array....
if you use API-fashioned way to create you chart you need to initiate the chart instance with the theme like following: chart = new AmCharts.AmSerialChart(AmCharts.themes.patterns); Ensure you don't overwrite these default settings with your graph settings like you are currently doing it in your fiddle....
see jsfiddle i have just edited this "labelText": "[[title]]: [[value]]", i hope this would help you ...
All config parameters in amCharts are case-sensitive and should be in camelCase. So you should change linethickness and linecolor to lineThickness and lineColor respectively. Here's your updated fiddle as per above: http://jsfiddle.net/Lw7ahxwh/3/ I also noticed you have trailing comma (a comma after the last element in the array) in some...
Colors property works only for separate graphs, not for data items. So you should add colors to dataProvider.
javascript,php,post,jsfiddle,amcharts
I believe this is what you're looking for. It describes the ways to display a fiddle from query data. Here's an excerpt explaining why the URL remains the same. Use library/pure for no framework: URL: jsfiddle.net/api/post/library/pure/ ...
You have two problems - first, amstock.js is not included, and second, with stock chart, which is date-based you should use guide.date and guide.toDate instead of category and toCategory: guide1.date = new Date(2007, 0, 1); guide1.toDate = new Date(2008, 0, 1); http://jsfiddle.net/d1ywab37/1/ Note, months are zero based in JS....
javascript,performance,charts,highcharts,amcharts
Short Answer : Either : Start your timing right before the chart code executes and setup a MutationObserver to watch the DOM and end the time when all mutation ends. Find out if the charting library has a done() event. (But be cautious as this can be inaccurate depending on...
The path to images was not set in the icCube's amChart integration. Will be fixed in the next release....
javascript,backbone.js,requirejs,amcharts
You have to write shim and export for that library. Maybe try giving quotes like - 'amcharts' in paths and shims. 'shim': { 'amcharts': { deps: ['jquery'], exports: 'amcharts' } } ...
In amcharts the legends are added manually, In your case jut remove the lines which add legends to the chart. For e.g., The legends are added as follows, var legend = new AmCharts.AmLegend(); chart.addLegend(legend); OR AmCharts.makeChart("chartdiv", { "legend": { "useGraphSettings": true }, } Just remove the above lines from your...
javascript,jsf,websocket,amcharts
Oh,i've got it the problem is in function hanleGlobalPushEvent in chartData object data = [ { "date" : eventData.label, "value" : eventData.value }]; it is definition of array,but chart data is simle object with two values it should be like this data = { "date" : eventData.label, "value" : eventData.value...
You are using the global labels. I guess you want to label each bubble. You have to do this in the "graphs" segment, like this: "graphs": [{ "labelText": "[[value]]", "labelPosition": "middle" }], See docs here Reworked JSFiddle...
Use labelsEnabled on your value axis: "valueAxes": [{ "axisAlpha": 0, "gridAlpha": 0.1, "labelsEnabled": false }], Here's the updated fiddle....
I would say you have two options: Avoid using computed properties in the Ember objects, as normal properties can be accessed without using get() (Example). This should work as if you were passing normal JS objects (which Ember objects are in the real sense). Create a toJsObject() (or similar) on...
The first example you show is taking the required JavaScript files directly from the amcharts servers. For normal use you should place a copy of these on your own server and the location you use will be in reference to the folder the html is coming from. Take the following...
Since you get numbers like "30.500" in your output I can only assume that your values are stored in VARCHAR type column in MySQL. And so it happens they contain extra symbols at the end, probably resulting from the failure to properly sanitize your data inputs. Apart from obvious solution...
Ok, so there are different ways to do this: Make your own DataSet with percent values:This is pretty much work, but have a lot of control about what you get.(e.g. if you wan't specific changes) Change the display values at runtime:If you debug your chart, you can see the calculated...
There is no way to create a horizontal funnel from a funnel-type chart. (The rotate property merely flips the chart upside down.) But you can simulate a horizontal funnel by using a bar chart and overlaying a background on the bottom half ("negating") of the chart. See this JSFiddle. Note...
You can get min/max of value axis by accessing min and max properties. Note, you can do that only after chart is rendered: http://jsfiddle.net/qGe47/1/ getAxisBounds = function(){ console.log(chart.valueAxes[0].min + " " + chart.valueAxes[0].max); console.log(chart.valueAxes[1].min + " " + chart.valueAxes[1].max); } ...
twitter-bootstrap,modal-dialog,amcharts
The issue is that chart can't calculate it's own size in hidden containers. The fix is to make it recalculate the size after modal is displayed. To do so you can tap into Bootstrap's modal event "shown.bs.modal". I.e.: $('#myModal').on('shown.bs.modal', function (e) { chart.invalidateSize(); }) Replace "chart" with your own global...