Step 396
'
style>
.chart-wrap {
margin-left: 50px;
font-family: sans-serif;
height: 650px;
width: 300px;
}
.chart-wrap .title {
font-weight: bold;
font-size: 1.62em;
padding: 0.5em 0 1.8em 0;
text-align: center;
white-space: nowrap;
}
.chart-wrap.vertical .grid {transform: translateY(-175px) translateX(175px) rotate(-90deg);
}
.chart-wrap.vertical .grid .bar::after {transform: translateY(-50%) rotate(45deg);
display: block;
}
.chart-wrap.vertical .grid::before,.
chart-wrap.vertical .grid::after {
transform: translateX(-0.2em) rotate(90deg);
}
.chart-wrap .grid {
position: relative;
padding: 5px 0 5px 0;
height: 100%;
width: 100%;
border-left: 2px solid #aaa;
background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%);
}
.chart-wrap .grid::before {
font-size: 0.8em;
font-weight: bold;
content: "0%";
position: absolute;
left: -0.5em;
top: -1.5em;
}
.chart-wrap .grid::after {
font-size: 0.8em;
font-weight: bold;
content: "100%";
position: absolute;
right: -1.5em;
top: -1.5em;
}
.chart-wrap .bar {
width: var(--bar-value);
height: 50px;
margin: 30px 0;
background-color:#F16335;
border-radius: 0 3px 3px 0;
}
.chart-wrap .bar:hover {
opacity: 0.7;
}
.chart-wrap .bar::after {
content: attr(data-name);
margin-left: 100%;
padding: 10px;display: inline-block;
white-space: nowrap;
}
</style>
'+
'
Bar Chart for Cars and Brands'+
Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')
->collect(values|'
'
)
->asSeparatedList( )+ )+
'
'
Step
(Exerpt)