Here is a tip on how to use the Highcharts library of charts in Aware IM application. Highcharts have a lot of great charts and they have free version and a paid developer version which has a very good price point (390USD for 1 developer, unlimited projects, SaaS etc.). The creators of highcarts also has 2 other great libraries (stock charts and map charts).
The configuration steps here are the same as the ones for integration of Fusioncharts so if you know them, this will be easy / the same procedure. 1 additional great thing about these charts is, you can print, export to png/pdf etc. etc. directly from the chart (see screenshot below):
Highcharts demos:
http://www.highcharts.com/demo
Highcharts official site:
http://www.highcharts.com/products/highcharts
Highcharts servier side chart generation (please post how to if you manage to integrate this library with Aware IM reports):
http://www.highcharts.com/component/con ... ted-charts
Sales Funnel Example (guide below):
In this example I will explain step by step how to integrate the Sales Funnel chart displayed above (other integrations i.e. other charts are just as easy). I have not included tags in this example i.e. the data in the chart is not from the actual application displaying the chart. For info on using tags, see Marks Fusioncharts guide / post.
1. Add the following to your startup.html file:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/expo ... "></script>
2. Add the following to a single html cell in a form (you should have this html cell only and nothing else):
<div id="container" style="min-width: 800px; max-width: 800px; height: 600px; margin: 0 auto"></div>
3. Add the following js to the form "advanced script" (see Marks Fusioncharts guide if you need more info on how/where to add it):
Code: Select all
$(function () {
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]
});
});
