I am working on a mobile application that contains different line charts . I have been trying to apply gradient colors to a line (single) chart fill color. But unfortunately I could not.
Is it possible to apply color gradients to a line fill color? Please help.
Check out this article: http://www.sencha.com/learn/learning-sencha-touch-charts/
sample styling with SASS:
chart {
colors: linear-gradient(45, rgb(212, 40, 40), rgb(117, 14, 14))
linear-gradient(45, rgb(180, 216, 42), rgb(94, 114, 13))
linear-gradient(45, rgb(43, 221, 115), rgb(14, 117, 56))
linear-gradient(45, rgb(45, 117, 226), rgb(14, 56, 117))
linear-gradient(45, rgb(187, 45, 222), rgb(85, 10, 103));
background: linear-gradient(45, #444, #111);
series {
stroke-width: 2;
&:nth-child(1) {
fill: linear-gradient(0, rgb(212, 40, 40), rgb(117, 14, 14));
}
&:nth-child(2) {
fill: linear-gradient(0, rgb(180, 216, 42), rgb(94, 114, 13));
}
&:nth-child(3) {
fill: linear-gradient(0, rgb(43, 221, 115), rgb(14, 117, 56));
}
&:nth-child(4) {
fill: linear-gradient(0, rgb(45, 117, 226), rgb(14, 56, 117));
}
&:nth-child(5) {
fill: linear-gradient(0, rgb(187, 45, 222), rgb(85, 10, 103));
}
}
axis {
stroke: #555;
fill: #555;
label {
fill: #eee;
}
title {
fill: #eee;
}
}
}
Also note this earlies post: Sencha Touch Charts style
Related
The values in each bar can be seen after mouse hover
I am trying to get the text from the bar-chart in this picture. It doesn't have any element so that I cannot get the text. It only show in dom tree.
The dom element after i inspect the canvas
After inspecting the canvas i can only see canvas eleement with no other child element so that i can get the text from the graph.
Can anyone help me how can I get the values from the bar in this bar-chart ?
The link to the website i am trying is below The website where i am trying to automate canvas elements
I think you can use the logic which is image and text inside the container class.In this way your image can appear in front of your text our wherever you want without any overflow.I guess this should work for canvas.You can check this link : https://www.w3schools.com/howto/howto_css_image_text.asp
The data of the bar chart is availabe in the javascript:
<script>
//Basic example
var ctxB = document.getElementById("myChart").getContext('2d');
var myBarChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '% of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
optionss: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
See this on how to extract javascript variables:
Reading JavaScript variables using Selenium WebDriver
So that tooltip is a separate element AFAIK, so you need to get some attribute of the tooltip element. Take a look in dev tools
But if you want to extract the value from actual canvas and if you have this code that generate this chart than you need to evaluate a code against that element like so:
let programNames = await this.$barsSection.evaluate("programs"),
programsData = await this.$barsSection.evaluate("data");
You may need to contact developers to find out what is the property name that you're looking for
I'd like to refactor this code if possible, I didn't find something to figure it out :
$javascript: rgb(238, 218, 103);
$php: rgb(119,125,176);
$ruby: rgb(197, 25, 17);
.isjavascript {
color: $javascript;
}
.isphp {
color: $php;
}
.isruby {
color: $ruby;
}
Well, you could use a map.
$languages-color: (
'javascript': rgb(238, 218, 103),
'php': rgb(119,125,176),
'ruby': rgb(197, 25, 17)
);
#each $label, $color in $languages-color {
.is#{$label} {
color: $color;
}
}
I am trying to get the background color to appear in safari and it is not working. it works in chrome and firefox but no luck in safari. serious answers only please. here is my code i have in css.
main {
background-color: rgb(254, 236, 89, 0.85);
width: 960px;
padding-top: 130px;
padding-bottom: 87px;
}
In order to set an opacity on a background color you need to set the alpha of your color. So your color should be an rgba value, not rgb:
main {
background-color: rgba(254, 236, 89, 0.85);
}
Instead of
background-color: rgb(254, 236, 89, 0.85);
please try to use:
background-color: rgb(254, 236, 89);
opacity: 0.85;
so the complete solution will look like:
.main { background-color: rgb(254, 236, 89); opacity: 0.85; width: 960px; padding-top: 130px; padding-bottom: 87px; }
Hope this is the solution you were looking for.
I see animations for Chartist line graphs (http://gionkunz.github.io/chartist-js/examples.html#example-line-path-animation), but none where the line literally draws itself out from left to right. Is that possible?
Not my solution, but it seems to do what you want.
HTML
<div class="ct-chart ct-golden-section"></div>
CSS
$color1: #ada8b6; //rgba(173, 168, 182, 100)
$color2: #ffeedb; //rgba(255, 238, 219, 100)
$color3: #4c3b4d; //rgba(76, 59, 77, 100)
$color4: #a53860; //rgba(165, 56, 96, 100)
$color5: #61c9a8; //rgba(97, 201, 168, 100)
body {
width: 100vw;
height: 100vh;
background: #111;
}
.ct-chart {
width: 90vw;
max-width: 1100px;
height: 375px;
margin: 5vh 6.5vw;
svg {
width: 100%;
}
}
.ct-grids line {
stroke: $color3;
opacity: 0.4;
}
.ct-labels span {
color: $color3;
}
#mixin pathseries($length, $delay, $strokecolor) {
stroke-dasharray: $length;
stroke-dashoffset: $length;
animation: draw 1s $delay ease both;
fill: none;
stroke: $strokecolor;
opacity: 0.8;
}
.ct-series-a {
#include pathseries(1093, 0s, $color1);
}
.ct-series-b {
#include pathseries(1665, 0.25s, $color5);
}
.ct-series-c {
#include pathseries(1644, 0.5s, $color2);
}
.ct-series-d {
#include pathseries(1540, 0.75s, $color4);
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
JS
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[11, 12, 13, 11, 12, 10, 11, 10],
[12, 11, 17, -1, 0, 18, -2, 8],
[0, 8, 12, 1, 15, 3, 18, 1],
[3, 2, 12, 15, 16, 3, 18, -3]
]
}, {
high: 20,
low: -3,
fullWidth: true,
// As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20
}
});
setTimeout (
function() {
var path = document.querySelector('.ct-series-a path');
var length = path.getTotalLength();
console.log(length);
},
3000);
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Color legend for grid panel in ExtJS4
I have a requirement which states that each cell in the grid can take any color out of available 8 colors based on some criteria. To implement this I have used "renderer" function in column and set tdCls of meta property to css class, but its not working. Can someone help me to resolve this.
Please find sample code below.
/** View class which contains grid panel*/
Ext.define('xxx.xxx.TestView', {
extend:'Ext.grid.Panel',
columns:[{
header:'A',
dataIndex:'a',
flex:1,
//rendering function here
renderer:function(value, metaData, record, rowIndex, colIndex, store) {
var cssClass = 'norepl';
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
}
metaData.tdCls += cssClass; //attaching css property to tdCls of meta
return value;
}
}
});
/** available 8 css classes for coloring*/
.replgrp0 .x-grid-cell {
background-color: #f0f6ff;
color: #09d6ff;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp1 .x-grid-cell {
background-color: rgba(255, 183, 189, 0.22);
color: #900;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp2 .x-grid-cell {
background-color: #e2ffe2;
color: #090;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp3 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.12);
color: #99890e;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp4 .x-grid-cell {
background-color: rgba(186, 242, 250, 0.10);
color: #1a4f99;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp5 .x-grid-cell {
background-color: rgba(255, 242, 239, 0.23);
color: #ff7f00;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp6 .x-grid-cell {
background-color: rgba(228, 224, 255, 0.7);
color: rgba(29, 7, 255, 0.60);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp7 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.32);
color: rgba(255, 22, 12, 0.65);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.norepl .x-grid-cell {
background-color: rgb(255, 255, 255);
color: rgb(255, 127, 0);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
Thanks and Regards,
Nari
I seem to recall doing something like
renderer:function(value, metaData, record, rowIndex, colIndex, store){
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
value="<div class="+cssClass+">"+value+"</div>
}
return value;
This is probably the wrong way to do it though :)