Clever Geek Handbook

Setting up Highcharts PHP / MySQL

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

Some of the ultimate challenges we face now are

  • Problem. Whether pagination is possible in chart charts. Let's say we have 50 or 100 columns.

    How can we avoid overflowing our cards.

    For example take a look at this js script

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

  • Problem. If we insert an image or logo into a chart and try to export it with either jpg

    / jpeg

    , we get an error.

    on jsfidlle it works,

    but on our localhost the following error message appears.

    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:

+3


source to share


2 answers


1. Crowded charts

a. Have you tried to rotate the labels? This will greatly reduce the overcrowding of the decals you previously had.

Here's your fiddle labeled mod: http://jsfiddle.net/kayen/YSwk4/



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

Here's your Fiddle with a modem in the diagram: http://jsfiddle.net/kayen/QqPha/

I would suggest using the first option, as you can put a lot more values ​​in the same space and have a much cleaner diagram.

+5


source


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

Crowded Chart

I can think of three ways to avoid overflowing your cards:

Method 1. Let the user choose what to watch.

Either hide the addition visible: false

to some or all 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 might also consider adding a button to show / hide whatever you can achieve using:

Hide all:

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

Show all:



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

Method 2: Zoomming your way out of the problem

Alternatively, you can use zoomType: 'x'

in your chart so that the user can zoom in and see the data in detail, then the user can scroll with zoom left and right of the chart, or reset the zoom and select a different point to view.

Method 3: overflow

Alternatively you can create a giant chart and use overflow to allow scrolling of the chart or hide the overflow and control jQuery scrollX

and scrollY

.

Can you provide a code or link to the svg example script so I can test your code and see if I can help you with that?

Thank.

+8


source






More articles:


All Articles