styleColorSelectorsChart
Colorize the chart of the selection. Use "hex" values or "html" color-names.
Specification
Default implementation: { styleColorSelectorsChart : ["#EE752F", "#5186EC"] }
Key
Name | Alias | Category |
styleColorSelectorsChart | style__color__selectors__chart | Style |
Value
Allow hex values including short writing needs to with starting with #.
Default | Validation | Type |
["#EE752F", "#5186EC"] | ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$ | Array |
Example A.
Set palette to: ["yellow", "red", "green"]
Output
Open output in a blank window. Download examples as zip.
Parameters
This dataset shows the mobile and desktop google pagerank performance score for a certain website.
Value | Type | |
---|---|---|
Source | "https://docs.statosio.com/data/performance.json" | |
X | "name" | String |
Y | [ "mobile", "desktop" ] | Array |
Options | { "styleColorSelectorsChart" : ["yellow", "red", "green"], "dataXSelectors" : ["Spock"] } | Object |
Javascript
- Invoke Function
d3.statosio(
file,
"name",
[ "mobile", "desktop" ],
{ "styleColorSelectorsChart" : ["yellow", "red", "green"], "dataXSelectors" : ["Spock"] }
)
- HTML Implementation
<!DOCTYPE html>
<head>
<title>docs.statosio - styleColorSelectorsChart</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>
</head>
<body>
<script>
d3.json( "https://docs.statosio.com/data/performance.json" )
.then( ( file ) => {
d3.statosio(
file,
"name",
[ "mobile", "desktop" ],
{ "styleColorSelectorsChart" : ["yellow", "red", "green"], "dataXSelectors" : ["Spock"] }
)
} )
</script>
</body>
Ruby
- Gem Install
gem install statosio
gem install prawn
gem install prawn-svg
gem install open-uri
- Implementation
require "statosio"
require "open-uri"
require "prawn"
require "prawn-svg"
url = "https://docs.statosio.com/data/performance.json"
file = OpenURI::open_uri( url ).read
dataset = JSON.parse( file )
statosio = Statosio::Generate.new
chart = statosio.svg(
dataset: dataset,
x: "name",
y: [ "mobile", "desktop" ],
options: {"styleColorSelectorsChart"=>["yellow", "red", "green"],
"dataXSelectors"=>["Spock"]}
)
Prawn::Document.generate( "statosio.pdf" ) do | pdf |
pdf.svg( chart, width: 500 )
end
Example B.
Set palette to: ["#f59351", "#c9504a", "#12514c"]
Output
Open output in a blank window. Download examples as zip.
Parameters
This dataset shows the mobile and desktop google pagerank performance score for a certain website.
Value | Type | |
---|---|---|
Source | "https://docs.statosio.com/data/performance.json" | |
X | "name" | String |
Y | [ "mobile", "desktop" ] | Array |
Options | { "styleColorSelectorsChart" : ["#f59351", "#c9504a", "#12514c"], "dataXSelectors" : ["Spock"] } | Object |
Javascript
- Invoke Function
d3.statosio(
file,
"name",
[ "mobile", "desktop" ],
{ "styleColorSelectorsChart" : ["#f59351", "#c9504a", "#12514c"], "dataXSelectors" : ["Spock"] }
)
- HTML Implementation
<!DOCTYPE html>
<head>
<title>docs.statosio - styleColorSelectorsChart</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>
</head>
<body>
<script>
d3.json( "https://docs.statosio.com/data/performance.json" )
.then( ( file ) => {
d3.statosio(
file,
"name",
[ "mobile", "desktop" ],
{ "styleColorSelectorsChart" : ["#f59351", "#c9504a", "#12514c"], "dataXSelectors" : ["Spock"] }
)
} )
</script>
</body>
Ruby
- Gem Install
gem install statosio
gem install prawn
gem install prawn-svg
gem install open-uri
- Implementation
require "statosio"
require "open-uri"
require "prawn"
require "prawn-svg"
url = "https://docs.statosio.com/data/performance.json"
file = OpenURI::open_uri( url ).read
dataset = JSON.parse( file )
statosio = Statosio::Generate.new
chart = statosio.svg(
dataset: dataset,
x: "name",
y: [ "mobile", "desktop" ],
options: {"styleColorSelectorsChart"=>["#f59351", "#c9504a", "#12514c"],
"dataXSelectors"=>["Spock"]}
)
Prawn::Document.generate( "statosio.pdf" ) do | pdf |
pdf.svg( chart, width: 500 )
end