innerHTML to Span

[Jonathan-Developer]

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.

[Jonathan-Developer]

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

[Jonathan-Developer]

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

[benpickles]

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

[Jonathan-Developer]

Thank you very much Ben, really appreciate it :)

[Jonathan-Developer]

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.

[benpickles]

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/