jQuery UI Widgets Forums Chart Chart not showing in Explorer and Mozilla

This topic contains 3 replies, has 2 voices, and was last updated by  spidder 2 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • spidder
    Participant

    Hi,

    could you please help me out on this one?

    http://jsfiddle.net/spidder/5EfUm/5/

    It only works in chrome. I have been through all other topics here, commas in settings, dataadapter issue, but none of those help.

    Thanks


    Peter Stoev
    Keymaster

    Hi spidder,

    The sample you provided with our Chart does not include a data adapter. When it includes a data adapter as a chart data source it works. We prepared a small sample: http://jsfiddle.net/nwrh1ang/. I tested this with Firefox, IE 11, Edge and Chrome.

    Regards,
    Peter


    spidder
    Participant

    THanks for very quick response, I actually use data adapter in my code, but maybe I am doing something wrong, I only replaced it with local data so I can share it with you… Plesae see below my code… unfortunately it is on internal server, so you cannot access it, but basicaly as explained, only in Chrome the lines are displayed. I can see that URL returns valid data… This is url ouput of data:

    18-AUG-17 08:00:00,305,85,264,123
    18-AUG-17 07:00:00,339,75,276,128
    18-AUG-17 06:00:00,336,120,300,156
    18-AUG-17 05:00:00,306,150,297,157
    18-AUG-17 04:00:00,261,77,248,102
    17-AUG-17 21:00:00,348,145,305,183
    17-AUG-17 20:00:00,349,156,313,190
    17-AUG-17 19:00:00,285,145,272,150
    17-AUG-17 18:00:00,287,103,253,130
    17-AUG-17 17:00:00,304,98,255,132
    17-AUG-17 16:00:00,336,88,247,123
    17-AUG-17 15:00:00,285,89,244,121
    17-AUG-17 14:00:00,283,92,248,125
    17-AUG-17 13:00:00,289,94,250,129
    17-AUG-17 12:00:00,282,103,246,131
    17-AUG-17 11:00:00,302,102,249,133
    17-AUG-17 10:00:00,291,100,255,128
    17-AUG-17 09:00:00,383,83,277,137
    17-AUG-17 08:00:00,351,97,282,132
    17-AUG-17 07:00:00,290,103,286,129
    17-AUG-17 06:00:00,368,88,306,155

    Below is the JS… maybe you can see the issue right away.

    <div class=”small-chart-wrapper”>
    <div class=”small-chart age-of-cdr” id=”gmsc-ageofcdr”></div>
    <div class=”small-chart-info”>

    <strong id=”gmscminmax”>

    </div>
    </div>
    <script>
    /*
    Name: UI Elements / Charts – Examples
    Written by: Okler Themes – (http://www.okler.net)
    Theme Version: 1.7.0
    */

    (function($) {

    ‘use strict’;

    /*
    Age Of CDRS
    */

    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘HOUR’ },
    { name: ‘MAX’ },
    { name: ‘MIN’ },
    { name: ‘MAXAVG’ },
    { name: ‘MINAVG’ }
    ],
    url: ‘_data/ageofcdrs.php?stream=GMSC’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    var lastDataItem = dataAdapter.records[0];
    $(‘#gmscminmax’).text(‘Min in last hour: ‘ + lastDataItem.MIN + ‘ / ‘ + ‘Max in last hour: ‘ + lastDataItem.MAX);

    var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    var dataItem = dataAdapter.records[itemIndex];
    return ‘<DIV style=”text-align:left”>’+
    ‘<b>Max: ‘ + dataItem.MAX + ‘</b></br>’ +
    ‘Min: ‘ + dataItem.MIN + ‘</br>’ +
    ‘Max Avg: ‘ + dataItem.MAXAVG + ‘</br>’ +
    ‘Min Avg: ‘ + dataItem.MINAVG + ‘</br>’ +
    ‘Hour: ‘ + dataItem.HOUR + ‘</DIV>’;
    };

    // prepare jqxChart settings
    var settings = {
    padding: { left: 0, top: 15, right: 15, bottom: 20 },
    borderLineWidth:1,
    title: “GMSC”,
    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
    description: “”,
    enableAnimations: true,
    showLegend:false,
    backgroundColor: “#cccccc”,

    enableCrosshairs: true,
    source: dataAdapter,
    colorScheme: ‘scheme05’,
    xAxis:
    {
    dataField: ‘HOUR’,
    unitInterval: 2,
    title: { text: ‘Hour in a day’ },
    type: ‘date’,
    baseUnit: ‘hour’,
    dateFormat: “HH”

    },
    valueAxis:
    {
    minValue: 0,
    maxValue: 500,
    position: “left”,
    title: { text: ‘Minutes’ },
    labels: {
    horizontalAlignment: ‘right’,
    angle: 90
    }

    },
    seriesGroups:
    [
    {
    type: ‘rangecolumn’,
    columnsGapPercent: 30,
    toolTipFormatFunction: toolTipCustomFormatFn,

    series: [ {dataFieldTo: ‘MAX’, displayText: ”, dataFieldFrom: ‘MIN’, opacity: 0.5,
    colorFunction: function (value, itemIndex, serie, group) {

    return (value.to > 500) ? ‘#CC1133’ : ‘#1F99D3’;
    }}
    ]
    },
    {
    type: ‘spline’,
    toolTipFormatFunction: toolTipCustomFormatFn,
    series: [
    { dataField: ‘MAXAVG’, displayText: ‘Max Avg’, opacity: 1, lineWidth: 2 }
    ]
    }
    ,
    {
    type: ‘spline’,
    toolTipFormatFunction: toolTipCustomFormatFn,
    series: [
    { dataField: ‘MINAVG’, displayText: ‘Min Avg’, opacity: 1, lineWidth: 2 }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#gmsc-ageofcdr’).jqxChart(settings);

    }).apply(this, [jQuery]);
    </script>

    Thanks again for help 🙂

    Regards Marek


    spidder
    Participant

    Got it :), it is required to specify data type for the columns. Thanks a lot, your example helped me a lot.

    Now it works.

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

You must be logged in to reply to this topic.