How to load data from JSON data source in jqxChart? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart

This topic contains 7 replies, has 3 voices, and was last updated by gustavo 8 years, 10 months ago.

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

Author

How to load data from JSON data source in jqxChart? Posts

September 27, 2013 at 7:38 am How to load data from JSON data source in jqxChart? #29670

Apeksha Singh

Participant

Hi,

I am using jqxChart Column Series can you guide me how to load data from JSON data source for this chart.

I have to show “Money Coming In and Going Out” on monthly basis for my organisation.Con you please guide me with the code of loading data from JSON data source for this scenario.

I am using jqwidgets-ver2.9.2.

Thanks & Regards,

Apeksha

September 27, 2013 at 7:44 am How to load data from JSON data source in jqxChart? #29676

Peter Stoev

Keymaster

Hi Apeksha,

You can learn how to achieve that from this help topic: jquery-chart-data-source.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2013 at 11:30 am How to load data from JSON data source in jqxChart? #29702

Apeksha Singh

Participant

Hi Peter Stoev,

Can we load JSON sampledata for charts like we have for grids?
I am adding a code below for sampledata that I am using for a grid.This sampledata is a seperate .php file(sampledata/test_tab_sampledata.php) and I am using it for my chart sample data too :-

<?php
	$Country = array("Luxembourg","Singapore","Norway","USA","Austria","Germany","Canada");
	$GDP = array("10000","15000","20000","25000","30000","35000","40000","45000","50000","55000","60000","65000","70000");
	$DebtPercent = array("2.25", "1.5", "3.0", "3.3", "4.5", "3.6","2.25", "1.5", "3.0", "3.3", "4.5", "3.6","2.25");
	$Debt = array("10000","15000","20000","25000","30000","35000","40000","45000","50000","55000","60000","65000","70000");
		
	$data = array();
	$i=0;
	while($i < 20)
	{    
	  $row = array();
	  $row["Country"]=$Country[$i];	
	  $row["GDP"]=$GDP[$i];	
	  $row["DebtPercent"]=$DebtPercent[$i];
	  $row["Debt"]=$Debt[$i]
	  $data[$i] = $row;
	  $i++;
	}
	 
	header("Content-type: application/json"); 
	echo "{\"data\":" .json_encode($data). "}";
?>

And below is the code for charts that I am using :-

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css">
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-redmond.css" type="text/css">
    <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.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/test_tab_sampledata.php'
            };
            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,
                categoryAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                displayValueAxis: true,
                                description: 'GDP & Debt per Capita($)'
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita'},
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                displayValueAxis: false,
                                description: 'Debt (% of GDP)'
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)', opacity:0.3 }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
	<div style='height: 600px; width: 682px;'>
    <div id='host' style="margin: 0 auto; width:680px; height:400px;">
		<div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
		</div>
	</div>
    </div>
</body>
</html>

Using this is showing an error :-

Error loading “sampledata/test_tab_sampledata.php” : Internal Server Error
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

September 27, 2013 at 11:32 am How to load data from JSON data source in jqxChart? #29705

Peter Stoev

Keymaster

Hi Apeksha,

“Internal Server Error” is not an exception related to jQWidgets. Most probably you have a problem with your server or with the URL that you use.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 27, 2013 at 12:16 pm How to load data from JSON data source in jqxChart? #29709

Apeksha Singh

Participant

Hi Peter Stoev,

Can you tell me if it the right way to load JSON sampledata in charts.

Thanks & Regards,
Apeksha

September 27, 2013 at 1:19 pm How to load data from JSON data source in jqxChart? #29718

Peter Stoev

Keymaster

Hi Apeksha,

The help topic I sent you demonstrates that. Such sample with JSON is also available online: chart.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 30, 2013 at 5:52 am How to load data from JSON data source in jqxChart? #29803

Apeksha Singh

Participant

Hi Peter Stoev,

Thanks for your response it helps.

Regards,
Apeksha

May 4, 2016 at 2:56 pm How to load data from JSON data source in jqxChart? #84110

gustavo

Participant

Is there a way to chart this http://jsfiddle.net/UX2c6/670/, where the FileType and Status are the xAxis and render columns based on total?

Author

Posts

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

You must be logged in to reply to this topic.