chart colorFunction is not working - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: css, elements, jquery charting, jqxChart

This topic contains 8 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

chart colorFunction is not working Posts
July 10, 2015 at 5:32 pm chart colorFunction is not working #73619

elbnacht
Participant

I had this issue a while ago. Now the problem is back again.
The chart is not drawn completely. Some parts are missing.

Any idea?

==================

<!DOCTYPE html>
<html lang=”de”>
<head>
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.classic.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.metrodark.css” type=”text/css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”jquery-validation/dist/jquery.validate.js”></script>
<script type=”text/javascript” src=”jquery-validation/src/localization/messages_de.js”></script>
<script type=”text/javascript” src=”jquery-validation/src/localization/methods_de.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.js”></script>
<style>
.jqx-notification-container { z-index:99999; }

.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{
fill: #ffffff;
color: #ffffff;
}

html, body {
height: 100%;
}
#jqxSeite {
display: block;
}
#jqxMenu {
width: 120px;
height:490px;
float: left;
}
#jqxGrid {
float: left;
height:490px;
margin-left: 2px;
}
#jqxChart {
width:850px;
height:490px;
float: left;
margin-left: 1px;
}
#jqxChartSelector {
width:850px;
height:102px;
float: left;
margin-left: 1px;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = ‘metrodark’;

var getLocalization = function () {
var localizationobj = {};
localizationobj.percentSymbol = ” %”;
localizationobj.currencySymbol = ” €”;
localizationobj.currencySymbolPosition = “after”;
localizationobj.decimalSeparator = “,”;
localizationobj.thousandsSeparator = “.”;
patterns: {d: “d.M.yyyy”}
return localizationobj;
}

var sourceChart =
{
datatype: “json”,
datafields: [
{ name: ‘Datum’, type: ‘date’ },
{ name: ‘tsiWert’, type: ‘float’ }
],
url: ‘tsi_werte.php’
};

var dataAdapterChart = new $.jqx.dataAdapter(
sourceChart, { async: false, autoBind: true, loadError: function (xhr, status, error) {
alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); }
});

var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Okt’, ‘Nov’, ‘Dez’];

var today = new Date();

// prepare jqxChart settings
var settings = {
title: “TSI-Werte”,
description: “(…)”,
backgroundColor: ‘#3E3E42’,
enableAnimations: true,
animationDuration: 1500,
enableCrosshairs: true,
padding: { left: 5, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
source: dataAdapterChart,
xAxis:
{
dataField: ‘Datum’,
type: ‘date’,
dateFormat: ‘dd.MM.yyyy’,
//minValue: new Date(2014, 1, 1),
//maxValue: new Date(2015, 6, 1),
minValue: new Date(today.setDate(today.getDay() – 365)),
//baseUnit: ‘day’,
//textRotationAngle: -45,
//unitInterval: 30,
//gridLines: { step: 300 },
tickMarks: { step: 10 },
labels: { step: 1 },
gridLines: {visible: true},
rangeSelector: {
renderTo: $(‘#jqxChartSelector’),
size: 80,
padding: { left: 80, right: 10, top: 10, bottom: 0 },
backgroundColor: ‘#3E3E42’,
dataField: ‘tsiWert’,
dateFormat: ‘dd.MM.yyyy’,
baseUnit: ‘month’,
showGridLines: false,
}
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
valueAxis: {
title: { text: ‘TSI-Werte’ },
labels: {
horizontalAlignment: ‘right’,
formatSettings: {
decimalPlaces: 2,
decimalSeparator: ‘,’,
thousandsSeparator: ‘.’,
},
}
},
toolTipFormatSettings: {
dateFormat: ‘dd.MM.yyyy’,
decimalPlaces: 3,
decimalSeparator: ‘,’,
thousandsSeparator: ‘.’,
negativeWithBrackets: false
},
series: [ {
dataField: “tsiWert”,
displayText: “TSI-Werte”,
lineWidth: 2,
colorFunction: function (dataValue, itemIndex, serie, group) {
return (dataValue < 1) ? ‘#FF0000’ : ‘#00FF00’;
}

} ]
}
]
};
$(‘#jqxChart’).jqxChart(settings).
on(‘rangeSelectionChanging’, function (event) {
var args = event.args;
args.instance.description = args.minValue.getFullYear() + ” – ” + args.maxValue.getFullYear();
});
});
</script>
</head>
<body class=”default” style=’background: #222222′>
<div class=”jqxSeite”>
<div>
<div id=”jqxChart”>
</div>
<div id=”jqxChartSelector”>
</div>
</div>
</div>
<div id=”jqxMessage”>
<div id=”jqxMessageContent”>
</div>
</div>
</body>
</html>

