I have a chart with numerical values on the X-axis, and I would like to "shift" its contents to the right, i.e. I want to increment each of the X-axis values by 1. I know that, in theory, I can just remove my current chart and make another one with the augmented X-axis, but is there another way without that step, somehow dynamically editing the axis values?
you need to use add point method. refer http://api.highcharts.com/highcharts#Series.addPoint
chart.series[0].addPoint();
demo fiddle from highchart API
Related
I am working on highstock charts for the first time.
The link http://www.highcharts.com/stock/demo/dynamic-update gives me the solution I need.
But I would like to replace the x - axis values (currently date time) with some other values like length measurements. I would also like to change the date time shown in mouse hover in the above chart with the length measurement values.
Could anyone help me find a way out as I don't see any other dynamic chart as far, specific to my requirement.
Thanks in advance.
I try to create dynamic highcharts. I use series.addPoint. It works fine but my chart adds points and doesn't move like here - jsfiddle. It can be with 100 points on the screen.
How can I make only 10 points on the screen and hide old points?
http://api.highcharts.com/highcharts#Series
Series.addPoint()'s third argument is a boolean that enables shifting. If your series is not shifting, try setting the third parameter to true.
As for the second part, are you sure you want to "hide" old data? Generally old data should be shifted off the end in a real time graph (which I assume is what you're going for). If you have too many points, you can make your x-axis smaller via Axis.setExtremes(). http://api.highcharts.com/highcharts#Axis
I have a page with 3 different charts. I'd like to make them look good. Here's what it looks like:
http://i.stack.imgur.com/JY0Yl.jpg
As you can see there are several problems with the formatting here.
How do I make the Y-axis labels align? In this case, they're right aligned, and the graph starts at the right. So, since the labels are different, each of the graphs starts in a different column.
How do i remove the first and last or the X-axis labels? In this case, two things happen. In one side, the label overlaps the Y-label, and on the other side, the label wraps around and uses two lines.
How do I space the graphs? Each graph is its own DIV container, and it's jqPlot that decides to format it, and overrides my DIV formatting.
For point 3 you may be able to place each div inside an additional div that you will be able to format with CSS as you want. And if it work you may reuse your hide X axis solution with a better result.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.
I want to make a graph which plots numeric points like (23,45),(32,67) etc using canvas tag in html5. I found this graph in this link http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/ The problem in this graph is that only y-axis works with numeric values.I want to make X-axis work with numeric values as well using the same logic as y-axis...Please help
This is a really easy fix. The as it is graphing, it just references the length of the data instead of the X values. We can work around this easily by adding a getMaxX() function, and referencing the actual X values. Here is a working example.