jQuery UI Widgets Forums Chart number of lines dependend on source and json format

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

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

  • AppBuilder
    Participant

    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 Dashev
    Participant

    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


    AppBuilder
    Participant

    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 Dashev
    Participant

    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

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

You must be logged in to reply to this topic.