SASS mixin with if statements to handle conditions - sass

I was writing a mixin in SCSS to handle a map (padding, margin, etc etc), but I am getting a little stuck with all the #if logic to get the proper output.
In my defaults.scss file I have 2 variable, $size and $prefixes:
$size: auto, 1, 2, 2\.5, 4;
$prefixes: (
padding: (
top: "pt",
right: "pr",
bottom: "pb",
left: "pl",
x: "px",
y: "py",
all: "p",
),
);
I created mixin.scss that would take in $sizes, $prefixes, and a $property (ie "padding") like:
#include mixer.create-space(
$sizes: $sizes,
$prefixes: $padding,
$property: "padding"
);
The $padding in this case was just assigned earlier with map.get like
$padding: map-get($prefixes, "padding");
I know I need to #each through the $sizes and #each through the $prefixes to assign the right values, but I am really getting lost in my conditions.
px and py need 2 properties each (left/right || top/bottom)
if $size == auto, only assign to px/py (Currently it is being added to every class)
#mixin create-space($sizes, $prefixes, $property) {
// $size => 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
#each $size in $sizes {
// $alignment => "top", "bottom", "left", "right", "y", "x", "all"
// $prefix => "pt", "pr", "pb", "pl", "py", "px", "p"
#each $alignment, $prefix in $prefixes {
// If $alignments is x, then $property-left and $property-right
// If $alignments is y, then $property-top and $property-bottom
// If $alignments is all, then $property
// If $size is auto for $alignment top, right, bottom, left, then $property: auto
#if $alignment == "x" {
.#{$prefix}-#{$size} {
#{$property}-left: calc(($size * 4) / 16) + rem;
#{$property}-right: calc(($size * 4) / 16) + rem;
}
} #else if $alignment == "y" {
.#{$prefix}-#{$size} {
#{$property}-top: $size * 4;
#{$property}-bottom: calc(($size * 4));
}
} #else if $size == "auto" {
.#{$prefix}-#{$size} {
#{$property}: auto;
}
} #else if $alignment == "all" {
.#{$prefix}-#{$size} {
#{$property}: calc(($size * 4) / 16) + rem;
}
} #else {
.#{$prefix}-#{$size} {
#{$property}-#{$alignment}: calc(($size * 4) / 16) + rem;
}
}
}
}
}
My mixin does work, but I run into errors when I am trying to calc the $size into rems when I run into $size: auto etc. Really, it is just becoming a mess.
** Edit **
It really seems that the decimal numbers were throwing everything off in the long run.

Related

How to externally trigger datalabels-plugin (active) - ChartJS

I'm playing with this code:
https://jsfiddle.net/netquik/e3jp2k5o/37/
First created a plugin to hightlight Labels (ticks) on x axis when hovering on chart bars (used mousemove for now). Then i tried trigger externally setActiveElements for chart and tooltip. And it seems to work as intended.
expected result
My problem is i can't find a way to "update" datalabels at the same time so it can show me datalabels. In the code you can see i tried manually enable some $context property of $datalabels with no luck. After setActiveElements externally i see in debugging that datalabels trigger itself after chart update and try
display: function (context) {
return context.active; // display labels if active
},
but even if the element in chart is "active" ti return a false context.active.
Could be a problem of interaction modes? Thanks for your help.
trigger result without datalabel
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# VOTES',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
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)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else if (event.type === 'mousemove') {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
}
}
}
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: 'rgba(255, 159, 64, 1)',
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return context.active; // display labels with an odd index
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
if (stat) {
console.log(stat);
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
//stat.$datalabels._hovered = true;
stat.$datalabels._datasets[0][1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].$context.active = true;
stat.$datalabels._labels[1].$context.active = true;
stat.$datalabels._labels[1]._el.active = true;
stat.$datalabels._labels[1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].update(stat.$datalabels._datasets[0][1].$context);
stat.$datalabels._labels[1].update(stat.$datalabels._labels[1].$context);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}
Found a solution
I just modified the display function for datalabels integrating my external variable lastLabelH
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# USERS',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
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)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
/* if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else */
labelcolor(c);
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: function(c) {
return lastLabelH != null && c.index == lastLabelH ? "rgba(255, 255, 64, 1)" : "rgba(255, 159, 64, 1)";
},
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return lastLabelH != null && context.dataIndex == lastLabelH || context.active;
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
function labelcolor(c) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
c.update();
}
}
}
if (stat) {
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
labelcolor(stat);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}
body {
background-color: grey;
}
#stat {
margin-top: auto;
}
#content {
width: 300px;
margin: auto;
}
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div id="content">
<canvas id="stat" width="300" height="300" style="margin-top:10px"></canvas>
<input id="activate" type="button" value="Vergingetorige">
</div>
</div>
had to modify the color fuction to update when set null lastLabelH i also add color label from external trigger
updated jsfiddle
https://jsfiddle.net/netquik/e3jp2k5o/41/

