chartszingchart
Is it possible to display shapes behind series/plots?
I am trying to recreate the following with ZingChart:
So far, I have everything except the gray lines between the label callout tips and the top of the bars. I tried to create the lines using shapes, but regardless of setting the z-index, the shapes always appear on top of the bars:
Is it possible to place shapes behind the plots? If not, is there another way I can achieve this design?
My JSON thusfar:
var myConfig = {
"type":"bar",
"labels":[
{
"text":"Zone 1",
"font-size":"13px",
"x":"5%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 2",
"font-size":"13px",
"x":"23%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 3",
"font-size":"13px",
"x":"40%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 4",
"font-size":"13px",
"x":"57%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 5",
"font-size":"13px",
"x":"75%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
}
],
"shapes":[
{
"type":"line",
"line-color":"#5297b6",
"line-width":2,
"points":[
[
75,
75
],
[
75,
320
]
],
"z-index":1,
"placement":"bottom"
}
],
"font-family":"proxima_nova_rgregular",
"title":{
"text":"MINUTES <b>IN ZONES</b>",
"font-family":"proxima_nova_rgregular",
"background-color":"none",
"font-color":"#39393d",
"font-size":"22px",
"adjustLayout":true,
"height":"175px",
"padding-bottom":"70px"
},
"mediaRules":[
{
maxWidth:564,
"width":"100%"
},
{
"minWidth":565,
"width":"565px"
}
],
"plot":{
"borderRadius":"5px 5px 0 0",
"animation":{
"delay":300,
"effect":11,
"speed":"500",
"method":"0",
"sequence":"3",
"z-index":2
},
"value-box":{
"placement":"top-out",
"text":"%v",
"decimals":0,
"font-color":"#35353b",
"font-size":"14px",
"alpha":1,
"backgroundColor":"#ffffff",
"padding":"5px",
"shadow":false
}
},
"plotarea":{
"border-left":"3px solid #39393d",
"padding-left":"3px",
"margin":"0 0 0 3px",
"background-color":"none"
},
"background-image":"http://www.fitmetrix.io/images/classListZoneChartBg.png",
"background-repeat":"no-repeat",
"background-position":"bottom left",
"scale-x":{
"line-color":"#39393d",
"line-width":3,
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"item":{
"visible":false
}
},
"scale-y":{
"visible":false,
"guide":{
"visible":false
}
},
"series":[
{
"values":[
40
],
"bar-width":"50%",
"background-color":"#cdcccc",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
15
],
"bar-width":"50%",
"background-color":"#71cbdc",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
34
],
"bar-width":"50%",
"background-color":"#8cc541",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
14
],
"bar-width":"50%",
"background-color":"#d96c27",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
20
],
"bar-width":"50%",
"background-color":"#ea2629",
"tooltip":{
"visible":false
},
"z-index":2
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>Solution
Final product image made by ZingChart export feature. Just right click on the chart and hit View As PNG
So the short answer is two things:
1) Attach the zone labels to scale-x and move the scale to the opposite side with placement:opposite.
2) Plot a line chart above the bars to get your grey line.
The benefits of plotting the lines is that you can apply animation to the line if you want. And if you want to take animation away, you can do that as well. The graph is generally pretty responsive and this solution hopefully fits your use case.
The lines themselves follow a simple formula plotting each line value as [barValue + 2, maxScaleYValue].
The only catch here is that I set a max scaleY value. The reason I did this is so the line stays consistent throughout resizing. If you are updating the chart dynamically this shouldn't be a problem, because you can update the max scaleY value as well. Just sort your array of bar values and choose the highest value + 30. Or some formula of your own!
The big changes I made to your code were:
- hook labels to scales
- hide scale lines and add plotarea border
- plot array of arrays
[[]]line graph - adjust your bar graph to be a single series with
stylesapplied to it
var maxYValue = 70;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var myConfig = {
"type":"mixed",
"font-family":"proxima_nova_rgregular",
"title":{
"text":"MINUTES <b>IN ZONES</b>",
"font-family":"proxima_nova_rgregular",
"background-color":"none",
"font-color":"#39393d",
"font-size":"22px",
"adjustLayout":true,
"padding-bottom": 50
},
"plot":{
"borderRadius":"5px 5px 0 0",
"bar-width": '50%',
"animation":{
"delay":300,
"effect":11,
"speed":"500",
"method":"0",
"sequence":"3",
"z-index":2
},
"value-box":{
"placement":"top-out",
"text":"%v",
"decimals":0,
"font-color":"#35353b",
"font-size":"14px",
"alpha":1,
"backgroundColor":"#ffffff",
"padding":"5px",
"shadow":false
}
},
"plotarea":{
"border-left":"3px solid #39393d",
"border-bottom": "3px solid #39393d",
"padding-left":"3px",
"margin":"dynamic",
"background-color":"none"
},
"tooltip": {
"visible": false
},
"scale-x":{
"placement": "opposite",
"line-width":0,
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"item":{
"visible":false
},
},
"scale-x-2": {
},
"scale-y":{
"max-value": maxYValue,
"visible":false,
"line-width":0,
"guide":{
"visible":false
}
},
"series":[
{
"type": "bar",
"values":[
value1, value2, value3, value4, value5
],
"background-color":"#cdcccc",
"z-index":2,
"styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
},
{
"type": "line",
"line-color": "grey",
"marker": { "visible": 0},
"value-box": {visible: 0},
"values": [
[0, value1 + 2],
[0, maxYValue],
[0, null],
[1, value2 + 2],
[1, maxYValue],
[1,null],
[2, value3 + 2],
[2, maxYValue],
[2,null],
[3, value4 + 2],
[3, maxYValue],
[3,null],
[4, value5 + 2],
[4, maxYValue],
[4,null],
]
}
],
"labels":[
{
"text":"Zone 1",
"font-size":"13px",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
'hook': 'scale:name=scale-x,index=0',
'offset-y': -45,
"calloutTip":{
'offset-y': -35,
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 2",
"font-size":"13px",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
'hook': 'scale:name=scale-x,index=1',
'offset-y': -45,
"calloutTip":{
'offset-y': -35,
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 3",
"font-size":"13px",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
'hook': 'scale:name=scale-x,index=2',
'offset-y': -45,
"calloutTip":{
'offset-y': -35,
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 4",
"font-size":"13px",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
'hook': 'scale:name=scale-x,index=3',
'offset-y': -45,
"calloutTip":{
'offset-y': -35,
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 5",
"font-size":"13px",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
'hook': 'scale:name=scale-x,index=4',
'offset-y': -45,
"calloutTip":{
'offset-y': -35,
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
}
],
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
<!--Inject End-->
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>- Why does 1.0/100.0 == 0.1/10.0 give True?
- How to organize the receive msg and user current input in C network such that it's clean
- Using inclusive scan syntax in OpenMP in the C language
- Unable to understand context in book "OOP in C" by Axel Schreiner
- How to dereference member from struct in which the definition is hid from user?
- variable-length array in struct with TI compiler in C (socket programming)
- A faster way to test 32bpp DDBs for a valid Alpha channel
- How can I compile the zephyr example-application as a freestanding application?
- Why does my forked process sometimes overwrite data in a file?
- Why in C can I initialize more values than the size of an array?
- _Generic in C needs typecasting?
- Declaring/defining an unused variable changes the output from an unrelated variable
- How to use gdb to explore the stack/heap?
- How can I read an input string of unknown length?
- Confused by difference between expression inside if and expression outside if
- Fast Arc Cos algorithm?
- Discrepancy of `unsigned long` size between llvm and gcc in riscv32
- GCC (C) - error: 'x' redeclared as different kind of symbol
- Why does GCC’s static analyser falsely warn that a pointer to an allocated memory block itself stored in an allocated memory block may leak?
- c language gcc compiler *.i file #3 "" 2 what is this?
- How to make clang compile to llvm IR
- Hashtable implementation in C
- EFI variables or config file on the EFI partition for EFI application?
- Pack high bit of every byte in ARM, for 64 bytes like AVX512 vpmovb2m?
- Calling an external C function (in a shared lib) from Perl with Inline::C does not work
- Can a C program detect if its own source code has been modified?
- Is this declaration UB?
- Eclipse C/C++ how to find variable belongs to which struct quickly
- Is this truly best way to delete last element in C?
- flint/arb.h: No such file or directory