innerHTML to Span
Jonathan-Developer opened this issue · comments
Hi, I'm having a problem running the Peity Charts using innerHtml.
if a use an alert to show the content of the Span I can see perflecty all the values inserted into the Span tag using innerHTML but it doesn't show the line bar graph. If a place all the values manually into the Span Tag I can see the graph just fine.
`
<script>$(".line").peity("line")</script>`I have a function below the code above that has this code:
var test = "5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2"; document.getElementById("spanPeity").innerHTML = test; alert("content of span spanPeity= " + document.getElementById("spanPeity").innerHTML);
Could you please tell what's wrong in the code.
Thanks so much in advance.
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
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
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:
Thank you very much Ben, really appreciate it :)
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.
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/