jqplot chart doesnt populate

[Peter LPunkt]

Hi there,
i am very satisfied with the features of appery.io and was thinking about getting a premium account. So far i've tried the features with the testaccount, but i wasn't able to successfully create a jqplot graph (which is the thing holding me back from buying a premium account, because being able to plot data is absolutely essential for me).

I've used these guides, with no success:
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...

What i did:

1. I've added the js and css resouces jquery.jqplot.js & jquery.jqplot.css via Create New - JavaScript/CSS

2. I created a page called Graph and added a HTML Box. Via "PROPERTIES - HTML" - "Edit HTML" - "HTML Editor" - "HTML Source" i added the div container:

3. I created the event: Graph(Component) - Load(Event) - Run JavaScript(Action) with the following js code:
   var chart = $.jqplot('plot1', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

   These are the errors in the browser console:
   

   I've tried alternative libraries like flot.js with the same result. Sadly i haven't found any information which code was used, when jqplot was used successfully (in the other theads)
   Please help me fix this, you would make my day.
   Cheers

[maxkatz]

Are you able to get the jqplot to work in an app not developed in Appery.io? For instance, if you get a plain HTML page and add the jqplot library and run the same code?

This is a 3rd party library and the app simply runs in the browser (not in Appery.io). I'm not sure this has to do with Appery.io.

[Peter LPunkt]

Hi there again,
yes i was able to draw the graph with the libraries (jquery.js, jquery.jqplot.js and jquery.jplot.min.css) and the code in a simple html page:

It doesnt draw any chart with appery.io, if i use a html-box with the div.

"This is a 3rd party library and the app simply runs in the browser (not in Appery.io)." What do you mean with this comment? I know its a 3rd party library.
Thanks.

[maxkatz]

That means it's usually outside the scope of our support, but I'll ask our team to check this out.

[Kateryna Grynko]

Hi Peter,

To add jqplot to Appery.io:
1) Go to https://sites.google.com/site/jqplot/... then download jquery.jqplot.min.js and jquery.jqplot.css and add them as custom JS and CSS accordingly.
2) Add HTML component to a page and insert the following html code:precode<div id="myplot"><&#47;div>/code/pre3) On Page Show event run this JS code: pre$&#46;jqplot('myplot', [[[1, 2],[3,5&#46;12],[5,13&#46;1],[7,33&#46;6],[9,85&#46;9],[11,219&#46;9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});/pre

[Peter LPunkt]

Wohoo, works like a charm. Thank you guys!

It seems like the most recent libraries dont work, i tried with Version jqPlot 1.0.8r1250, Version: 1.0.0b2_r792 works.

[Nick Pitt]

Hi

I am trying to create graphs and i have found this easy to follow so far as i have created a graph and used Peters useful tip of using a more recent library.

But how can i get the graph to talk to the tables from the database ? My Database is MeterDetails and the collection is MetDetails if this helps.

Do i need to amend the Javascript or do i need to include another element ?

Thanks

Nick

[Kateryna Grynko]

Hi Nick,

On service Success event you can get service response in a variable 'data'. You can either use it in jqprot, or save in localStorage variable and use its value when needed.

[Tooba Atif]

Hi there I want to add pie chart in my application I am using the above mentioned steps given by Katya but the pie chart is not showing. See the code and image showing output.
Any help would be appreciated

Code:

$.jqplot ('myplot', [[['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]]],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);

[Peter LPunkt]

Hey Tooba,

you copied the code from the examples page, right? If you are using the latest version, klick on the link in the following line :"You can find all the samples that are included in the distribution over here. Those examples are running the latest jqPlot sources."

This will take you to the examples of the most recent distribution, you can find other pie charts there.

Did you include all the files you need? the main jqplot.js and css and also the specific renderers (jqplot.pieRenderer.min.js)?
Perhaps take a look at the documentation and the options tutorial, which are very helpful ond the jplot.com site.
Cheers