score:2
You are hurting your users in two ways:
first they have to wait few second for the page to render and the whole browser freezes because JS engine is unresponsive
but more importantly, you are hurting them because you are displaying a bar chart with almost 1000 horizontal bars!
The second point is actually more important. Of course browsers vary in JavaScript performance (Chrome is known to be faster, however Firefox doesn't hang on my computer - but I know what you mean). Probably one day all browsers will happily render this chart in no-time.
But will your users appreciate a chart that is 10 screens long? Imagine a web page with thousands of rows in a single table. To the point - think about different data representation: maybe truncate the data after 20 samples and display extra "Others..." bar?
BTW I had a similar problem with jqplot - I was rendering 10+ simple charts on the same page. Just like in your case Firefox was screaming about script running too long. I fixed it by rendering one chart at a time with pauses. The page works like a charm, is much more responsive and pleasant.
score:0
I agree with the difficulty of showing this number of data points. This occurs, mostly in FF in other types of chart as well, in my case the column chart.
The difference here, is that there can be reasons for showing a trend over a large dataset, and Highcharts Zoom functionality makes such charts much more usable. The user can spot high spots and anomalies in a larger set, and zoom in to view the individual columns within that region. Also with column charts, the entirety of the presentation is on one page.
That said, the unresponsive script issue remains, and regardless of this type of requirement, it will be necessary to require the user to specify a subset of the data before rendering the chart.
Source: stackoverflow.com
Related Query
- Unresponsive Script and/or high response time for bar chart using HighCharts
- Real Time Bar chart using Highcharts and AngularJs
- Passing in Id for each data item in bar chart using highcharts
- Highcharts display label for pie chart using html table as data source
- set individual color for each bar in bar chart using highcharts
- Displaying count on bar and percentage on Y-axis of cloumn chart using Highcharts
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- Highcharts format labels on grouped stacked bar diagram with $ k, M for currency and 'hrs' for time
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Highcharts - Performance issue using chart with x values date and TIME
- Parsing CSV and then Using the Data to Build Highcharts Bar Chart
- I can't use gauge-solid and spline chart at the same time by using HighCharts
- How to create a column range chart in Highcharts using range and navigator functions?
- Highcharts percentage of total for simple bar chart
- Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox
- Using Highcharts and displaying a message over or on the chart when there is no data
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- Simple bar chart in jQuery HighCharts and MVC 2 application?
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Rails generates chart for .each do |x| using highcharts or any other chart API
- How to use add series and update methods in the high chart wrapper for angular?
- Importing JSON file into Highcharts for Bar Chart Visualization
- display pie chart using highcharts api and mysql
- Laravel 5.5 Console TV Bar Chart High Charts multipleDatasets and label
- Highcharts bar chart with fixed bar widths and gaps
- Splitted bar chart for paired data with highcharts
- highcharts minPointLength do not work for unstacked bar chart
- Converting high chart to image and send to server using ajax call
More Query from same tag
- Creating 100% stacked area graph for a website
- Series fillColor for marker on hover ONLY
- Highcharts IE issues with jQuery ajax load
- How do I change the tool tip color in highchart?
- Change color code on colum, depending on data value (highchartJS)
- Highcharts programmatically add extra text label to y axis
- In highstock 1.3.0, when zooming in full, the graph draws all messed up
- Highcharts: Why text of dataLabels inside column bar are not getting justified and are overflowing
- Click event in treemap in highcharts
- Highchart fill area only between two series
- Highchart pie legend circles
- How to change the distance between lines of grid?
- Multiple series in HighStock charts
- How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?
- How to put two y-axis on a wicketcharts-highcharts chart in Java
- Highcharts: Datalabels outside when unsufficient space inside, using Google spreadsheets
- highcharts column chart json data is not accepted
- Highcharts show plot value on x axis label
- HighCharts: Display total value below the legend title
- Customize Highchart Map's legend type and color
- Highcharts tickAmount off by 1
- Highcharts Sankey Colors not working in django
- Position shared tooltip above the stacked columns
- Locking the zoom in on Mapview?
- Highcharts heatmap chart labels render extremely slow
- Why is Highcharts not working in PHP?
- highcharts How to automatically extended columns
- How to make highcharts display date in hh:mm:ss format, not as timestamp?
- Highcharts visualize, style series
- Highchart, How to resize auto if there is a lot of data, then scale accordingly to make all the data visible
