HighCharts: draw multiple segments in a single ser

Question

i'm asking myself if it's possible to do multiple lines (in a single serie) that are overlapping. I couldn't find any example for that :(

I don't want this: Highcharts / Highstock step line without vertical "transition" lines?

If i have a set of value like that:

serie1 = [
     [{x:5, y: 10}, {x:7, y: 10}], # segment 1
     [{x:2, y: 12}, {x:9, y: 12}], # segment 2

] 

I want to plot both lines which are in the same series so i can benefit from the interactivity (legend for example).

 y
 ^ 
 |
 |    ------------------segment2-------------------
 |           -----------segment1-------------
 |
 |---2-------5-------------------------------7-----9----------> x
        ______________________
        |                    |
        | Legend: - serie 1  |
        |____________________|                (I'm proud of my ASCII skills ! :D)

Is this possible ? Thanks

Answer 1

In general, each of series required sorted data by x-values. In your case it won't be sorted. So I would suggest to separate your data into different series and then connect series using linkedTo option. for example:

$('#container').highcharts({
    series: [{
        id: 'main',
        data: [{
            x: 5,
            y: 10
        }, {
            x: 7,
            y: 10
        }]
    }, {
        data: [{
            x: 2,
            y: 12
        }, {
            x: 9,
            y: 12
        }],
        linkedTo: 'main'
    }]
});

And live demo: http://jsfiddle.net/24qf98xL/1/

Answer 2

It seemed like an interesting challenge: putting multiple segments into a single series. Not sure how its done in HighCharts, but I was able to accomplish it using ZingChart through the key value pairs feature.

In the series area, I included pairs of values in brackets for each line segment, where I wanted space, I placed null values.

var myChart = {
"graphset":[
    {
        "type":"line",
        "title":{
            "text":"Average Metric"
        },
        "plotarea":{
            
        },
        "scaleX":{
            
        },
        "scaleY":{
            
        },
        "plot":{
            
        },
        "series":[
            {
                "values":[[1,10],
                [2,6],
                null,
                [1.5,4],
                [3,7],
                null,
                [4.5,5],
                [6.5,7],
                null,
                [4,6],
                [5,7]],
                "text":"Apple"
            }
        ]
    }
]
};

  zingchart.render({
            id : "myChart",
            height : "300px",
            width : "100%",
            data : myChart
        });

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

I'm on the ZingChart team so if you have any questions about how we created this example please feel free to reach out.