Comments (6)
Hi, the problem was that i was placing the script line of the peity right after the span that has no values yet, I placed the line <script>$(".line").peity("line")</script>
after the innerHtml and now it works perfectly.
Now I have i dought with the properties of width and height for the graph. I want to add those properties to this line:
$(".bar").peity("bar", { fill: function(value) { return value > 200 ? "green" : "red" }})
if I add this { width: 300 } then it won't work the color validation.
also, how can I add more validations to assign more colors depending on the values?
Thank you
from peity.
Hi, I solved the width and height problem with the graph just using:
$(".bar").peity("bar", { width: 300 })
$(".bar").peity("bar", { height: 300 })
Now I need to vary the bar color depending on the value, something like this but it doesn't work:
$(".bar").peity("bar", {
fill: function(value) {
return value > 200 ? "green":
return value > 500 ? "blue":
return value > 900 ? "yellow" : "red"
}
})
How can I have more than one condition with a final else?
Thanks so much
from peity.
There are a couple of ways, first you need to switch the values round and start with the greatest then choose between:
Ternary-style:
return value > 7 ? 'yellow' :
value > 5 ? 'blue' :
value > 2 ? 'green' : 'red'
If/else-style:
if (value > 7) {
return 'yellow'
} else if (value > 5) {
return 'blue'
} else if (value > 2) {
return 'green'
} else {
return 'red'
}
You should probably also switch to using text()
instead of innerHTML
as it will keep you safe from malicious user input.
Here's a working example:
https://jsbin.com/zevilu/edit?html,js,output
from peity.
Thank you very much Ben, really appreciate it :)
from peity.
Hi Ben, I'm trying to change the color to the Line graph but it doesn't work the colour property neither strokeColour. The only property that works is strokeWidth. I saw this code in this page: http://jsfiddle.net/jpz3m/
$(".line").peity("line",{
colour: "#00B392",
strokeColour:"#882200",
strokeWidth:2,
}
);
Thanks in advance and sorry for asking too many questions.
from peity.
Not a problem, ask away :)
Those properties are from version 1.x, they've since been renamed to match SVG properties where possible so colour
and strokeColour
should now be fill
and stroke
.
Here's the fiddle updated with version 2+ syntax: http://jsfiddle.net/benpickles/myzqyuxq/
from peity.
Related Issues (20)
- Adding composer.json and submitting to packagist HOT 4
- Smooth animate pie chart on update HOT 2
- when using with bootstrap HOT 4
- This project should be renamed to piety HOT 1
- Charting fractional values HOT 1
- Add a mouseover to view data HOT 1
- Stacked bar HOT 1
- Any way to know if the numerator is greater than the denominator in a pie with delimiter /? HOT 2
- Semicircle donuts?
- show percentage in center donut HOT 1
- Further custom styling
- Change data-value to label
- data-value not working with "bar"
- Any react-native port?
- Required Two different color in Line chart HOT 1
- points calculated wrong in DataTables cell HOT 2
- can it have lables HOT 1
- Add ability to use CSS classes on SVG charts HOT 2
- jQuery version and Peity version always conflict HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from peity.