Add More Ranges and Measures
Explore how to add more ranges and measures to bullet charts in D3.js by aligning JSON data with matching CSS styles. Learn to manage layered color ranges and dynamic data updates without manual interaction. This lesson helps you enhance bullet chart customization and automate real-time data visualization.
We'll cover the following...
We'll cover the following...
Single chart
Returning to our single chart example, you can see from the JSON data that there are three specified ranges and one measure.
[
{
"title":"CPU 1 Load",
"subtitle":"GHz",
"ranges":[1500,2250,3000],
"measures":[2200],
"markers":[2500]
}
]
The same was true for the CSS in the JavaScript code: three ranges and one measure.
.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }