I've got Highstock running on a website loading two series from two different csv/log files on the same webserver.
I previously had this exact setup on a different server where it worked flawlessly.
On the new server, however, the chart doesn't render properly. When the page is loaded the series lines do not display. If you zoom in, or scroll away from the rightmost edge of the chart the lines pop into view. If you scroll back all the way to the right the lines stop displaying.
The actual chart can be seen here on this temporary page:
http://maxedin.com/pages/18/
The JS which loads the chart here:
http://jsfiddle.net/3Jpb3/
The chart is loaded with this div element:
<div id="mholmen" style = "width:100%"></div>
I've tried playing around with the different zoom options, chart sizes, modifying the data that's being loaded and such to no luck.
Has anyone else bumped into this same issue and managed to fix it?
In your data you have some NaN's, for example:
lines[2154]: Array[2]
0: NaN
1: NaN
Which can not be displayed on a chart. Make also sure that data doesn't contain duplitaced and is ordered for xAxis ascending.
Thanks to Pawel Fus I figured it out. Turns out the text editor nano which I used to view and edit the log files did some odd things while saving them. Editing the files in textwrangler fixed my problems. Go figure.
Related
I'm using LightningChartJs 2.0.2 in my Angular application.
In the chart I have a line and a point series implemented, what works like expected.
But if I change the route and come back to the chart the point series is not visible anymore. Tried with different environments without success. I'm also not able to locate the reason of the actual issue.
Following code shows the creation of the chart and series:
this.chart = lightningChart().ChartXY({container: `${this.chartId}`});
const lineSeries = this.chart.addLineSeries().setStrokeStyle((style) => style.setThickness(5));
lineSeries.add(this.points);
const pointSeries = this.chart.addPointSeries().setName('Points').setPointSize(6);
pointSeries.add(this.points);
On destroy the chart is disposed:
ngOnDestroy() {
// "dispose" should be called when the component is unmounted to free all the resources used by the chart
this.chart.dispose();
}
Normally the chart and all depenendencies will be destroyd at this point.
If I come back to the chart page the chart should be new created with all it's series, but the point series isn't.
Why the point series is not visible anymore and how to fix it?
Please see the stackblitz example! The chart handling is located in
/src/app/lc-test/lc-test.component.ts
Steps to reproduce the issue:
Change the route to LC Test. You see the line and point series.
Change back to Dashboard and again to LC-Test. The line series is visible and the point series not.
Used Chrome and Firefox on Mac.
lightningChart Js - stackblitz - point series disappears on route change issue
After playing a bit with the zoom options it looks like there is a rendering issue on the point series:
Normal behavior:
After route change and zoom into top section:
This was caused by a rendering issue in LightningChart JS v2.0.2. We have now fixed it in a v2.0.3 release. Thank you for bringing this issue to our attention.
With LightningChart JS v2.0.3 the app you provided is working as expected.
I Was checking out the possibility of implementing a zoomable line chart using Highcharts something that highstock line chart does and came across this example in the demo. This will really work fine for me but I have seen a issue with the chart that When I select complete data in the smaller chart, the Big chart isn't showing anything.
I Want to know how to fix this issue.
When you play with that example and check the JavaScript console for errors, you'll see:
Highcharts error #12: www.highcharts.com/errors/12
Following that link:
Highcharts Error #12
Highcharts expects point configuration to be numbers or arrays in
turbo mode
This error occurs if the series.data option contains object
configurations and the number of points exceeds the turboThreshold. It
can be fixed by either setting the turboThreshold option to a higher
value, or changing your point configurations to numbers or arrays. See
turboThreshold.
Shockingly enough, if increase or disable the turboThreshold, the problem goes away.
Fiddle here.
I am looking into trying to stack completely different series/charts on top of each other but on the same chart. For instance I could have two charts stacked vertically and when I move the cross-hair on one, it will move on the other almost as if the charts are linked. As well, I'd when I zoom in one, it would trigger the other to zoom. Please see the image at the bottom I "doctored" to give you an idea of what I'm trying to accomplish.
Things I've tried:
creating two completely separate charts and stacking them.
This is the closest I've gotten to what I need but they are still separate entities so it won't work for what I need, cross-hairs/zooming/etc. all need to work as though the charts are linked/combined.
In the options I tried the "stacking" option.
this won't work because it "stacks" or groups data, I want to literally have two separate series that might not have anything in common with each other.
Rendering muliple y-axis.
the only issue with this is that it's overlapped data, I'd like it to be offset so we can see it in a stacked layout.
I'm pretty new to using this library so if any of my terminology or explanation doesn't sound right, please sound off and I'll elaborate.
Thanks everyone!
I'm creating a page where javascript creates random numbers and then draws a Google line chart from it. the idea is that data will continue coming and the chart has to be updated. What I'm doing right now is redraw the chart for every new data addition, which means redrawing the entire chart 20 times a second. This however slows down the process considerably.
What I'm wondering is, is there a way to add a row to Google Charts and take out a row (like shift and push) and have the chart update without redrawing?
If that doesn't work do you guys have suggestions for live data visualization tools?
Google charts are images served by Google's API. There's no way to change just part of an image, you have to load a new image. If you want a chart that changes, look at HighCharts. It's a Javascript charting package that has examples like you want. D3 also is very powerful, but requires more work.
I am using jqPlot to show candlestick chart and the data is from XML.
I retrieve data from XML and put it into an array and then jqPlot creates a candlestick chart from that.
But the XML file contains lots of data so in the chart values are overlapping (with fixed width).
Is it possible to make a graph of lets say 10% of data and place a scrollbar and on every tick of scrollbar we rebuild graph with next data or there already exists such functionality of scrolling of graph/chart in jqPlot.
Please help me to resolve this.
Perhaps you can try Jonathan Cook's jqplot.annotatedTimeline.js available from the following URL:
https://bitbucket.org/j5bot/jqplot/downloads
You can see its features in action from:
http://screencast.com/t/mHY5eUV99XaT
Although I haven't tried this plugin yet it looks very good!
Its better to load XML at once, but not give the data at once to that jqPlot chart. Just make sure you are passing part of the data to jqPlot. Once you assign data to chart then go for the scrolling of data using jQuery or something like scroller code.
Whenever you scroll on this try to refresh or regenrate the chart by only the selected data.