How can I create a multi line chart with different start and end points, like this image:
Thanks in advance
Add a comment
|
1 Answer
If you still need a solution, I can suggest ZingChart. In the demo below, I used XY value pairs to create a segmented line chart, then hid the plot itself and overlaid arrow objects on top of it. Note that the node indexes used in the arrows skip a number for each null value in the series array. Setting the guide line to red at zero was done with a simple rule.
Run the snippet to check out the chart. If you have any questions, give me a holler. I'm on the ZingChart team and happy to help!
var myConfig = {
"graphset": [{
theme: "none",
arrows: [{
"from": "node:plot=0,index=0",
"to": "node:plot=0,index=1",
"background-color": "green",
"border-color": "none",
size: 0.5
}, {
"from": "node:plot=0,index=3",
"to": "node:plot=0,index=4",
"background-color": "green",
"border-color": "none",
size: 0.5
}, {
"from": "node:plot=0,index=6",
"to": "node:plot=0,index=7",
"background-color": "green",
"border-color": "none",
size: 0.5
}, {
"from": "node:plot=1,index=0",
"to": "node:plot=1,index=1",
"background-color": "red",
"border-color": "none",
size: 0.5
}, {
"from": "node:plot=1,index=3",
"to": "node:plot=1,index=4",
"background-color": "red",
"border-color": "none",
size: 0.5
}, {
"from": "node:plot=1,index=6",
"to": "node:plot=1,index=7",
"background-color": "blue",
"border-color": "none",
size: 0.5
}],
"type": "line",
"scale-x": {
values: "1:9:1"
},
"scale-y": {
values: "-10:10:1",
guide: {
rules: [{
rule: "%v==0",
"line-color": "red"
}]
}
},
"plot": {
"aspect": "segmented",
visible: 0
},
"series": [{
"values": [
[2, 8],
[3, 6], null, [3, 5.7],
[4.3, 4.8], null, [4.5, 4.5],
[5, 3]
]
}, {
"values": [
[3.5, 3.5],
[4.5, 2.9], null, [4.5, 2.5],
[5.2, -0.5], null, [5.3, -2.8],
[5.9, -4.8]
]
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart">