jQuery UI Widgets Forums Chart CSV delimiter and decimal separator

This topic contains 2 replies, has 2 voices, and was last updated by  Plexi1 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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 ?

    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

    • This reply was modified 1 year, 5 months ago by  Hristo.
    CSV delimiter and decimal separator #102391

    Plexi1
    Participant

    Thank you Hristo, I will give it a try

    Best Regards

    Gilbert

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

You must be logged in to reply to this topic.