i am trying to make vertical axis labeled in indian ١،٢،٣ and plotted in Indian too , however it seems it has no meaning for computer , since there is no native encoding for arabic number , however in terms of english 0,1,2,3... you can do calculations no problem in that , the problem i must to show indian-arabic values
this line chart is done by google Visualization api , the last version 46.0 , and the lang is ar however the result is not as i aimed for , the vaxis should be in ١،٢،٣ and the plotted values
(This is a slightly modified answer to the duplicate question posted at stackoverflow.com/questions/46423807. Martijn Pieters, if you are paying attention, please delete that question instead of this one.)
There is a solution, but you'll have to use an undocumented feature, which will be documented at some point. You'll need to make this call sometime before you draw your chart.
google.visualization.NumberFormat.useNativeCharactersIfAvailable(true);
This works with material charts prior to v46, and also in classic charts starting with v46. See this example: https://jsfiddle.net/dlaliberte/6k8vdgz7/
You may see some problems depending on what formatting options you also specify.
Related
i am trying since one day to find out how to set up everything to make the chart draw the way i need and i feel it takes to much time and i dont make any goals.
i know charts.js is normaly not difficult to use, but only as long as everythings works fine like the exampels you find, otherwise it become difficult if you are not a charts.js profi.
I have already put something into the chart which draw the background color in different colors if the line is negativ or positive and then i did want to try change the date values to make them look better but i dont get it.
please take a look at the following jsfiddle JSFidleuser12/o3c7d0h5/15/ and picture, it does explain all problems and thank you for any help
picture
I am working on http://tradingderivatives.nl/DAX-root.html . Obvious problem: sliding is slow. Reason behind this is that the indexing to 100 on the left side of the selection has to be done by explicit coding in Javascript - at least, I did not find a better way to do this. The Google Vizualisation libary is also slow - much slower than the Dygraphs annotated timeline.
I found the range-selector example in the dygraphs online gallery. This is almost what I need - apart from the automated indexing to 100 on the left of the graph.
Questions/feature requests:
Is there a way to have the graph automatically indexed to 100? This indexing would make Dygraphs suddenly ideal for comparing trends of different data sets over any time range! Cool. I need this re-indexing even after zooming in to selected data of the full data range.
Can the area below a section of the graph be coloured as is currently done in http://tradingderivatives.nl/DAX-root.html? In this way I don't have to work with three data series. This trick is clear from the code of the DAX page. Highlighting a section of the graph is supported in Dygraphs, colouring below a graph is supported, but conditional highlighting per data segment appears to be unsupported - and this is the easiest way to work with automatic indexing to 100.
See the straw broom example for how to have the graph automatically indexed to 100 by using the rebase plugin:
https://github.com/danvk/dygraphs/blob/master/tests/straw-broom.html
<script src="../dist/dygraph.js"></script>
<script src="../src/extras/rebase.js"></script>
<script>
...
var rebase = new Dygraph.Plugins.Rebase(100);
new Dygraph(chartDiv, stockData, { plugins: [rebase] });
</script>
I am creating a Step Line Chart with AmCharts v3.
Take a look at this chart for example.
(Apparently the community loves JSFiddle more than CodePen, but the later
handle ajax calls easier)
This chart represents the price of a product and how it changes among the time. It is possible that the product may be unavailable at a moment so its value is considered as zero.
I want to omit the balloon which displays the value on hover, only if the price is equal to zero.
I want to see if is possible to do it, but I couldn't find anything about it on the documentation.
EDIT:
I remembered something about gaps, I don't know how they work actually. But if I could set all moments when price = 0 as gaps, maybe that could be a workaround.
So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420
You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false
I want this highchart - http://jsfiddle.net/zPDca/ inside a popup. But if i decrease its width to lets say to 200 px, it dissapers. Any suggestions!
It looks like 251 px is the lower limit for the width.
This was probably a decision the developers made due to readability. Think about it:
This is a stock chart and it contains the "detail" view and a navigator view, you have export enabled and by default you are showing the buttons, the default selection buttons for zooming are also shown. Wouldn't this be really crowded for the user? Why not use a different kind of chart (standard highchart maybe) that shows latest data and gives user option to expand view. This would save a lot of space in the view.
Things you can try:
Remove the export buttons (you can write your own extension to still do exporting without useing the built-in buttons)
Remove the "Zoom" text
Change chart to be less "busy" overall
Having a data visualization is all about quickly seeing the data you need - not necessarily seeing all the options you may need in a tight space. If this chart is to be used for continuous monitoring you can strip it of all option settings but have it use the options set by the user in a "primary/setup" chart.
Look this example http://jsfiddle.net/zPDca/1/
It's working well.
If you take a look the reference you can see that it can be calculated by the containing element. So you just have to remove width from your chart as you can see on my example.
Okay I got the answer. Versions higher than 1.1.5 do not allow charts smaller than certain dimension. I do not know why. But I'm detouring right now by using version 1.1.5.