Geek asks and answers

Many different types of charts are grouped, a column type with a y value as color

What is the best way to create a chart with several types when it should include a type that has the following form of visual representation.

| yellow   |blue|     gray      |  yellow |   gray   |

i.e. a type that is one-dimensional (but visually has a height), and the color indicates "y" (which here consists of the categories: yellow, blue, gray)

You can also stack them:

| radical         | senseless |         high tension |
| yellow   |blue|     gray      |  yellow |   gray   |

I can achieve this by having a column with a typed chart with a series for each category:

http://jsfiddle.net/RCnYV/

But how can I add another type of chart above, for example:

yAxis (only for the line)
^                                                      ___
|-------            ___________________________   ____/
|       \__________/                           \/
|     radical         | senseless |         high tension |
|     yellow   |blue|     gray      |  yellow |   gray   |
-----------------------------------------------------------> xAxis (shared)

, ( ) . , xAxis , .. . "", - ( , ?).

? , , 2 * , , .

+1
1

- @http://jsfiddle.net/jugal/cABfL/? , height yAxis top,

        yAxis: [{
            top: 300,
            lineWidth: 2,
            offset: 0,
            height: 200,
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
                }
            }

            },
        {
            height: 200,
            lineWidth: 2,
            offset: 0,
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.value + 50;
                }
            }

            }],

@http://www.highcharts.com/stock/demo/candlestick-and-volume


(Also what other ways are there to create a similar chart?). - , , , highchart , , .

.
, , 1 1 . , , , - , ( , ), , , , X - Y, , .. , , X.

, . ( lineWidth:50) ( Y ) , , . Y , . , Y , . , , , mouseOver . , , , , , ( , ) .

    // usage: createSeries([0, 3, 4, 6], 1)
    // Creates 4 series and assigns them all to yAxis 1
    // you can extend this to take colors etc too, as per requirement
    function createSeries(data, yAxisIndex) {
        var i;
        var series = [];
        for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
            var start = data[i];
            var end = data[i + 1];
            series.push({
                yAxis: yAxisIndex,
                animation: false,
                stack: 0,
                data: [[start, 0], [end, 0]],
                lineWidth: 50,
                marker: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: function() {
                        return "";
                    }
                },
                events: {
                    mouseOver: function() {
                        alert(this.data[1].x - this.data[0].x);
                    }
                },
                showInLegend: false

            });
        }
        return series;
    }

, , - , highchart.

jsFiddle: http://jsfiddle.net/jugal/cABfL/

+3

More articles:


All Articles