Adding Custom Target or Threshold Lines to Charts Using JavaScript
Target or threshold lines are a powerful way to highlight benchmarks or limits within your Knowi charts. While Knowi’s default Target Line setting does offer a simple dashed red line, it lacks flexibility. Users cannot adjust its value dynamically or modify the color, thickness, or label of the line. In this guide, we’ll walk through using JavaScript in the widget footnote to plot a dynamic and fully customizable target line.
Basic Script:
<script>
var widget = document.currentScript.closest('.widget');
var widgetBody = widget.querySelector('.body');
var chartIndex = widgetBody.dataset.highchartsChart;
var chart = Highcharts.charts[chartIndex];
if (chart) {
chart.update({
yAxis: {
plotLines: [{
value: 250, // Y-axis value for the plot line
color: 'blue', // Color of the plot line
width: 2, // Thickness of the line
dashStyle: 'Solid', // Style of the line
label: {
text: 'Threshold Line', // Label for the plot line
align: 'left',
y: 12, // Offset to position the label above/below the line
verticalAlign: 'bottom', // Align the text above or below the line
style: {
color: 'blue', // Color of the label text
fontWeight: 'bold'
}
}
}]
}
}, false);
chart.redraw();
}
</script>
This script can be repeated so that multiple plot lines can be displayed for multiple thresholds of different values with different styles.
1. Customizing Plot Line Styles
Using JavaScript in Knowi charts, you can customize the appearance of a target or threshold line to suit your design and data needs. Here are some key style options you can configure:
-
Color: Choose any color for the line, such as
"#FF0000"
for red or"#00FF00"
for green. -
Thickness: Control the line’s thickness using
width
, with values such as1
for thin lines or3
for a thicker line. -
Dash Style: You can apply different dash styles for the line pattern. Options include:
- Solid: Continuous line with no dashes.
- Dash: Evenly spaced dashes.
- Dot: Dotted line.
- DashDot: Alternating dash and dot. DashDotDot also is an option.
- The prefixes Short and Long can be added to change the length of the dashes or dots for example: LongDash
-
Label: Add a custom label next to the line to indicate its meaning, such as
"Target"
or"Benchmark"
- Customize the color, font, and alignment of the label
2. Setting the Plot Line Value: Static vs. Dynamic
Static Values
If you want a simple, fixed target line, you can enter a static value directly in the JavaScript, such as:
value: 250 // Plots the line at a fixed value of 250
This is useful for constant benchmarks or limits that don’t depend on dynamic data.
Dynamic Values from Your Dataset
To create a dynamic plot line that references values from your underlying dataset, Knowi allows you to use field placeholders. This lets you set the plot line value based on actual data.
The syntax is:
value: {{<Field Name>:<Row Number>}}
For example, if your dataset includes a column labeled TargetValue
, and you want the plot line to align with the first row of this column, use:
value: {{TargetValue:1}}
This approach enables the line to adjust in response to changes in your data, keeping your chart up-to-date automatically.
Passing Dynamic Values with Data Tokens
In Knowi, you can also add dynamic values from filters by using data tokens. These tokens allow you to pass values from widget or dashboard filters into your dataset, which can then be referenced by the plot line.
1. Create a Data Token:
- In the widget filters, open C9QLTransformation.
- Add a select statement to incorporate the following syntax for the data token:
Select $c9_FilterValue$[<Filter Label>]$ as <Field Name>
- Replace
<Filter Label>
with the name of your filter and<Field Name>
with the field you want to populate with the filter value.
2. Set Up the Filter:
-
- Create a widget or dashboard filter and select the chosen filter label. This filter will dynamically control the value that your plot line uses.
- Setting your filter control to Custom is recommended.
3. Reference the Token in the Plot Line:
- In the plot line script, reference the field that was created by the data token.
4. Set the Desired Value in the Filter.
- This value will now be plotted on the plot line.
Summary
Using this JavaScript plot line approach, you can add customizable target lines to Knowi charts and adapt them dynamically based on your dataset or user input filters. This method provides a flexible way to enhance your data visualizations with interactive and meaningful benchmarks, directly aligned with your unique data needs.
By following these steps, you’ll be able to use Knowi’s full JavaScript capabilities to make your charts both more insightful and visually appealing. Happy charting!
Please sign in to leave a comment.
0 comments