jQWidgets Forums

Tagged: add, chart, DisplayText, dynamically, jqxChart, json, series

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

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

Author

Line series with displayText Posts

December 20, 2013 at 9:21 am Line series with displayText #46806

Participant

Hello,

I’ve got the following structure from a database and read it into a PHP-Array. It is passed to JavaScript over a JSON String and then read with a dataAdapter.

date location value
—————————————————
2013/10/28 location1 10.081513890
2013/10/28 location2 10.075333330
2013/10/28 location3 0.712819444
2013/10/28 location4 0.826527778
2013/10/29 location1 0.923288194
2013/10/29 location2 0.982586806
2013/10/29 location3 0.874809028
2013/10/29 location4 0.971288194
2013/10/30 location1 10.09704435
2013/10/30 location2 0.906174797
2013/10/30 location3 0.850266129
2013/10/30 location4 0.922245968
2013/10/31 location1 0.960527586
2013/10/31 location2 0.931386207
2013/10/31 location3 0.713893103
2013/10/31 location4 0.755755172

Now I want to display it with date on the x-axis, and value on the y-axis with location as the graphs displayText. How do I get the displayText dynamically read into the diagram resulting in several location-graphs?

My diagram settings:

settings = {
title: ‘Locations’,
description: ‘Value of location based on date’,
source: dataAdapter,
colorScheme: ‘Scheme01’,
categoryAxis:
{
dataField: ‘DATE’,
textRotationAngle: 90,
showGridLines: true,
formatFunction: customDateFormat,
showTickMarks: false,
unitInterval: 1,
valuesOnTicks: false
},
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
unitInterval: intervalVal,
minValue: 0.0,
maxValue: maxVal,
description: descVal,
showTickMarks: true,
showGridLines: true,
valuesOnTicks: true,
formatSettings: {
decimalPlaces: 1
}
},
click: diagram_click,
series: [
{dataField: ???, displayText: ???}
]
}
]
};

I hope you can understand my problem.

December 20, 2013 at 12:10 pm Line series with displayText #46816

Dimitar

Participant

Hello HangWire,

Here is a chart with your data and requirements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.10.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 source =
            {
                datatype: "json",
                datafields: [
                    { name: 'date' },
                    { name: 'location1' },
                    { name: 'location2' },
                    { name: 'location3' },
                    { name: 'location4' }
                ],
                url: 'example.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Locations",
                description: "Value of location based on date",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'date',
                        type: 'date',
                        baseUnit: 'day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false,
                        formatFunction: function (value) {
                            return value.getFullYear() + "/" + value.getMonth() + "/" + value.getDate();
                        }
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 0.5,
                                minValue: 0,
                                maxValue: 10.5,
                                displayValueAxis: true,
                                description: 'Value of location',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'location1', displayText: 'Location 1' },
                                    { dataField: 'location2', displayText: 'Location 2' },
                                    { dataField: 'location3', displayText: 'Location 3' },
                                    { dataField: 'location4', displayText: 'Location 4' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

And here is the content of the file example.txt (your data should be formatted this way):

[
    {
        "date": "2013/10/28",
        "location1": 10.08151389,
        "location2": 10.07533333,
        "location3": 0.712819444,
        "location4": 0.826527778
    },
    {
        "date": "2013/10/29",
        "location1": 0.923288194,
        "location2": 0.982586806,
        "location3": 0.874809028,
        "location4": 0.971288194
    },
    {
        "date": "2013/10/30",
        "location1": 10.09704435,
        "location2": 0.906174797,
        "location3": 0.850266129,
        "location4": 0.922245968
    },
    {
        "date": "2013/10/31",
        "location1": 0.960527586,
        "location2": 0.931386207,
        "location3": 0.713893103,
        "location4": 0.755755172
    }
]

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 20, 2013 at 2:13 pm Line series with displayText #46820

HangWire

Participant

Thank you very much. But my problem is that the locations are not fixed in the database. They have to be dynamically added to the diagram.

January 2, 2014 at 8:17 am Line series with displayText #47117

Dimitar

Participant

Hi HangWire,

Here is how to add a new series to the chart programmatically. Note, however, that its datafield should already be defined in the chart source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.10.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 source =
            {
                datatype: "json",
                datafields: [
                    { name: 'date' },
                    { name: 'location1' },
                    { name: 'location2' },
                    { name: 'location3' },
                    { name: 'location4' }
                ],
                url: 'example.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Locations",
                description: "Value of location based on date",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'date',
                        type: 'date',
                        baseUnit: 'day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false,
                        formatFunction: function (value) {
                            return value.getFullYear() + "/" + value.getMonth() + "/" + value.getDate();
                        }
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 0.5,
                                minValue: 0,
                                maxValue: 10.5,
                                displayValueAxis: true,
                                description: 'Value of location',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'location1', displayText: 'Location 1' },
                                    { dataField: 'location2', displayText: 'Location 2' },
                                    { dataField: 'location3', displayText: 'Location 3' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);

            $("#addNewSeries").click(function () {
                var series = $('#jqxChart').jqxChart("seriesGroups");
                series[0].series.push({ dataField: 'location4', displayText: 'Location 4' });
                $('#jqxChart').jqxChart("refresh");
            });
        });
    </script>
</head>
<body class='default'>
    <button id="addNewSeries">
        Add new series</button>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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.