Highcharts customization PHP/MySQL

Question

I am trying to customize the charts and give a demo to our clients for their approval.

Some final issues we are facing now are,

1. Issue: Is pagination possible in highcharts for column charts. Suppose if we have 50 or 100 columns.

   How can we avoid our charts becoming crowded.

   For example take a look at this js fiddle

   http://jsfiddle.net/justin69/4xSNU/1/

2. Issue: If we embed an image or logo in to a chart and try to export it using either either jpg / jpeg we get an error.

   on jsfidlle it works,

   but on our localhost it gives the following error message.

   About to transcode 1 SVG file(s) Converting 551bc090a93c120f987375135e7744db.svg to temp/551bc090a93c120f987375135e7744db.jpg... ... error ( SVGConverter.error.while.rasterizing.file)
Error while converting SVG. SVG code for debugging:

Answer 1

Let's see if I can help you...

"Chart Crowded"

I can imagine three ways to avoid your charts to be "crowded":

Method 1: Let the user choose what to see.

Either hide adding visible: false to some or all your series, using this will allow the user to choose what data he wants to see. For example:

series: [
            {
                name: ...,
                data: ...,
                visible: false
            },
            ...
        ]

---

If you choose this example you could could also think about adding a button to show/hide all, that you can achieve by using:

Hide everything:

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].hide();

Show everything:

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].show();

---

Method 2: Zoomming your way out of the problem

In alternative you can use zoomType: 'x' in your chart allowing the user to zoom and see the data in detail, the user can then scroll with the zoom to the left and right of the chart or reset the zoom and choose another point to see.

---

Method 3: overflow

In alternative you can create a giant chart and use overflow to allow the chart div to be scrollable, or hide the overflow and manage the scrollX & scrollY trough jQuery.

---

Can you provide the code or link to fiddle of the svg example so I can check your code and see if I can help you with that?

Thank you.

Answer 2

1. Crowded Charts

a. Have you tried rotating the labels? This would significantly reduce the overcrowding on the labels that you earlier had.

Here's your Fiddle with the label mod: http://jsfiddle.net/kayen/YSwk4/

b. If you have a lot of values and are restricted by space on the x-axis, you can convert your column -type chart to a bar -type chart.

Here's your Fiddle with the bar-chart mod: http://jsfiddle.net/kayen/QqPha/

I would suggest using the first option as you can fit much more values in the same space and have a much cleaner chart.