anychart integration query

[amitloh]

Anychart is extremly powerful charting tool with responsive/modern look plus export to pdf, excel, img etc. and I want to see if this can be used in viewbox or free form.

https://www.anychart.com/products/an...ive_Values.php
https://www.anychart.com/features/#dashboards

Now main question is how do I replace rows and header in alpha UX(either viewbox or free form layout using data series?
<script type="text/javascript">
anychart.onDocumentReady(function() {
// create data set on our data
chartData = {
title: 'Top 10 Products by Profit',
header: ['#', 'Florida', 'Texas', 'Nevada', 'Arizona'],
rows: [
['Powder', 11861, 10919, -8034, 18012],
['Mascara', 11261, 10419, -6134, 18712],
['Lip gloss', 22998, 12043, 4572, -4008],
['Foundation', 10342, 10119, -5231, 13701],
['Eyeliner', 12321, 15067, 3417, -5432],
['Eyeshadows', 12998, 12043, -4572, -3308],
['Lipstick', 8814, 9054, 4376, -9256],
['Rouge', 11624, -7004, -3574, 5221],
['Eyebrow pencil', 13012, -5067, -3987, -3932],
['Nail polish', 12814, -3054, -4376, -4229]
]
};

[mikeallenbrown]

Re: anychart integration query

Don't know anything about Anychart, however, Alpha does have Google chart integration. I use it in my apps. There is a UX template if you wanted to check it out. Just a suggestion.

[Davidk]

Re: anychart integration query

Yes... very nice charting library. The chart Header and Data are just Arrays of data...

	var chartHeader = ['#', 'Florida', 'Texas', 'Nevada', 'Arizona'];
	var rowData = [
      ['Powder', 11861, 10919, -8034, 18012],
      ['Mascara', 11261, 10419, -6134, 18712],
      ['Lip gloss', 22998, 12043, 4572, -4008],
      ['Foundation', 10342, 10119, -5231, 13701],
      ['Eyeliner', 12321, 15067, 3417, -5432],
      ['Eyeshadows', 12998, 12043, -4572, -3308],
      ['Lipstick', 8814, 9054, 4376, -9256],
      ['Rouge', 11624, -7004, -3574, 5221],
      ['Eyebrow pencil', 13012, -5067, -3987, -3932],
      ['Nail polish', 12814, -3054, -4376, -4229]
    ];
  chartData = {
    title: 'Top 10 Products by Profit',
    header: chartHeader,
    rows: rowData
  };

chartHeader is an Array of 5 values... and rowData is an Array of 10 Values where each Value is another Array of 5 values.

Just get your data and start building the Arrays in that format.

Remember that running this stuff in an HTML/A5W page is one thing... but running it inside a UX may be another. You may not get AnyChart out of the box functionality... since you're now running inside a container that has it's own ideas of sizing, etc.

[amitloh]

Re: anychart integration query

Thanks Mike, David. This library comes close to tableau, powerbi in terms of features(powerful export, multilingual, 100% responsive, modern themes etc) but costs only few hundred $. I will first try it in UX and then a5w.(A5w works fine, I am trying to get alpha published data series into this)

[amitloh]

Re: anychart integration query

I am almost close!
I was able to add anychart to viewbox very easily.

The only issue is how to add dataseries from alpha into anychart...
viewbox script-

anychart.onDocumentLoad(function() {
// create chart and set data
var data1={dialog.object}._dataSeriesData.Series1.Population;
alert(data1);
var data = [
// column name value
{x: '2014/6/25', value: 28}, // row 0
{x: '2014/6/26', value: 26}, // 1
{x: '2014/6/27', value: 27}, // 2
{x: '2014/6/28', value: 25, marker:{fill:'violet'}}, // 3
{x: '2014/6/29', value: 29, marker:{fill:'red'}}, // 4
{x: '2014/6/30', value: 28,} // 5
];


// create a data set
var dataSet = anychart.data.set(data);

// create a line chart using the data set
var lineChart = anychart.line(dataSet);

// set container id for the chart
lineChart.container('container');
lineChart.title('New York weather');
lineChart.getSeries(0).name('New York');

// initiate chart drawing
lineChart.draw();
});

[amitloh]

Re: anychart integration query

they also have json-
// create json data
var json = {
"chart": {
"type": "pie",
"data": [
["Product A", 1222],
["Product B", 2431],
["Product C", 3624],
["Product D", 5243],
["Product E", 8813]
]
}
};

// create chart from json config
var chart = anychart.fromJson(json);

// display a chart
chart.container('container').draw();

[amitloh]

Re: anychart integration query

I am able to get bsic chart working!

anychart.onDocumentLoad(function() {// create json data
var chart = anychart.fromJson({
"chart": {
"type": "column",
"series":[{
"data": {dialog.object}._dataSeriesData.Series1.Population,
}],
"container": "container1"
}
});

chart.draw();
});

now I need 2 column series example-

[amitloh]

Re: anychart integration query

how to fill series like below-
// series settings
"series": [{
// first series data
"data": [
{"x": "P1", "value": "128.14"},
{"x": "P2", "value": "112.61"},
{"x": "P3", "value": "163.21"},
{"x": "P4", "value": "229.98"},
{"x": "P5", "value": "90.54"}
]
},{
// second series data
"data": [
{"x": "P1", "value": "90.54"},
{"x": "P2", "value": "104.19"},
{"x": "P3", "value": "150.67"},
{"x": "P4", "value": "120.43"},
{"x": "P5", "value": "200.34"}
]
}]

[amitloh]

Re: anychart integration query

Hi David,

anychart11.zip
I was able to create a charting dashboard using anychart. Now I just need some guidance on how to bind this to northwind or static data series in alpha.

If I can achieve this then I will have enterprise database(mysql), good RAD tool-alpha and enterprise grade dashboards.

Untitled.png
Untitled.png

viewbox js-

anychart.onDocumentReady(function () {

// variable to help us define screen proportions
var flag;

// data for the charts
var drinks_data = anychart.data.set([
['Cosmopolitan', 51, 45, 6, 10, 100],
['Martini', 67, 39, 28, 9, 55],
['Mojito', 19, 11, 8, 8, 250],
['Margarita', 47, 33, 14, 9, 110],
['Mai Tai', 32, 20, 12, 10, 210],
['Beer', 70, 20, 50, 5, 300]
]);

var previous_years_data = anychart.data.set([
['2010', 60, 176, 35, 25],
['2011', 51, 136, 25, 26],
['2012', 73, 196, 35, 38],
['2013', 84, 315, 43, 41],
['2014', 79, 203, 36, 33],
['2015', 89, 286, 41, 48]
]);

// helper function to setup same settings for all Axis Titles
var setupChartAxisTitles = function (chart, titleX, titleY) {
chart.xAxis().labels().fontSize(11).padding([0, 0, 0, 0]);
chart.yAxis().labels().fontSize(11).padding([0, 0, 0, 0]);
if (titleX) chart.xAxis().title().enabled(true).text(titleX).fontSize(12).margin(0).padding([3, 0, 0, 0]);
if (titleY) chart.yAxis().title().enabled(true).text(titleY).fontSize(12).margin(0).padding([0, 0, 3, 0]);
};

// helper function to setup same settings for all Charts
var setupChartSettings = function (chart) {
chart.container(stage);
chart.margin(0);
chart.padding([15, 30, 15, 15]);
chart.title().fontColor('#212121').fontSize(13).padding([0, 0, 10, 0]);
chart.draw();
};

// create stage for all charts
stage = acgraph.create('container');

var title = anychart.standalones.title();
title.text('New Year Parties at ACME corp.');
title.background('#ffffff');
title.padding(10);
title.container(stage);
title.draw();

var pieChart = anychart.pie(drinks_data);
pieChart.title('Drinks');
pieChart.radius('40%');
pieChart.legend().enabled(false);
pieChart.labels().position('outside').fontSize(10).format(function () {
return this.x
});
pieChart.tooltip().format(function () {
return this.value + ' orders'
});
setupChartSettings(pieChart);

var barChart = anychart.bar();
barChart.title('Drinks by Gender');
barChart.bar(drinks_data.mapAs({'value': 3, 'x': 0})).name('Male');
barChart.bar(drinks_data.mapAs({'value': 2, 'x': 0})).name('Female');
setupChartAxisTitles(barChart, null, 'Drinks ordered');
setupChartSettings(barChart);

var scatterChart = anychart.bubble();
scatterChart.title('Drinks Volumne/Price Ratio');
var bubble_series = scatterChart.bubble(drinks_data.mapAs({'value': 4, 'x': 5, 'size': 1, 'name': 0}));
bubble_series.tooltip().useHtml(true).titleFormat(function () {
return this.getData('name')
}).format(function () {
return '<span style="font-size: 11px;">Price: $' + this.value + '<br/>Volume: ' + this.x + ' ml.<br/>Orders: ' + this.size + '</span>';
});
bubble_series.yScale()
.minimum(0)
.maximum(15);
setupChartAxisTitles(scatterChart, 'Volume (ml)', 'Price, $');
setupChartSettings(scatterChart);

var lineChart = anychart.line();
lineChart.title('Number of drinks by year');
lineChart.line(previous_years_data.mapAs({'value': 1, 'x': 0})).tooltip().format(function () {
return this.value + ' drinks'
});
setupChartAxisTitles(lineChart, null, 'Drinks ordered');
setupChartSettings(lineChart);

var areaChart = anychart.area();
areaChart.title('Parties Turnout');
areaChart.area(previous_years_data.mapAs({'value': 2, 'x': 0})).tooltip().format(function () {
return this.value + ' persons present'
});
setupChartAxisTitles(areaChart, null, 'Turnout');
setupChartSettings(areaChart);

var columnChart = anychart.column();
columnChart.title('Turnout by Gender');
columnChart.yAxis().title('Turnout');
columnChart.column(previous_years_data.mapAs({'value': 3, 'x': 0})).name('Male');
columnChart.column(previous_years_data.mapAs({'value': 4, 'x': 0})).name('Female');
setupChartAxisTitles(columnChart, null, 'Turnout');
setupChartSettings(columnChart);

// Creates general layout table with two inside layout tables
function configureChartsSize() {
if (window.innerWidth > 768) {
flag = 'wide';
pieChart.bounds(0, 30, '33.3%', '47%');
barChart.bounds('33.3%', 30, '33.3%', '47%');
scatterChart.bounds('66.6%', 30, '33.3%', '47%');
lineChart.bounds(0, '52%', '33.3%', '47%');
areaChart.bounds('33.3%', '52%', '33.3%', '47%');
columnChart.bounds('66.6%', '52%', '33.3%', '47%');
} else {
flag = 'slim';
pieChart.bounds(0, 30, '50%', '33.3%');
barChart.bounds('50%', 30, '50%', '33.3%');
scatterChart.bounds(0, '33.3%', '50%', '33.3%');
lineChart.bounds('50%', '33.3%', '50%', '33.3%');
areaChart.bounds(0, '66.6%', '50%', '33.3%');
columnChart.bounds('50%', '66.6%', '50%', '33.3%');
}
}

configureChartsSize();

// On resize change layout to mobile version or otherwise
window.onresize = function () {
if (flag == 'slim' && window.innerWidth > 767) {
configureChartsSize('wide');
} else if (flag == 'wide' && window.innerWidth <= 767) {
configureChartsSize('slim');
}
title.parentBounds(0, 0, stage.width(), 130).draw();

}
});