jQuery UI Widgets Forums Chart Rendering Problem

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Rendering Problem #61610

    elbnacht
    Participant

    I’ve a mix of different table, tab, chart. Now I edited “colorFunction” and starting from that I experience rendering problems. If I change the “rangeSelector” range in the chart, then some data are not displayed anymore.

    The data are about 1000 sets.

    Here my code:
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Anzeige der TSI-Werte.
    </title>
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.black.css” type=”text/css” />
    <script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.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/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.culture.de-DE.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”>

    $(document).ready(function () {

    // Create a jqxMenu
    $(“#jqxMenu”).jqxMenu({ width: ‘120’, mode: ‘vertical’, theme: ‘black’});
    $(“#jqxMenu”).css(‘visibility’, ‘visible’);

    var initGrid = function () {
    var source =
    {
    datatype: “json”,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },

    datafields: [
    { name: ‘datum’, type: ‘date’ },
    { name: ‘tsi_wert’, type: ‘number’ }
    ],
    url: ‘tsi_werte.php’
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxGrid”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘100%’,
    theme: ‘black’,
    source: dataAdapter,
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; margin: 3px;’></div>”);
    var addButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”);
    var deleteButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”);
    var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”);
    var searchButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”);
    container.append(addButton);
    container.append(deleteButton);
    container.append(reloadButton);
    container.append(searchButton);
    statusbar.append(container);
    addButton.jqxButton({ width: 60, height: 20, theme: ‘black’ });
    deleteButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
    reloadButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
    searchButton.jqxButton({ width: 50, height: 20, theme: ‘black’ });
    // add new row.
    addButton.click(function (event) {
    var datarow = ”;
    $(“#jqxGrid”).jqxGrid(‘addrow’, null, datarow[0]);
    });
    // delete selected row.
    deleteButton.click(function (event) {
    var selectedrowindex = $(“#jqxGrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxGrid”).jqxGrid(‘getdatainformation’).rowscount;
    var id = $(“#jqxGrid”).jqxGrid(‘getrowid’, selectedrowindex);
    $(“#jqxGrid”).jqxGrid(‘deleterow’, id);
    });
    // reload grid data.
    reloadButton.click(function (event) {
    $(“#jqxGrid”).jqxGrid({ source: getAdapter() });
    });
    // search for a record.
    searchButton.click(function (event) {
    var offset = $(“#jqxgrid”).offset();
    $(“#jqxwindow”).jqxWindow(‘open’);
    $(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
    });
    },
    editable: true,
    //localization: getLocalization(‘de’),
    selectionmode: ‘multiplecellsadvanced’,
    columns: [
    { text: ‘Datum’, datafield: ‘datum’, columntype: ‘datetimeinput’, cellsformat: ‘d’, width: 150,
    },
    { text: ‘TSI-Wert’, datafield: ‘tsi_wert’, width: 100,
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 2, digits: 4 });
    }
    }
    ]
    });
    }
    var initChart = function () {
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘datum’ },
    { name: ‘tsi_wert’ }
    ],
    url: ‘tsi_werte.php’
    };

    var dataAdapter = new $.jqx.dataAdapter(
    source, { 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 toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    var dataItem = dataAdapter.records[itemIndex];
    return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’;
    };

    // prepare jqxChart settings
    var settings = {
    title: “Übersicht TSI-Werte”,
    borderLineWidth: 1,
    showBorderLine: true,
    enableAnimations: true,
    enableCrosshairs: true,
    showLegend: false,
    animationDuration: 1500,
    padding: { left: 5, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘datum’,
    type: ‘date’,
    baseUnit: ‘day’,
    minValue: new Date(2013, 0, 1),
    maxValue: new Date(2013, 11, 31),
    textRotationAngle: -45,
    formatFunction: function (value) {
    return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2);
    },
    showGridLines: true,
    rangeSelector: {
    size: 120,
    padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
    minValue: new Date(2004, 0, 1),
    backgroundColor: ‘white’,
    dataField: ‘tsi_wert’,
    baseUnit: ‘month’,
    showGridLines: false,
    formatFunction: function (value) {
    return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    }
    },
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘spline’,
    toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {
    unitInterval: 0.05,
    minValue: 0.8,
    maxValue: 1.2,
    displayValueAxis: true,
    description: ‘TSI-Wert’
    },
    series: [{
    dataField: ‘tsi_wert’,
    displayText: ‘TSI-Wert’,
    //lineWidth: 1,
    //lineWidthSelected: 1,
    emptyPointsDisplay: ‘connect’,
    colorFunction: function (value, itemIndex, serie, group) {
    return (value < 1) ? ‘#FF0000’ : ‘#00FF00’;
    }
    }]
    }
    ]
    };
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    }
    // init widgets.
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    initGrid();
    break;
    case 1:
    initChart();
    break;
    }
    }
    $(‘#jqxTabs’).jqxTabs({ width: 800, height: 560, theme: ‘black’, initTabContent: initWidgets });
    });
    </script>
    </head>
    <body class=’default’ style=’background: #222222′>
    <div id=’jqxMenu’ style=”visibility: hidden; float: left;”>
    <?php
    include(“navigation.html”);
    ?>
    </div>
    <div id=’jqxWidget’>
    <div id=’jqxTabs’>

      <li style=”margin-left: 30px;”>
      <div style=”height: 20px; margin-top: 5px;”>
      <div style=”float: left;”>

      </div>
      <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
      Tabelle</div>
      </div>

    • <div style=”height: 20px; margin-top: 5px;”>
      <div style=”float: left;”>

      </div>
      <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
      Grafik</div>
      </div>

    <div style=”overflow: hidden;”>
    <div id=”jqxGrid”>
    </div>
    </div>
    <div style=”overflow: hidden;”>
    <div id=’jqxChart’ style=”width: 100%; height: 100%”>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Rendering Problem #61655

    Dimitar
    Participant

    Hello elbnacht,

    Could you, please, re-post your code and format it by selecting it and clicking the code button in the toolbar so that your script and HTML code are more readable?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Rendering Problem #61691

    elbnacht
    Participant
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Anzeige der TSI-Werte.
    </title>
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.black.css” type=”text/css” />
    <script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.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/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.culture.de-DE.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”>
    
    $(document).ready(function () {
    
    // Create a jqxMenu
    $(“#jqxMenu”).jqxMenu({ width: ’120′, mode: ‘vertical’, theme: ‘black’});
    $(“#jqxMenu”).css(‘visibility’, ‘visible’);
    
    var initGrid = function () {
    var source =
    {
    datatype: “json”,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    
    datafields: [
    { name: 'datum', type: 'date' },
    { name: 'tsi_wert', type: 'number' }
    ],
    url: ‘tsi_werte.php’
    };
    
    var dataAdapter = new $.jqx.dataAdapter(source);
    
    $(“#jqxGrid”).jqxGrid(
    {
    width: ’100%’,
    height: ’100%’,
    theme: ‘black’,
    source: dataAdapter,
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; margin: 3px;’></div>”);
    var addButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”);
    var deleteButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”);
    var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”);
    var searchButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”);
    container.append(addButton);
    container.append(deleteButton);
    container.append(reloadButton);
    container.append(searchButton);
    statusbar.append(container);
    addButton.jqxButton({ width: 60, height: 20, theme: ‘black’ });
    deleteButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
    reloadButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
    searchButton.jqxButton({ width: 50, height: 20, theme: ‘black’ });
    // add new row.
    addButton.click(function (event) {
    var datarow = ”;
    $(“#jqxGrid”).jqxGrid(‘addrow’, null, datarow[0]);
    });
    // delete selected row.
    deleteButton.click(function (event) {
    var selectedrowindex = $(“#jqxGrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxGrid”).jqxGrid(‘getdatainformation’).rowscount;
    var id = $(“#jqxGrid”).jqxGrid(‘getrowid’, selectedrowindex);
    $(“#jqxGrid”).jqxGrid(‘deleterow’, id);
    });
    // reload grid data.
    reloadButton.click(function (event) {
    $(“#jqxGrid”).jqxGrid({ source: getAdapter() });
    });
    // search for a record.
    searchButton.click(function (event) {
    var offset = $(“#jqxgrid”).offset();
    $(“#jqxwindow”).jqxWindow(‘open’);
    $(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
    });
    },
    editable: true,
    //localization: getLocalization(‘de’),
    selectionmode: ‘multiplecellsadvanced’,
    columns: [
    { text: 'Datum', datafield: 'datum', columntype: 'datetimeinput', cellsformat: 'd', width: 150,
    },
    { text: 'TSI-Wert', datafield: 'tsi_wert', width: 100,
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 2, digits: 4 });
    }
    }
    ]
    });
    }
    var initChart = function () {
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: 'datum' },
    { name: 'tsi_wert' }
    ],
    url: ‘tsi_werte.php’
    };
    
    var dataAdapter = new $.jqx.dataAdapter(
    source, { 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 toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    var dataItem = dataAdapter.records[itemIndex];
    return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’;
    };
    
    // prepare jqxChart settings
    var settings = {
    title: “Übersicht TSI-Werte”,
    borderLineWidth: 1,
    showBorderLine: true,
    enableAnimations: true,
    enableCrosshairs: true,
    showLegend: false,
    animationDuration: 1500,
    padding: { left: 5, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘datum’,
    type: ‘date’,
    baseUnit: ‘day’,
    minValue: new Date(2013, 0, 1),
    maxValue: new Date(2013, 11, 31),
    textRotationAngle: -45,
    formatFunction: function (value) {
    return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2);
    },
    showGridLines: true,
    rangeSelector: {
    size: 120,
    padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
    minValue: new Date(2004, 0, 1),
    backgroundColor: ‘white’,
    dataField: ‘tsi_wert’,
    baseUnit: ‘month’,
    showGridLines: false,
    formatFunction: function (value) {
    return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    }
    },
    },
    colorScheme: ‘scheme01′,
    seriesGroups:
    [
    {
    type: 'spline',
    toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {
    unitInterval: 0.05,
    minValue: 0.8,
    maxValue: 1.2,
    displayValueAxis: true,
    description: 'TSI-Wert'
    },
    series: [{
    dataField: 'tsi_wert',
    displayText: 'TSI-Wert',
    //lineWidth: 1,
    //lineWidthSelected: 1,
    emptyPointsDisplay: 'connect',
    colorFunction: function (value, itemIndex, serie, group) {
    return (value < 1) ? '#FF0000' : '#00FF00';
    }
    }]
    }
    ]
    };
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    }
    // init widgets.
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    initGrid();
    break;
    case 1:
    initChart();
    break;
    }
    }
    $(‘#jqxTabs’).jqxTabs({ width: 800, height: 560, theme: ‘black’, initTabContent: initWidgets });
    });
    </script>
    </head>
    <body class=’default’ style=’background: #222222′>
    <div id=’jqxMenu’ style=”visibility: hidden; float: left;”>
    <?php
    include(“navigation.html”);
    ?>
    </div>
    <div id=’jqxWidget’>
    <div id=’jqxTabs’>
    
    <li style=”margin-left: 30px;”>
    <div style=”height: 20px; margin-top: 5px;”>
    <div style=”float: left;”>
    
    </div>
    <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
    Tabelle</div>
    </div>
    <div style=”height: 20px; margin-top: 5px;”>
    <div style=”float: left;”>
    
    </div>
    <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
    Grafik</div>
    </div>
    <div style=”overflow: hidden;”>
    <div id=”jqxGrid”>
    </div>
    </div>
    <div style=”overflow: hidden;”>
    <div id=’jqxChart’ style=”width: 100%; height: 100%”>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Rendering Problem #61733

    Dimitar
    Participant

    Hi elbnacht,

    The provided code is still unindented. Please either re-post your code as it is in the development environment you use (e.g. Visual Studio) or create a JSFiddle example demonstrating the issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Rendering Problem #61766

    elbnacht
    Participant

    Sorry, now it works. Meanwhile I reduced the code from unnecessary code (tabs / grid). Result stays the same.
    If I take out the “colorFunction”, than all data are shown.

    Jens

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Anzeige der TSI-Werte.
    </title>
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.black.css” type=”text/css” />
    <script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.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/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.culture.de-DE.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”>

    $(document).ready(function () {

    // Create a jqxMenu
    $(“#jqxMenu”).jqxMenu({ width: ‘120’, mode: ‘vertical’, theme: ‘black’});
    $(“#jqxMenu”).css(‘visibility’, ‘visible’);

    var initChart = function () {
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘datum’ },
    { name: ‘tsi_wert’ }
    ],
    url: ‘tsi_werte.php’
    };

    var dataAdapter = new $.jqx.dataAdapter(
    source, { 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 toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    var dataItem = dataAdapter.records[itemIndex];
    return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’;
    };

    // prepare jqxChart settings
    var settings = {
    title: “Übersicht TSI-Werte”,
    borderLineWidth: 1,
    showBorderLine: true,
    enableAnimations: true,
    enableCrosshairs: true,
    showLegend: false,
    animationDuration: 1500,
    padding: { left: 5, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘datum’,
    type: ‘date’,
    baseUnit: ‘day’,
    minValue: new Date(2013, 0, 1),
    maxValue: new Date(2013, 11, 31),
    textRotationAngle: -45,
    formatFunction: function (value) {
    return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2);
    },
    showGridLines: true,
    rangeSelector: {
    size: 120,
    padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
    minValue: new Date(2010, 0, 1),
    backgroundColor: ‘white’,
    dataField: ‘tsi_wert’,
    baseUnit: ‘month’,
    showGridLines: false,
    formatFunction: function (value) {
    return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    }
    },
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘spline’,
    toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {
    unitInterval: 0.05,
    minValue: 0.8,
    maxValue: 1.2,
    displayValueAxis: true,
    description: ‘TSI-Wert’
    },
    series: [{
    dataField: ‘tsi_wert’,
    displayText: ‘TSI-Wert’,
    //lineWidth: 1,
    //lineWidthSelected: 1,
    emptyPointsDisplay: ‘connect’,
    colorFunction: function (value, itemIndex, serie, group) {
    return (value < 1) ? ‘#FF0000’ : ‘#00FF00’;
    }
    }]
    }
    ]
    };
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    }
    initChart();

    });
    </script>
    </head>
    <body class=’default’ style=’background: #222222′>
    <div id=’jqxMenu’ style=”visibility: hidden; float: left;”>
    <?php
    include(“navigation.html”);
    ?>
    </div>
    <div >
    <div >
    <div id=’jqxChart’ style=”width: 800px; height: 600px; margin-left: 10px;float: left;”>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Rendering Problem #61769

    elbnacht
    Participant

    Maybe I found the cause: I use the date format from the database “YYYY-MM-DD” Any idea, how to change it to the probable used “MM/DD/YYYY”?
    Can I use some of the globalize functions?

    Jens

    Rendering Problem #61783

    Dimitar
    Participant

    Hi Jens,

    You can use the data adapter formatDate function. You can find out more about it in the jqxDataAdapter Getting Started guide.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Rendering Problem #61830

    elbnacht
    Participant

    Hi Dimitar,

    now I got it. It took some efforts.
    The final reason of the rendering problem is a strange behavior of the “rangeSelector: minValue:”.
    If this value is larger than the data of the source (i.e. minValue: new Date(2010, 0, 1) vs. 2004-01-01), than the time scale shows wrong data.
    This leads as well in the bi-color chart to data drops while rendering.

    Please confirm, if you can verify this.

    Jens

    Rendering Problem #61859

    Dimitar
    Participant

    Hello Jens,

    The range selector is supposed to contain more data points than the chart, not less. That is why your scenario is not supported and leads to unexpected behaviour. We recommend you set the rangeSelector’s minValue to at most the value of the xAxis minValue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Rendering Problem #61986

    elbnacht
    Participant

    Hi Dimitar,

    thats not what I mean.
    Please consider the following situation:
    The JSON source data starts from 2004-01-01 and goes till 2014-01-01.
    The xAxis is set from minValue 2013-01-01 to maxValue 2014-01-01.
    The range selector minValue is 2006-01-01. The maxValue is not given.

    In this case, the xAxis shows wrong values (JSON data are more than the range data).

    Can you confirm this?

    Other question related to this. can I define the following at the xAxis?

    minValue: function (xMinToday) {
    xMinToday = new Date();
    return xMinToday.setFullYear(xMinToday.getFullYear() - 1)},
    maxValue: new Date(),

    I just want to define the settings as today (minValue) and 1 years less from today (maxValue).

    Jens

    Rendering Problem #62023

    Dimitar
    Participant

    Hi Jens,

    1) We confirm the reported issue regarding the chart range selector and will fix it as soon as possible.

    2) It is not possible to set the property this way, but you can try the following approach as an alternative:

    // before chart initialization
    var minValue = function(xMinToday) {
        xMinToday = new Date();
        return xMinToday.setFullYear(xMinToday.getFullYear() - 1)
    };
    // chart initialization
    minValue: minValue,
    maxValue: new Date(),

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Rendering Problem #64139

    Peter Stoev
    Keymaster

    Update: Issue is Fixed in jQWidgets 3.6.0

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

You must be logged in to reply to this topic.