Возможно ли подключить google-charts?
 

Понравилась диаграмма "Creating Material column charts" ( https://developers.google.com/chart/...ry/columnchart ). Хотел бы у себя в проекте задействовать.

okuznetsov1,
http://angular-google-chart.github.i...amples/column/

Видел этот вариант - не понравилось то как массив формируется.

А можно ли как-то обернуть в angular-приложение именно google-charts, а не использовать какие либо другие библиотеки?

okuznetsov1,
возможно, только надо за книжками посидеть...https://github.com/angular-google-ch...evelopment/src

okuznetsov1,
http://jsfiddle.net/jwn0bmth/

спасибо

Продолжу тему. Подключил google-chart, всё работает. Теперь хочу добавить этому элементу css класс (в самом простом случае - для размещения по центру, слева-справа и т.д.). Не получается. Не работает как html-тег align, так и более удобное решение с add.listener на draw('ready').

ссылка на пример:
http://stackoverflow.com/questions/1...-google-charts

Код.

<div ng-controller="MyCtrl">
        <div id="chart_div" ><table>123</table></div>

        <button id="change-chart">Change to Classic</button>
    </div>

app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myctrl = MyCtrl();
}]);

function MyCtrl($scope) {
    google.charts.load('current', {'packages':['line', 'corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Month');
        data.addColumn('number', "Average Temperature");
        data.addColumn('number', "Average Hours of Daylight");

        data.addRows([
            [new Date(2014, 0),  -.5,  5.7],
            [new Date(2014, 1),   .4,  8.7],
            [new Date(2014, 2),   .5,   12],
            [new Date(2014, 3),  2.9, 15.3],
            [new Date(2014, 4),  6.3, 18.6],
            [new Date(2014, 5),    9, 20.9],
            [new Date(2014, 6), 10.6, 19.8],
            [new Date(2014, 7), 10.3, 16.6],
            [new Date(2014, 8),  7.4, 13.3],
            [new Date(2014, 9),  4.4,  9.9],
            [new Date(2014, 10), 1.1,  6.6],
            [new Date(2014, 11), -.2,  4.5]
        ]);

        var materialOptions = {
            chart: {
                title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
            },
            width: 900,
            height: 500,
            series: {
                // Gives each series an axis name that matches the Y-axis below.
                0: {axis: 'Temps'},
                1: {axis: 'Daylight'}
            },
            axes: {
                // Adds labels to each axis; they don't have to match the axis names.
                y: {
                    Temps: {label: 'Temps (Celsius)'},
                    Daylight: {label: 'Daylight'}
                }
            }
        };

        var classicOptions = {
            title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
            width: 900,
            height: 500,
            // Gives each series an axis that matches the vAxes number below.
            series: {
                0: {targetAxisIndex: 0},
                1: {targetAxisIndex: 1}
            },
            vAxes: {
                // Adds titles to each axis.
                0: {title: 'Temps (Celsius)'},
                1: {title: 'Daylight'}
            },
            hAxis: {
                ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                    new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                    new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                ]
            },
            vAxis: {
                viewWindow: {
                    max: 30
                }
            }
        };

        function drawMaterialChart() {
            var materialChart = new google.charts.Line(chartDiv);
            // HERE'S HOW TO SUBSCRIBE TO THE EVENT
            google.visualization.events.addListener(materialChart, 'ready', resetTableStyle);//изменить стиль перед отправкой
            materialChart.draw(data, materialOptions);
            button.innerText = 'Change to Classic';
            button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
            var classicChart = new google.visualization.LineChart(chartDiv);
            google.visualization.events.addListener(classicChart, 'ready', resetTableStyle);//изменить стиль перед отправкой
            classicChart.draw(data, classicOptions);
            button.innerText = 'Change to Material';
            button.onclick = drawMaterialChart;
        }

        // HERE'S THE JAVASCRIPT TO SET YOUR CSS
        // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
        function resetTableStyle(){
            var myDiv = document.getElementById('chart_div');
            var myTable = myDiv.getElementsByTagName('table')[0];
            myTable.style.margin = 'auto';
            myTable.align = "center";
        }
        drawMaterialChart();
    }
}

Есть вопрос, почему в примере стили редактируются для

var myTable = myDiv.getElementsByTagName('table')[0];

, если элемент графика живёт в

var myDiv

. Пробовал разные варианты, классы не применяются.

Тэкс. Идём дальше. Пользую "Annotation Chart". Всё прелестно, но шрифт легенды, названия и аннотации очень мелкий. Захотел его увеличить, но не тут-то было. В документации на "Annotation Graph"
https://developers.google.com/chart/...nnotationchart
про стиль шрифта ничего нет. Аналогичные настройки из других графиков (см. ниже) не работают... ни одна. Что посоветуете?

var options = {
            displayAnnotations: true,
            displayZoomButtons: true,
            annotationsWidth: 15,
            thickness: 2,
            //
            titleTextStyle: {
                        // color: <string>,    // any HTML string color ('red', '#cc00cc')
                    fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 12, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: false   // true of false
            },
            hAxis : {
                textStyle : {
                    fontSize: 30 // or the number you want
                }
            },
            legend: {position: 'top', textStyle: {color: 'blue', fontSize: 16}},
            legendtextStyle: {
                    fontName: "Times New Roman",
            fontSize: 16,
            },
            annotations: {
                textStyle: {
                    fontName: 'Times-Roman',
                    fontSize: 18,
                    bold: true,
                    italic: true,
                    color: '#871b47',     // The color of the text.
                    auraColor: '#d799ae', // The color of the text outline.
                    opacity: 0.8          // The transparency of the text.
                }
            },
            fontsize: "20",
            fontSize: "20",
            hAxistitleTextStyle: {color: 'black', fontName: 'Arial', fontSize: "20"},

            // zoomEndTime: new Date(2314, 2, index),
        };