July 10, 2015 at 5:33 pm chart colorFunction is not working #73620
elbnacht
Participant
Sorry, forgot the code closings:
```
<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>	
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script>
	<style>
		.jqx-notification-container { z-index:99999; }

        .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
        {
            fill: #ffffff;
            color: #ffffff;
        }

		html, body {
			height: 100%;
		}
		#jqxSeite {
			display: block;
		}
		#jqxMenu {
			width: 120px;
			height:490px;
			float: left;
		}
		#jqxGrid {
			float: left;
			height:490px;
			margin-left: 2px;
		}
		#jqxChart {
			width:850px; 
			height:490px;
			float: left;
			margin-left: 1px;
		}
		#jqxChartSelector {
			width:850px; 
			height:102px;
			float: left;
			margin-left: 1px;
		}
	</style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metrodark';

			var getLocalization = function () {
				var localizationobj = {};
				localizationobj.percentSymbol = " %";
				localizationobj.currencySymbol = " €";
				localizationobj.currencySymbolPosition = "after";
				localizationobj.decimalSeparator = ",";
				localizationobj.thousandsSeparator = ".";
				patterns: {d: "d.M.yyyy"}
				return localizationobj;
			}

			var sourceChart =
               {
                   datatype: "json",
                   datafields: [
                        { name: 'Datum', type: 'date' },
                        { name: 'tsiWert', type: 'float' }
                    ],
                   url: 'tsi_werte.php'
               };

			var dataAdapterChart = new $.jqx.dataAdapter(
                	sourceChart, { async: false, autoBind: true, loadError: function (xhr, status, error) { 
						alert('Error loading "' + source.url + '" : ' + error); } 
					});

			var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
			
			var today = new Date();
			            
            // prepare jqxChart settings
            var settings = {
				title: "TSI-Werte",
                description: "(...)",
				backgroundColor: '#3E3E42',
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapterChart,
                xAxis:
                {
                    dataField: 'Datum',
					type: 'date',
					dateFormat: 'dd.MM.yyyy',
					//minValue: new Date(2014, 1, 1),
					//maxValue: new Date(2015, 6, 1),
					minValue: new Date(today.setDate(today.getDay() - 365)),
                    //baseUnit: 'day',
					//textRotationAngle: -45,
					//unitInterval: 30,
					//gridLines: { step: 300 },
					tickMarks: { step: 10 },
					labels: { step: 1 },
					gridLines: {visible: true},
                    rangeSelector: {
                        renderTo: $('#jqxChartSelector'),
						size: 80,
						padding: { left: 80, right: 10, top: 10, bottom: 0 },
                        backgroundColor: '#3E3E42',
                        dataField: 'tsiWert',
						dateFormat: 'dd.MM.yyyy',
                        baseUnit: 'month',
                        showGridLines: false,
                    }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
							valueAxis: {
								title: { text: 'TSI-Werte' },
								labels: { 
									horizontalAlignment: 'right',
									formatSettings: { 
										decimalPlaces: 2, 
										decimalSeparator: ',', 
										thousandsSeparator: '.', 
									},
								}
							},
							toolTipFormatSettings: { 
								dateFormat: 'dd.MM.yyyy',
								decimalPlaces: 3, 
								decimalSeparator: ',', 
								thousandsSeparator: '.', 
								negativeWithBrackets: false 
							},
							series: [ { 
								dataField: "tsiWert", 
								displayText: "TSI-Werte", 
								lineWidth: 2,
								colorFunction: function (dataValue, itemIndex, serie, group) {
									return (dataValue < 1) ? '#FF0000' : '#00FF00';
								}
								
							} ]
                        }
                    ]
            };
            $('#jqxChart').jqxChart(settings).
                on('rangeSelectionChanging', function (event) {
                    var args = event.args;
                    args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
                });
        });
    </script>
</head>
<body class="default" style='background: #222222'>
<div class="jqxSeite">
	<div>
		<div id="jqxChart">
		</div>
		<div id="jqxChartSelector">
		</div>
	</div>
</div>
	<div id="jqxMessage">
		<div id="jqxMessageContent">
		</div>	
	</div>
</body>
</html>
```
July 13, 2015 at 7:05 am chart colorFunction is not working #73653

ivailo
Participant

Hi elbnacht,

Probably your additional CSS settings made some of the elements not enough contrasting (not visible).
Try to change the additional CSS.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 13, 2015 at 6:22 pm chart colorFunction is not working #73680
elbnacht
Participant
In that case tooltip would show me the lines.
If I take
```
colorFunction: function (dataValue, itemIndex, serie, group) {
		return (dataValue < 1) ? '#FF0000' : '#00FF00';
}
```
away, than everything is working.
The same failure exist some versions earlier …
July 14, 2015 at 10:07 am chart colorFunction is not working #73705

ivailo
Participant

Hi elbnacht,

This code have to work well. The same function is used here.

Send all error messages for analyze.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 14, 2015 at 5:17 pm chart colorFunction is not working #73710

elbnacht
Participant

I found the problem. It is again a problem, I described last year (Rendering Problem).

The entry “minValue: new Date(today.setDate(today.getDay() – 365)),” limits the number of data shown in the chart.
The database delivers all data.
If I take the line out, than the rendering works fine.
If I leave the line in and take the colorFunction section out, than it works (without coloring).

Any idea?

July 15, 2015 at 12:41 pm chart colorFunction is not working #73759

ivailo
Participant

Hi elbnacht,

We will investigate the issue and try to fix it in the next release.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

October 29, 2015 at 5:32 pm chart colorFunction is not working #77529

elbnacht
Participant

Any news on the issue?
It is still not fixed.

Jens

October 30, 2015 at 5:14 am chart colorFunction is not working #77539

Peter Stoev
Keymaster

Hi elbnacht,

Please, provide https://www.jseditor.io/ demo which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.