What is the correct way to set the grid parameters for JSXGraph? According to here,
... [default] values have to be overwritten before the initialization of the JSXGraph board.
So, currently I'm trying the following:
JXG.Options.grid.strokeColor = "pink";
JXG.Options.grid.strokeWidth = 14.0;
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true});
which doesn't affect anything.
However, I can create a grid on existing board, but this draws underneath the existing grid for some reason. The board seems to ignore if initialize with grid: false as well, so I can't seem to work around it. Any ideas?
small update
I found that
JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true, grid: true})
draws an additional grid on top of the grid drawn by the axis: true argument. However, the colors for the first grid drawn by the axis:true argument are coupled to the
JXG.Options.axis.ticks.strokeColor
parameter. For odd some reason, this parameter changes both the tick color and and the grid drawn by the axis (which is drawn even in the case of axis: true and grid: false). Here is an example of what I mean.
In JSXGraph there are two type of grid lines:
A grid object which can be displayed with grid:true and whose attributes can be set with JXG.Options.grid. The distance between two grid lines is set with JXG.Options.grid.gridX and JXG.Options.grid.gridY.
The ticks of an axis can stretch infinitely. This is the case for the major ticks of the default axis. One can set the pixel length of the minor and mayor ticks of an axis with
JXG.Options.axis.ticks.majorHeight = 20;
JXG.Options.axis.ticks.minorHeight = 10;
If these attributes have negative values the tick will stretch infinitely and thus will appear as grid line. The default value of JXG.Options.axis.ticks.majorHeight is -1. Minor ticks and major ticks will have the same color.
The lines of the (true) grid will always have the same distance in user coordinates, independent from the zoom level, while the infinite ticks lines will adapt to the zoom level.
If the user choose a high zoom level, the browser may freeze because of the many grid lines.
Related
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
In Highstock charts, any gap will always have the same width (it seems the width of the smallest distance between points) regardless of the time interval of the gap, resulting in narrowing of the time/x axis, while this doesn't happen in the "navigation" series.
Is there any easy way to make the chart preserve the spacing of the gap according to its duration, as it already happens in the navigation bar (thus keeping the x axis without narrowing)?
Standard Highstock chart is using ordinal xAxis by default.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.
You can try disabling this parameter by setting xAxis.ordinal to false http://api.highcharts.com/highstock/xAxis.ordinal
xAxis: {
ordinal: false
},
I am using chart.js to try to create a timeline of events relative to current date.
The horizontal bar chart is close but would like to show only the tips of the bars eg as points which would pretty much be a horizontal line chart.
I have shown my horizontal bar chart along with a mock-up of what it would look like as horizontal line chart.
Is this possible with chart.js ?
You first need to know that every information that you can edit about the chart is stored in the variable containing your chart (called myChart usually, but my2Bar in your fiddle).
If you want to globally change the graph, you will need to edit attributes in myChart.config.options.
If you want to change a specific chart, you will need to edit attributes in myChart.config.data.
In this case, you need to change a specific chart (which is the horizontal bar).
If you happen to check the logs of your graph, and go very deep in the config, you will finally see that bars in your chart are drawn using attributes stored in myChart.config.data.datasets[0]._meta[0].data[n]._model (n being the nth rectangle drawn, top to bottom).
Some attributes you can find there :
base : The X position where the rectangle is starting to be drawn (0 in your xAxe for instance).
x : The rectangle is being drawn until this X position.
height : The height of the drawn rectangle.
and so on ...
To edit these values, you just need to loop in your different rectangles (the n in the above path).
But you just can't do it manually on the config of your variable. If you do this, it won't work since your chart is responsive (on resize, it will redraw the chart using the former options).
What you must use are Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
Then, in your beforeRender event (triggered after the initialisation, but before the drawing), you need to loop in your different rectangles to edit the values to affect how they will be drawn :
beforeRender: function(chart) {
for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
// Change both `3` values to change the height & width of the point
chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3;
chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3;
}
}
Here is a jsFiddle with the final result.
Unfortunately, I wasn't able to make round dots, instead of squared ones.
Update :
I have also made another jsFiddle where all the dots are linked together which makes it look like it is a horizontal line chart (can be improved of course, but it is a good start).
When using Chart.js i cant find a way to evenly scale the Y axis. Overiding and using manual scaling( scaleOverride: true ) for every chart is not really an option since there are alot of them and they have different data. Some one have an idea how to fix the scaling of the data?
This is the scaling i want:
Sometimes the scaling gets uneven depending on the data.
You can set the options globally - this will apply to every chart instance. For instance
Chart.defaults.global.scaleOverride = true;
...
I was wondering if there is a way to prevent Highcharts from recalculating and redrawing the scale of the Axis when I add a new serie.
What I need to do is the following: I have a scatter chart with a lot of data; when the user selects a point, I add a new series with a "line" type. This series' points are a limited sample from the previous ones, so no "real" new points are added, but the scale of the xAxis changes.
Setting xAxis' min and max value, startOnTick and endOnTick to true did not solve the problem. Any idea?
Edit:
As I wrote, the way Highcharts handles axis' scales is still a mistery to me. In my case, I was rendering one scatter and one column graph on the same canvas. In response to a user click, I was adding 2 new series: a line serie and a column serie each one based on a subset of the original data. The problem was caused by the column graph: when you add a new serie to a column graph, bars are not overlapped, but redistributed, thus creating the scale change effect.
Try to create the line series but hidden, and when you want to show it use chart.series[1].show().