Is it possibile to prevent page scroll to page top when chart is regenerated ?
After the page is loaded with C3 chart, I scrolled to bottom of the page and I have auto generating chart event with latest data for every 10 seconds dring this time scrollbar is moving to top of the page.
I assume you are using c3.generate() to load the latest data.
Why don't you use chart.load()? This would solve your problem.
//call generate only once
var chart = c3.generate(..)
//refresh your data whenever you want
chart.load({
columns: [ ['data1', 230, 190, 300, 500, 300, 400] ]
});
I had this issue and it was due to the page height changing when the chart was destroyed/redrawn, it was causing the page to go from being a scrollable height to all in one window and had the affect of scrolling to the top. I fixed the issue by setting the min-height of the div containg the chart to be the same size as the drawn chart, so the page was always going to be the same height whether the chart was there or being regenerated.
Related
I want an animated chart like this: see fiddle
this is the code:
animation: {
defer: 1500,
duration: 1000
}
but the animation should be started when the chart is visible after scrolling, not when the page is loaded. To achieve this I added code as shown in this example
But after that the animation does not work properly: see fiddle
And embedded in a website it does not work at all: https://www.rnd.de/politik/bundestagswahl-den-volksparteien-droht-2021-das-ende-ZOMR37364VFJ7PCOSMGVHMEWO4.html
it is possible to use this method with highcharts in iframes?
And another question: Is it possible to first hide the data labels of a series too and display it later like the bars?
I want to make Gridster grid responsive according to grid resize as well as window resize. Currently I am using DC.js to render charts inside the gridster grid, but if the screen resolution changes from bigger to smaller , the value of the item stored previously for the width for svg remain too big for the screen.
Any tips how to make it responsive. How to set the width of gridster item , it looks to me it injected through java-script.
I found out the answer. Angular Gridster have a event "gridster-resized" , whenever this event happens try to resize the items in the gridster.
I am setting the height of a chart through javascript inside html of text item. However, the grid row height remains constant and therefore, sometimes there is too much white space
I want to adjsut row height according to chart height. Please help me
Regards
Arif
You should just leave the height property of the row to blank, it will automatically be adjusted to the size of the content, in your case the height of the chart + your margins/paddings. You should also pay attention if the grid itself has a height defined.
As soon as an element has a dynamic height, most of the time we have to remove "height" properties defined in its containers
I have a Kendo grid with too many columns. Initially I chose to hide some columns, but later I decided to display all the columns with a horizontal scrollbar.
I did this by assigning a width to each column. When I did so, the lines between each column are not in sync with the header lines.
I mean, the lines in the data part of the grid, are moved slightly to the left with respect to the header lines.
To clarify, when I give the width for each column in pixels the above problem persists. But, when I give the width in %, the scrollbar is not displayed.
I want to display the scrollbar to show all the columns.
Any ideas about how to do this?
Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html.
Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:
{ field: "OrderID", title: "Order ID", width: 60 },
(I did quite few Kendo grids in the past and never experienced such issue. Sounds like you setting up the column width directly on the html, I can't see how else would Kendo get out off sync.)
I have a pie chart which is being generated from a json string. The pie is getting created correctly but what is happening is the tooltip is getting cutoff when the text to be displayed in the tooltip is large. I have tried increasing the width and height of the svg area. But the charts are generated dynamically so i have no way of setting the chart widht and height dynamically depending on the content.
One can adjust the margins margin:[0,100,0,100], to shrink the pie chart so that the tooltips/labels will appear. This has been set to automatically scale the chart in Highcharts 3.0.
http://www.highcharts.com/component/content/article/2-news/53-highcharts-3-0-beta-released
http://github.highcharts.com/v3.0Beta/highcharts.js
http://jsfiddle.net/Zvrt6/1/
Increase Height and width of your chart div or put your code in jsfiddle if possible, so that we can get more idea
This example could be relevant to your situation- http://jsfiddle.net/4ac8b/1/. When you re-size the result pane you will notice the chart size changes accordingly.
You will need to set the size of your container so that the chart is drawn in that area itself. http://jsfiddle.net/4ac8b/. Even when you re-size the result pane the chart size wont change.
Change the diameter of your pie chart to allow additional information
http://www.highcharts.com/ref/#plotOptions-pie--size