topic Hello Diego, in Software Archive

Google Charts from Web Service

Alessio_R_ — Wed, 04 Jan 2017 13:55:01 GMT

Hello everybody,

I try to populate a simple pie chart (Google Charts Component) through a WebService which executes a trivial query and returns a JSON formatted string.

I'm currently stuck with some warnings and errors, showing up into the debugging console.

Code first: I changed the createChart method, inside the chart.js file, in order to pass only the plain URL to the function performing the http request:

function createChart(chartObject) {

        var chartWidth = chartObject.dataChartWidth;
        var chartHeight = chartObject.dataChartHeight;
        var url = chartObject.dataURL;
        var param = "/gviz/tq?tq=";
        var queryString = encodeURIComponent(chartObject.dataQueryString);
        var query = new google.visualization.Query(url); //this has been changed
        query.send(getQueryResponseHandler(chartObject.dataID, chartObject.dataChartType,chartWidth,chartHeight));

}

My JSON string is as follows:

{"cols":[{"label":"Paese","type":"string"},{"label":"Qta","type":"number"}],"rows":[{"c":[{"v":"A"},{"v":123.45}]},{"paese_nome":"A","qta":"123.45"},{"c":[{"v":"C"},{"v":49061.73}]},{"paese_nome":"C","qta":"49061.73"},{"c":[{"v":"I"},{"v":90661.31}]},{"paese_nome":"I","qta":"90661.31"},{"c":[{"v":"N"},{"v":1831.9}]},{"paese_nome":"N","qta":"1831.90"}]}

I got the two following errors in console:

Resource interpreted as Script but transferred with MIME type text/html: "http://localhost/WS/getData.php?tqx=reqId%3A0". format+en,default+en,ui+en,corechart+en.I.js:294gvjs_1l format+en,default+en,ui+en,corechart+en.I.js:294gvjs_.nw format+en,default+en,ui+en,corechart+en.I.js:365gvjs_.send format+en,default+en,ui+en,corechart+en.I.js:367createChart chart.js:78(anonymous function) chart.js:58initalizeCharts chart.js:57init

Uncaught SyntaxError: Unexpected token : getData.php?tqx=reqId%3A0:1
Error in query: Request timed out

I can't understand if

1) I'm using the component in the way it's meant to be used
2) Is Google Chart the best way to draw charts within XDK (there isn't much material to learn by example... )

Can anyone help me?
Thank You
Alex

Hi Alessio,

Diego_Calp — Wed, 04 Jan 2017 20:48:00 GMT

Hi Alessio,

I can give yousome feedback to your question 2).

I made this app with XDK using C3.js chart library:

https://www.agroideas.com.ar/?page_id=449

The library has a lot of examples, and work very well on mobile devices.

http://c3js.org/examples.html

Regards

Diego

Hello Diego,

Alessio_R_ — Wed, 04 Jan 2017 21:13:27 GMT

Hello Diego,
thank you very much for you answer.
Could I ask you how did you manage to integrate c3js inside XDK code? I'm pretty new to app development, and some code snippets can be very helpful.

Thank you again,
Alessio

PS: great app!

Hi Alessio,

Diego_Calp — Thu, 05 Jan 2017 02:06:53 GMT

Hi Alessio,

In short, the steps are:

1) include in your index.html the lib files:

        <link rel="stylesheet" href="lib/c3.min.css">
        <script type="application/javascript" src="lib/d3.min.js"></script>
        <script type="application/javascript" src="lib/c3.min.js"></script>

2) You need to manually create a div into one of your app pages to hold the chart, for example:

                    <div id="cht_pro" style="width:96%;height:210px"></div>

3) Create the chart pointing that div, I'm just pasting the code from my app, it is part of a function that receives the values after a button press:

	var chart = c3.generate({
		bindto: '#cht_pro', //this is the line poining to the div above
		data: {
			x : 'x',
			columns: [
				labels,
				promedio,
				propios
			],
			type: 'bar',
			types: {'Mis precios': 'line'},
			colors: {
				'Promedio nacional': '#cc3300',
				'Mis precios': '#9999cc'
			}
		},
		point: {
			r: 5	
		},
		axis: {
			x: {
				type: 'category',
				tick: {
					rotate: 90,
					multiline: false
				}
			}
		},
		tooltip: {
			format: {
				value: function (value, ratio, id) {
					var format = d3.format('.3n');
					return format(value);
				}
			}
		}
	});

Replace the code of point 3) with one of the lib samples to test.

Regards

Diego