struggling with sass each output is empty

I'm about to try something pretty similar to this: https://stackoverflow.com/a/8380156/2309928
I've got this scss code:
$max-width: 95vw;
$max-height: 95vh;
$styleFactors: ("very-large": 1, "large": 0.75, "normal": 0.4, "small": 0.35);
#each $widthOrHeight in "width", "height"{
#each $style, $factor in $styleFactors {
$max-size: if($widthOrHeight == "width", $max-width, $max-height);
.#{$widthOrHeight}-#{$style} {
$style: calc(#{$max-size} * #{$factor});
}
}
}
expected output should look something like this:
.width-very-large{
width: calc(95vw * 1);
}
.width-large{
width: calc(95vw * 0.75);
}
.width-normal{
width: calc(95vw * 0.4);
}
.width-small{
width: calc(95vw * 0.35);
}
//...
//and same with height
but there is no output at all and I'm out of ideas why this is happening..
theres no error or anything
Try it out on Sassmeister
You do not actually apply any styles and empty styles are simply removed. If you add for instance #{$widthOrHeight}: $style; after $style: calc(#{$max-size} * #{$factor}); you will see an output.
updated Sassmeister:
fault was at line 17:
$max-width: 95vw;
$max-height: 95vh;
$styleFactors: ("very-large": 1, "large": 0.75, "normal": 0.4, "small": 0.35);
#each $widthOrHeight in "width", "height"{
#each $style, $factor in $styleFactors {
$max-size: if($widthOrHeight == "width", $max-width, $max-height);
.#{$widthOrHeight}-#{$style} {
#{$widthOrHeight}: calc(#{$max-size} * #{$factor});
}
}
}

React Native: How to swipe something off screen with bounce?

I'm trying to make something where you can swipe the overlay off the screen.
This is what I have so far using PanResponder, but I don't feel like it's very clean. It's my first time using it so I'm wondering if there's a better way of doing this.
I need to animate the green part and more so I'd like to build this by hand if possible without using a package.
My component looks like this (heavily copied off this guy:
https://github.com/brentvatne/react-native-animated-demo-tinder/blob/master/index.ios.js)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
PanResponder,
Animated,
Dimensions,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000000',
},
overlay: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#0000ff',
},
video: {
position: 'absolute',
backgroundColor: '#00ff00',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
function clamp(value, min, max) {
return min < max
? (value < min ? min : value > max ? max : value)
: (value < max ? max : value > min ? min : value)
}
export default class EdmundApp extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({x: this.state.pan.x._value, y: 0});
this.state.pan.setValue({x: 0, y: 0});
},
onPanResponderMove: Animated.event([
null, {dx: this.state.pan.x, dy: 0},
]),
onPanResponderRelease: (e, {vx, vy}) => {
this.state.pan.flattenOffset();
if (vx >= 0) {
velocity = clamp(vx, 3, 5);
} else if (vx < 0) {
velocity = clamp(vx * -1, 3, 5) * -1;
}
if (Math.abs(this.state.pan.x._value) > 150) {
Animated.decay(this.state.pan, {
velocity: {x: velocity, y: vy},
deceleration: 0.98
}).start()
} else {
Animated.spring(this.state.pan, {
toValue: {x: 0, y: 0},
friction: 4
}).start()
}
}
});
}
render() {
let { pan } = this.state;
let translateX = pan.x;
let swipeStyles = {transform: [{translateX}]};
return (
<View style={styles.container}>
<View style={styles.video}></View>
<Animated.View style={[styles.overlay, swipeStyles]} {...this._panResponder.panHandlers}>
</Animated.View>
</View>
);
}
}
AppRegistry.registerComponent('EdmundApp', () => EdmundApp);
Please go through this https://github.com/oblador/react-native-animatable
There is an option for bounce and exit which will help you for sure.

