jQuery UI Widgets Forums Chart chart colorFunction is not working

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • 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>

    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>
    
    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

    • This reply was modified 9 years ago by  ivailo.
    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 …

    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

    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?

    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

    chart colorFunction is not working #77529

    elbnacht
    Participant

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

    Jens

    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/

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

You must be logged in to reply to this topic.