Chart and mySQL - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart

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

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

Author

Chart and mySQL Posts

May 3, 2012 at 6:01 pm Chart and mySQL #3852

Member

I’m very sure that I did something wrong here. I’m very accustomed to what’s been done with JQuery/PHP/mySQL. Also in addition, am transferring/converting all my code over to JQWidget because I felt it has a better “future”. Anyways to the point, I for the life outta me cannot figure what I’m doing wrong, even though I read everything (I’m sure I’ve overlooked somewhere):

Data from mySQL:

{"CaLvErT": {"1330028992":9,"1330202828":9,"1330484662":9,"1330658201":9,"1330983800":9,"1331075294":9,"1331239651":9,"1331697329":9,"1332215655":9,"1332533799":9},"DeViant":{"1330028992":9,"1330202828":9,"1330484662":9,"1330658201":9,"1330983800":9,"1331075294":9,"1331239651":9,"1331697329":9,"1332215655":9,"1332533799":9,"1332973327":9},"ElitaOne":{"1330028992":9,"1330202828":9,"1330484662":9,"1330658201":9,"1330983800":9,"1331075294":9,"1331239651":9,"1331697329":9,"1332215655":9,"1332533799":9,"1332973327":9}

{ Player: {TimeStamp:Count,...},...}

How do I go about extracting THIS JSon and make it usable data for the chart to produce from this? The best I’ve done is the image below but not the result I wanted, so how do I go about doing the jqxChart properly? I did everything based on “default settings” from jqxChart demo site, see image below:

It’s supposed to show 3 player’s name in Legends instead of “Count”. The Line is supposed to be based on “PlayCnt”.

If need clear explaination, please let me know, I’ll do my best.

Thanks in advance!

May 4, 2012 at 8:16 am Chart and mySQL #3865

Peter Stoev

Keymaster

Hi sgkdnay,

Could you post the Chart’s initialization code in your application? I’d need also sample additional sample data, because the Player data is missing in the posted json.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 5, 2012 at 7:37 pm Chart and mySQL #3895

sgkdnay

Member

Let me rephase everything, using your default parameter in Chart (Line): How would I go about using THIS array?

{"CaLvErT":[{"SnapTime":1330028992,"PlayCount":9},{"SnapTime":1330202828,"PlayCount":9},{"SnapTime":1330484662,"PlayCount":9},{"SnapTime":1330658201,"PlayCount":9},{"SnapTime":1330983800,"PlayCount":9},{"SnapTime":1331075294,"PlayCount":9},{"SnapTime":1331239651,"PlayCount":9},{"SnapTime":1331697329,"PlayCount":9},{"SnapTime":1332215655,"PlayCount":9},{"SnapTime":1332533799,"PlayCount":9}],"DeViant":[{"SnapTime":1330028992,"PlayCount":9},{"SnapTime":1330202828,"PlayCount":9},{"SnapTime":1330484662,"PlayCount":9},{"SnapTime":1330658201,"PlayCount":9},{"SnapTime":1330983800,"PlayCount":9},{"SnapTime":1331075294,"PlayCount":9},{"SnapTime":1331239651,"PlayCount":9},{"SnapTime":1331697329,"PlayCount":9},{"SnapTime":1332215655,"PlayCount":9},{"SnapTime":1332533799,"PlayCount":9},{"SnapTime":1332973327,"PlayCount":9}]

Reason I asked is because “Calvert” is a player with values next to his name “SnapTime” and “PlayCount” and in the chart is asking for [DataFields] and it only has 2.

May 7, 2012 at 8:54 am Chart and mySQL #3923

Peter Stoev

Keymaster

In order to display multiple series for each player in this scenario and to display the player names in the legend area, the Chart should have a feature to set a separate Data Source for each Line Serie. Unfortunately, this is still a missing functionality in our jqxChart.

For one player with the data source, you can use a code like this:

<html lang="en">
<head>
    <title id='Description'>jqxChart Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = '{"CaLvErT":[{"SnapTime":1330028992,"PlayCount":9},{"SnapTime":1330202828,"PlayCount":8},{"SnapTime":1330484662,"PlayCount":9},{"SnapTime":1330658201,"PlayCount":9},{"SnapTime":1330983800,"PlayCount":9},{"SnapTime":1331075294,"PlayCount":9},{"SnapTime":1331239651,"PlayCount":9},{"SnapTime":1331697329,"PlayCount":9},{"SnapTime":1332215655,"PlayCount":9},{"SnapTime":1332533799,"PlayCount":9}],"DeViant":[{"SnapTime":1330028992,"PlayCount":9},{"SnapTime":1330202828,"PlayCount":9},{"SnapTime":1330484662,"PlayCount":9},{"SnapTime":1330658201,"PlayCount":9},{"SnapTime":1330983800,"PlayCount":9},{"SnapTime":1331075294,"PlayCount":9},{"SnapTime":1331239651,"PlayCount":9},{"SnapTime":1331697329,"PlayCount":9},{"SnapTime":1332215655,"PlayCount":5},{"SnapTime":1332533799,"PlayCount":9},{"SnapTime":1332973327,"PlayCount":9}]}';
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'SnapTime' },
                    { name: 'PlayCount' }
                ],
                root: 'CaLvErT',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // prepare jqxChart settings
            var settings = {
                enableAnimations: true,
                showLegend: true,
                source: dataAdapter,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'SnapTime',
                        showTickMarks: true,
                        formatFunction: function (value) {
                            var date = new Date(parseFloat(value));
                            return $.jqx.dataFormat.formatdate(date, 't');
                        }
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                displayValueAxis: true,
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'PlayCount', displayText: 'PlayCount' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.