jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Charting

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  ifr38 10 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Charting Posts
  • March 18, 2015 at 10:29 am Charting #68808

    ifr38
    Participant

    Hello,
    I have a problem when I use jqxChart with Google Chrome or Chromium …

    When I run my index.php file, my mouse is idling and my PC is very slow. I have to reboot to make it back to normal.

    But when I run my index.php in Mozilla Firefox, I have no problem and my graphic display normally.

    Do you know what is the problem with Chrome / Chromium?

    Thank you in advance

    index.php :

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Stacked Column Series Example</title>
    <link rel="stylesheet" href="js/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqxdata.js"></script>
    <script type="text/javascript" src="js/jqxdraw.js"></script>
    <script type="text/javascript" src="js/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: '01-12-14', ED: 200, POR: 300, VPP: 35, VPN: 45 },
                    { Day: '02-12-14', ED: 150, POR: 425, VPP: 20, VPN: 55 },
                    { Day: '03-12-14', ED: 250, POR: 400, VPP: 35, VPN: 35 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Test stats N2",
                description: "",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        unitInterval: 1,
                        axisSize: 'auto',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        }
                    },
                valueAxis:
                {
                  //  unitInterval: 10,
                    //minValue: 0,
                   // maxValue: 120,
                    title: { text: 'Nb de connexions' },
                    labels: { horizontalAlignment: 'right' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            series: [
                                    { dataField: 'ED', displayText: 'ED' },
                                    { dataField: 'POR', displayText: 'POR' },
                                    { dataField: 'VPP', displayText: 'VPP' },
                                    { dataField: 'VPN', displayText: 'VPN' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px;"/>
</body>
</html>
    March 18, 2015 at 10:54 am Charting #68812

    Peter Stoev
    Keymaster

    Hi ifr38,

    The problem is in your code. xAxis expects a dataField pointing to data source field name which stores Numbers, Dates or Text and you provide Date Strings without setting the axis type. I would suggest you to look again our Charting Examples and documentation to learn how to use the widget.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 18, 2015 at 11:21 am Charting #68815

    ifr38
    Participant

    Hi Peter,

    When I replace “01-12-14” with “Monday” I have no problems, thank you!

    So if I want to put “01-12-14” rather than “Monday”, What replacement should I do?

    Best Regards,

    March 18, 2015 at 11:50 am Charting #68816

    Peter Stoev
    Keymaster

    Hi ifr38,

    If you want to display Dates, set the xAxis’s type to “date”. Ex: http://jsfiddle.net/jqwidgets/3khqbLLb/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 18, 2015 at 12:04 pm Charting #68818

    ifr38
    Participant

    It works!
    Thank you for your help.

    Best Regards,

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.