I have a somewhat limited knowledge of JS and JQuery so I am sorry if this is a stupid question. I have a dashboard of charts which will have varying widths and also allows a user to change the width. The chart automatically adjusts it's size. What I want is for the legend to appear under that chart but fill the width given. My issue is it seems that the number of columns for the legend is set once and unable to be updated. So if I a chart that covers the entire width of the page I want to be able to show a larger number of columns, but if the chart only has a small amount of width space I would like it to use less columns. I can capture the width and figure out the number of columns I would like but is it possible to redraw the legend dynamically? Thanks for the help!
You need a reference to the plot object returned from $.plot, then it's:
plot.getOptions().legend.noColumns = 3;
plot.setupGrid();
plot.draw();
Example here.
Related
It seems there is no answer provided for this question or probably such a question has been never asked.
Anyway, problem is that I have a table view which consists of columns corresponding each day (of a time-period, for example current month) with a value filled in (some measured data for a person on the day). I am using chartjs to display the trend/visual-representation of that under the table row detail view (e.g. user needs to click a row to see the chart). My MAIN goal is to do so that table columns (headers) and chart x-axis are aligned properly so they are visually in sync and therefore easier to read/visualize.
It seems for default case, table uses ~100+pixels to separate individual labels on x-axis (e.g. days shown as 01.01.2020 02.01.2020 31.01.2020
I would like to set a fix width between those labels so that it could be controlled. I would like them to be exactly 121 pixels wide or so but this is just an example. I might have to possibly use even larger or smaller size based on scenario.
Is there anyway to do it? Any help is highly appreciated. Please note that I am using PrimeNG for charts which uses essentially chartjs behind-the-scenes.
I want to create chart only using d3 library. My chart will have different number of vertical bars depending on data and x-axis for this. My question is how to set chart dynamically and set x-axis ticks under every bar. It will be better if width of bars will be constant.
I tried to use ranges and scale but i dont actually understand how they works. Even with some topics)
I think you should use "Grouped Bar Chart".
Refer this block from Mike Bostock.
https://bl.ocks.org/mbostock/3887051
I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):
And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed.
The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.
I am displaying some visualizations using Google Charts.
There is great variance in the data so some large numbers co-exist with small ones. In the case of a Column Chart this results in a scaling whereby some of the small values probably compute to less than one pixel of height and are thus invisible.
As a result there is no area to hover above, so I cannot show a tooltip.
Is anyone aware of a way to show a tooltip in this situation?
How about the white space above columns? Is there a way to include that as part of the hover region? I cannot find info about this in the Google Charts documentation so it is unlikely, but maybe someone is aware of a way...
By using the option focusTarget: 'category', you can achieve this. It's mainly used for displaying multiple values from the same "grouping" at the hAxis, but it fulfills your needs for this as well.
Example
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.