in the following script, I have 2 line charts and a condition to change the line color.
How can I apply the condition to only one of the lines and leave the other one untouched?
var axisY = chart1.getAxisY();
axisY.setMin(500);
axisY.setMax(2000);
chart1.getData().setSeries(2);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
var conditional = new cfx.ConditionalAttributes();
var condition = conditional.getCondition();
condition.setFrom(1000);
condition.setTo(1400);
conditional.setText("Important");
conditional.setTag("SpecialCondition");
chart1.getConditionalAttributes().add(conditional);
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
danibert1
Hi,
in the following script, I have 2 line charts and a condition to change the line color.
How can I apply the condition to only one of the lines and leave the other one untouched?
<!DOCTYPE html>
<html>
<head>
<title>Using Conditional Attributes</title>
<link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
<style type="text/css">
#chart .SpecialCondition { stroke: #FF0040; }
#chart .SpecialConditionLine { stroke: #FF0040; }
</style>
<script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript">
window.onload = function () {
onLoadDoc();
}
var chart1;
function onLoadDoc() {
chart1 = new cfx.Chart();
var axisY = chart1.getAxisY();
axisY.setMin(500);
axisY.setMax(2000);
chart1.getData().setSeries(2);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
var conditional = new cfx.ConditionalAttributes();
var condition = conditional.getCondition();
condition.setFrom(1000);
condition.setTo(1400);
conditional.setText("Important");
conditional.setTag("SpecialCondition");
chart1.getConditionalAttributes().add(conditional);
var data = [
{ "a": "1", "a": 1300, "b": 800 },
{ "a": "2", "a": 1900, "b": 900 },
{ "a": "3", "a": 1900, "b": 1350 },
{ "a": "4", "a": 1700, "b": 1500},
{ "a": "5", "a": 750, "b": 999 },
];
chart1.setDataSource(data);
var chartDiv = document.getElementById('ChartDiv1');
chart1.create(chartDiv);
}
</script>
</head>
<body>
<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>
</body>
</html>
Thank you very much for all hints
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.