I am using jqplot for charting report in my current application..
I have one ChartCtrl div which is using as a chart placeholder.
And one Parent Div is controlled for positioning chart in page. I am calculating the width of the chart dynamically based on the no. of bars are present and initiate the scroll for the same for parent div, so that if more bars are plotted i can scroll the chart horizontally.
But when I scroll the chart, the Left Yaxis is also scrolling which is expected.. But is there any way to fix the left Y-axis only the chart content is scrollable in jqplot.
Please provide some suggestions on this.
I also have the same issue, but I solved by using little bit change in jqplot.css. Just in your html add this style class:
<style type="text/css">
.jqplot-axis.jqplot-yaxis{
position : fixed !important;
}
.jqplot-series-canvas {
overflow-x : scroll;
}
</style>
If your problem is solved then just vote...
Related
I am using Chart JS for bar representation. and using this link https://stackblitz.com/edit/ng2-chart-scrollable?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts for scrolling the bar chart.
In vertical bar, everything working fine. But in horizontal bar while scrolling the y axis moving.
It is because of the characters length the chart is moving on scroll.
In the above picture, you can see the chart position.
this is second picture the chart position slightly moves to left.
i Know this is because of the character, I have tried some logic like adding empty spaces based on maximum character shown to other words which is less than the bigger words.
Is there any way to make it fixed without moving. or can we try adding margin left before y axis label, if yes how to add a margin to it. Because in highchart I have seen something like margin left fixes this thing, But I don't know how to implement in chartjs
is it possible to hide the Y-Axis for a graph that has been disabled via the legend?
Right now it looks pretty messy, as disabled-graph-Y-Axis are just reset to the default range.
Picture of the chart
Thanks guys!
Where you make your axes, instead of setting display: true set it to display: 'auto' this will make it so that when all datasets that are linked to that axis are hidden the axis disapears
Inside of a JQuery resizable div I have a JQuery Accordion Widget. Inside of each accordion element is a table that is centered in the accordion div by setting width: 100%; margin: 0 auto;. In each table is a td element that has a Google Visualization Column Chart.
When the resize event is triggered I'd like the Google Visualizations to redraw so the dimensions of the Charts fit the new container sizes. The problem I'm having is that the only Chart that is redrawn with the proper dimensions is the one in the visible accordion div.
I'm assuming that when a div element is set to display=none the container dimensions are ignored in the resize event. If this is true does anyone have any good suggestions to work around this?
I should also add that the width of the visualization is set to '100%' not a pixel number.
Thanks
You may need to set explicity dimensions in in your chart.draw() call since you're drawing a chart on a hidden element. So for your options variable you would set it to:
var options = {'width':400,
'height':300}; //substitute your desired dimensions
chart.draw(data, options);
Adjust accordingly if you're using one of the other Google Charts draw methods (wrapper.Draw() or drawChart()).
From another recent similar question, the Google Charts API pulls the dimensions from the container element when the draw call is made, but if the container is hidden, it has nothing to pull from.
related: redraw google charts on hidden bootstrap tab pane
Here is a JSFiddle of what I currently have:
http://jsfiddle.net/DGwcF/
I have set both the margin and spacing to 0, though the padding still remains around the chart itself.
How do I make the chart go all the way to the edge of the container? Thank you!
You need to set pane's size as 100%, see this:
http://jsfiddle.net/DGwcF/3/
pane:{
size: '100%',
}
Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}