generate classes from Scss / Sass nested map

How does one generate a list of classes for each key that has a single value inside a Scss/Sass map?
For example, from this Scss map (disregard nested naming conventions, this will be used for many maps of varying purposes):
(See Codepen: http://codepen.io/harlanlewis/pen/emWVrr (thanks cimmanon!))
$palette: (
brown: hsl(33,35,50),
blue: hsl(207,80,50),
green: (
0: hsl(157,65,65),
1: hsl(157,50,50),
alt: (
0: hsl(125,65,65),
),
),
red: (
0: hsl(0,60,50),
alt: (
0: hsl(0,100,50),
),
),
yellow: (
0: hsl(50,100,60),
1: hsl(50,100,100),
),
};
-
#mixin map-to-class($map, $selector: '', $property: '') {
$selector: if($selector == '' and &, &, $selector);
#each $key, $value in $map {
#if type-of($value) == map {
$selector: selector-append($selector, #{$key});
#include map-to-class($value, $selector, $property) {
#content;
}
} #else {
#at-root #{$selector}#{$key} {
#{$property}: $value;
};
};
};
};
#include map-to-class($palette, '.u-fg__', 'color')
...desired classes to generate:
.u-fg__brown { color: hsl(33,35,50) }
.u-fg__blue { color: hsl(207,80,50) }
.u-fg__green0 { color: hsl(157,65,65) }
.u-fg__green1 { color: hsl(157,50,50) }
.u-fg__greenalt0 { color: hsl(125,65,65) }
.u-fg__red0 { color: hsl(0,60,50) }
.u-fg__redalt0 { color: hsl(0,100,50) }
.u-fg__yellow0 { color: hsl(50,100,60) }
.u-fg__yellow1 { color: hsl(50,100,80) }
The actual (incorrect) generated classes are: (note greenredyellow instead of just yellow)
... (brown, blue, and green are fine) ...
.u-fg__green0 { color: hsl(157,65,65) }
.u-fg__green1 { color: hsl(157,50,50) }
.u-fg__greenalt0 { color: hsl(125,65,65) }
.u-fg__greenred0 { color: hsl(0,60,50) }
.u-fg__greenredalt0 { color: hsl(0,100,50) }
.u-fg__greenredyellow0 { color: hsl(50,100,60) }
.u-fg__greenredyellow1 { color: hsl(50,100,80) }
What you're looking for is a recursive mixin. Walk through the mapping. If the value is a mapping, call itself otherwise print out the property/value.
$palette: (
'brown': hsl( 33, 35, 50),
'blue': hsl(207, 80, 50),
'green': (
0: hsl(157, 65, 65),
1: hsl(157, 50, 50),
alt: (
0: hsl(125, 65, 65),
),
),
'red': (
0: hsl(0, 60, 50),
alt: (
0: hsl(0, 100, 50),
),
),
'yellow': (
0: hsl(50, 100, 60),
2: hsl(50, 100, 100),
),
);
#mixin map-to-class($map, $property, $sel, $divider: '') {
$sel: if($sel == '' and &, &, $sel);
#debug $sel;
#{$sel} {
#each $k, $v in $map {
#at-root #{$sel}#{$divider}#{$k} {
#if type-of($v) == map {
#include map-to-class($v, $property, '', $divider) {
#content;
}
} #else {
#{$property}: $v;
}
}
}
}
}
#include map-to-class($palette, color, '.u-fg__', '');
Output:
/* line 33, ../sass/test.scss */
.u-fg__brown {
color: #ac8453;
}
/* line 33, ../sass/test.scss */
.u-fg__blue {
color: #198ae6;
}
/* line 33, ../sass/test.scss */
.u-fg__green0 {
color: #6ce0b3;
}
/* line 33, ../sass/test.scss */
.u-fg__green1 {
color: #40bf8e;
}
/* line 33, ../sass/test.scss */
.u-fg__greenalt0 {
color: #6ce075;
}
/* line 33, ../sass/test.scss */
.u-fg__red0 {
color: #cc3333;
}
/* line 33, ../sass/test.scss */
.u-fg__redalt0 {
color: red;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow0 {
color: #ffdd33;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow2 {
color: white;
}
Note that I quoted your mapping key names. Sass will convert those to their hex code equivalents under certain compression types.

Angle tag solutions for Graphael multiple line chart

I've tried to create an multipleline chart with tag for each node.
Every things ok. But some time the tags are showed not good when the values are nearly.
Any one have solution for this problem. Thank!
http://www.flickr.com/photos/96516997#N02/8973858413/
This is my
Graphael Line Chart
<script src="js/raphael-min.js"></script>
<script src="js/g.raphael-min.js"></script>
<script src="js/g.line-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.block {
text-align: center;
background: #c0c0c0;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered1{
display: inline-block;
vertical-align: middle;
width: 97%;
background: #f5f5f5;
}
.centered2{
text-align: left;
display: inline-block;
vertical-align: middle;
width: 97%;
background: #f5f5f5;
}
</style>
<script type="text/javascript">
var hidedChart = [ false, false, false, false];
var paper;
var chart;
var xData = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ];
var yData = [ [ 31, 62, 3, 4, 5, 60, 47, 8, 9, 10, 51, 72 ],
[ 31, 33, 44, 11, 55, 60, 71, 82, 19, 141, 23, 34 ],
[ 3, 2, 49, 64, 51, 26, 43, 14, 39, 10, 41, 32 ],
[ 10, 330, 50, 34, 53, 12, 67, 84, 32, 171, 239, 36 ]];
var colory = [ "#9e1316", "#007fff", "#104421", "#734f96", "#b43f26" ];
var xAxis = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec" ];
var direcTag = [ 'right', 'up', 'left', 'down' ];
var angle = [0,45,90,135,180,225,270,315];
var options = {
symbol : "circle",
nostroke : false,
smooth : false,
colors : colory,
shade : true,
fill : "transparent",
axis : "0 0 1 1",
axisxstep : xAxis.length - 1,
axisystep : 5
};
window.onload = function() {
paper = Raphael("no", "800", "550");
//line chart object
chart = drawLineChart(34, 35, 600, 450, xData, yData, options);
addCheckBox(yData.length);
}
$(window).load(function(){
});
function drawLineChart(x, y, w, h, xdata, ydata, options) {
var lines = paper.linechart(x, y, w, h, xdata, ydata, options);
lines.hoverColumn(hoverColumn, unhoverColumn);
//set x Axis label
$.each(lines.axis[0].text.items, function(index, label) {
this.attr("text", xAxis[index]);
});
for ( var i = 0; i < ydata.length; i++) {
lines.shades[i].attr({
fill : "transparent"
});
}
lines.symbols.attr({
r : 4
});
return lines
}
function hoverColumn() {
this.tags = paper.set();
for ( var i = 0, ii = this.y.length; i < ii; i++) {
if (hidedChart[i] == false) {
var nTag;
nTag = paper.drop(this.x, this.y[i], this.values[i],
angle[i]);
this.tags.push(nTag.insertBefore(this).attr([ {
fill : colory[i]
}, {
fill : "#ffffff"
} ]));
}
}
}
function unhoverColumn() {
this.tags && this.tags.remove();
}
function showHideLine(num) {
if((!$("#LINE"+num).is(':checked')) != hidedChart[num]){
hidedChart[num] = !hidedChart[num];
if (hidedChart[num] == true) {
chart.lines[num].attr({
opacity : 0
});
chart.symbols[num].attr({
opacity : 0
});
} else {
chart.lines[num].attr({
opacity : 100
});
chart.symbols[num].attr({
opacity : 100
});
}
}
}
function addCheckBox(num) {
$("#lineCheck").empty();
for ( var i = 0; i < num; i++) {
//CHECK BOX
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "LINE" + i;
checkbox.style.margin = "7px";
checkbox.checked = "checked";
$(checkbox).click(function() {
for ( var j = 0; j < num; j++) {
showHideLine(j);
}
});
//LABEL
var label = document.createElement("label");
label.htmlFor = "LINE" + i;
label.appendChild(document.createTextNode("Line " + (i + 1)));
//BREAK LINE
var br = document.createElement("br");
$("#lineCheck").append(checkbox);
$("#lineCheck").append(label);
$("#lineCheck").append(br);
}
}
</script>
</head>
<body>
<div id="padLeft" class="block" style="float: left; width: 84%; height: 100%;">
<div id="no" class="centered1"></div>
</div>
<div id="padRight" class="block" style="float: right; height: 100%; width: 15%;" align="left">
<div id="lineCheck" class="centered2"></div>
</div>
</body>
</html>

Resources