jQuery UI Widgets › Forums › Chart › CSV delimiter and decimal separator

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Plexi1 6 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    CSV delimiter and decimal separator Posts
  • October 12, 2018 at 11:48 am CSV delimiter and decimal separator #102368

    Plexi1
    Participant

    I am currently testing how to get a chart out of a CSV file and already succeeded with a selfmade CSV file for testing but now I have two questions:

    1. My CSV files I want to use have a , as decimal separator and a ; as delimiter like this:

    31.01.2018 15:45:37;20,60001
31.01.2018 15:46:07;20,7
31.01.2018 15:46:37;20,8
31.01.2018 15:47:07;20,92
31.01.2018 15:47:37;21
31.01.2018 15:48:07;21,1001

    I added columnDelimiter: ‘;’ under var source like this:

    var source =
            {
                datatype: "csv",
                columnDelimiter: ';',
                datafields: [
                    { name: 'Date' },
                    { name: 'Temperature' }
                ],
                url: 'Temperatur2.csv'
            };

    and the chart renders a line perfectly, however, the tooltips don’t show a value since the decimal separator is wrong. How can I resolve this ? I was thinking about localization but couldn’t find a solution or example.

    2. Is it possible to select which columns in a CSV file will be used for the chart and can I skip the first line in the CSV file somehow ?

    October 15, 2018 at 10:18 am CSV delimiter and decimal separator #102388

    Hristo
    Participant

    Hello Plexi1,

    You could use beforeprocessing callback of the DataAdapter’s source to transform the initial data.
    Please, take a look at this example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Column Series Example</title>
    <meta name="description" content="This is an example of JavaScript Chart Column Series." />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt',
                beforeprocessing: function (data)
                {
                    var returnData = {};
                    returnData.records = data.d;
                    var arr = data.split('\n');
                    //Delete two records;
                    arr.pop();
                    arr.pop();
                    var newData = arr.join('\n');

                    return newData;
                }

            };

            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: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Country',
                        gridLines: { visible: true },
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme01',
                columnSeriesOverlap: false,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 5000,
                                title: { text: 'GDP & Debt per Capita($)<br>' }
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita' },
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                visible: true,
                                position: 'right',
                                unitInterval: 10,
                                title: { text: 'Debt (% of GDP)' },
                                gridLines: { visible: false },
                                labels: { horizontalAlignment: 'left' }
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                ]
                        }

                    ]
            };

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

        });
    </script>
</head>
<body class='default'>
	<div id='chartContainer' style="width:850px; height:500px;">
	</div>
         <div class="example-description">
        <br />
        <h2>Description</h2>
        <br />
         This is an example of JavaScript chart column series. The data of the chart is prepared as an array from a text file. The type of the series is column. The columnSeriesOverlap option is set to false.  You can see a second line series linked to the DebtPercent data field. You can also see how to enable the animation and how to set the title padding.
        </div>
</body>
</html>

    It is based on this demo.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    October 15, 2018 at 11:14 am CSV delimiter and decimal separator #102391

    Plexi1
    Participant

    Thank you Hristo, I will give it a try

    Best Regards

    Gilbert

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

You must be logged in to reply to this topic.