number of lines dependend on source and json format

[AppBuilderParticipant]

Hello,

I am currently testing jqwidget with focus jqxgrid and jqxchart (Linux/PHP/Joomla).

Question: jqxchart

I would like to create a simple line chart with multiple lines.
The number of lines should depend on the data source.

Example A:
The result would be just one line for Person A, using “rank” (1 to 3) as X-Axis and “value” as Y-Axis.

name | rank | value
Person A | 1 | 23
Person A | 2 | 44
Person A | 3 | 53
…

Example B:
The result would be a Line for Person A and a line for Person B, using “rank” (1 to 3) as X-Axis and “value” as Y-Axis.

name | rank | value
Person A | 1 | 23
Person A | 2 | 44
Person A | 3 | 53
Person B | 1 | 12
Person B | 2 | 16
Person B | 3 | 19
…

From what I have learned, I need to fetch my data as json as described here:

Bind the Chart to MySQL Database using PHP
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

Right now I am stuck, because I am not sure how to correctly populate the data source (json).

I believe the data has to be in a specific format, in order for jqxchart to detect how many lines it will actually draw?
Do I need to have my db structure in a specific way in order to populate json easier?

[Yavor DashevParticipant]

Hi AppBuilder,

The data can be in JSON format, also just to note that JqxChart does not detect how many lines it will draw just by the data format.
If you want to set how many lines to be drawn on the chart you have to set the ‘seriesGroups’ property and in it you have to set the ‘datafield’ in the ‘series’ array objects and bind ‘datafield’ to the ‘key’ of the object from your data.
Just to showcase you how to set the ‘seriesGroups’ property and how to structure your data I have made a quick example for you :

 
 <script type="text/javascript">
        $(document).ready(function () {
            //Just an example to show you how your data can look like 
            var sampleData = [
                { Day:'Monday', PersonA:30, PersonB:15, },
                { Day:'Tuesday', PersonA:25, PersonB:25, },
                { Day:'Wednesday', PersonA:30, PersonB:20, },
                { Day:'Thursday', PersonA:35, PersonB:25, },
                { Day:'Friday', PersonA:20, PersonB:20, },
                { Day:'Saturday', PersonA:30, PersonB:20, },
                { Day:'Sunday', PersonA:60, PersonB:45,}
            ];
            // prepare the data
            var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise",
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    categoryAxis:
                        {
                            dataField: 'Day',
                            showGridLines: true
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'line',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    displayValueAxis: true,
                                    description: 'Time in minutes',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                                //Bind the dataField to the key of the object you want the lines to be drawn
                                series: [
                                        { dataField: 'PersonA', displayText: 'Person A '},
                                        { dataField: 'PersonB', displayText: 'Person B'},
                                       
                                    ]
                            }
                        ]
                };
                            
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
    <body class='default'>
        <div id='jqxChart' style="width: 680px; height: 400px">
        </div>
    </body>

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[AppBuilderParticipant]

Thank you for your tutorial.
As I can see, support is really good.

//===== OFFTOPIC

From what I have seen, I might becomde a pro customer.
Need to test first and check how the learning curve works out for me (never been into JS, but I can read your code and understand the basics).

So far, it looks well thought out.

I am currently facing a little firefox issue with this page:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/

When I click a link, I can see the sample I clicked.
When I try to click on another link, the URL changes, but the new link does not load.
I have to refresh the page and then I can go on to view the next link.
I have checked my browser extension, but everything looks ok.

Anyhow. Sorry for this long off topic.

//===== OFFTOPIC

My main problem with the code above is to get the data in a correct way.

You are using:
var sampleData =

I would like to fetch the data from mysql database (Joomla) with given table structure:
SELECT name, rank, value FROM app_1_analysis_1 WHERE name IN (PersonA,PersonB)

name | rank | value
Person A | 1 | 23
Person A | 2 | 44
Person A | 3 | 53
Person B | 1 | 12
Person B | 2 | 16
Person B | 3 | 19
Person C | 1 | 32
Person C | 2 | 66
Person C | 3 | 79

Database connection and fetching already works for me with jqxgrid.
But how can I create asuitable JSON with my structure.

Or do I need to alter my table in order to fetch data as json in a more “native”/workable way?

[Yavor DashevParticipant]

Hi AppBUilder,

We have documentation regarding different data sources for the jqxChart.
I recommend you to give it a look:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm?

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts