- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
Regards
Diego
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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

- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page