График для android studio

Библиотека GraphView

Библиотека для построения графиков двух видов.

Официальная страница

Готовую библиотеку можно скачать по адресу http://android-graphview.org/. Также есть страница на Гитхабе с открытыми исходниками.

Работаем с библиотекой

Скопируем библиотеку в папку libs вашего проекта.

Подключение происходит следующим образом. Вы создаёте макет экрана на основе LinearLayout и программно подключаете нужный класс к данному контейнеру.

Осталось написать код для активности. Нужно указать данные для графика, а компонент постарается автоматически вычислить доступный ему размер и пропорционально разместить данные для сетки, а затем нарисует график. Начнём с линейной графики.

Чтобы линейный график заменить на гистрограмму (или как он там называется?), то нужно заменить класс LineGraphView на BarGraphView:

На графике видно, что понедельник — день тяжёлый и кот поймал только три мышки. Потом обычные трудовые будни, в пятницу кот уже ждёт предстоящих выходных и работает спустя рукава. Ну а в субботу и воскресенье он отказывается работать, ссылаясь на трудовой кодекс и угрожая пожаловаться в Общество защиты животных. Бездельник!

Также существуют различные методы для управления стилями: цветом, размерами и т.п. Примеры можно посмотреть на сайте автора.

Источник

Графики MPAndroidChart в Android Studio

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Справочная информация

У компонента хорошая документация и хороший тестовый пример, откуда можно почерпнуть много полезной информации:

Создание болванки

Создадим для примера пустое приложение в Android Studio с LinearLayout и кнопкой, для которой подготовим слушателя клика.

Файл MainActivity.java (без строки package ):

Подключение библиотеки

На странице библиотеки посмотрите текущее описание подключения библиотеки:

И в файле настроек Gradle скопируйте два куска кода в указанные ниже ан рисунке места и синхронизируйте проект:

Попробуйте запустить проект на эмуляторе или физическом устройстве:

Если всё запустилось хорошо, то всё отлично. Но у меня вылетает такая ошибка:

Для этого в том же файле Gradle нужно прописать еще такие строки в разделе android :

Добавьте их именно в раздел android :

После этого синхронизируйте Gradle и запустите проект. Если вы видите пустое приложение с кнопкой, то всё хорошо:

Если вылетит ошибка с подобным сообщением, то просто перезапустите Android Studio, откройте проект и запустите заново приложение:

Создание компонента графика

Для разных видов графиков существуют свои компоненты, которые описаны в документации. Мы хотим написать приложение, в которых выводятся обычные линейные графики в виде линий. Поэтому добавим в activity_main.xml компонент com.github.mikephil.charting.charts.LineChart :

Как всегда, в коде активности создадим переменную для добавленного компонента и свяжем с XML элементом через findViewByID() :

Добавление графика с данными

Теперь в коде клика кнопки пропишем код добавления данных:

Две линии на графике

Если нам нужно несколько линий, то подготавливаем два набора данных, которые отправляем в график:

Настройка графиков

Например, я хочу, чтобы первая линия отображалась с заполнением, а вторая была зеленой и плавной. И также хочу, чтобы график при отрисовке анимировался.

Это можно сделать следующим кодом:

Полный вариант кода клика кнопки:

Полные коды активности

Полные коды

Файл MainActivity.java (без строки package ):

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Источник

Добавление диаграмм в приложение для Android с помощью MPAndroidChart

Если ваше приложение имеет дело с большим количеством данных, использование диаграмм вместо таблиц для отображения этих данных может привести к значительному улучшению для удобства пользователей. В этом уроке вы узнаете о популярной библиотеке для построения графиков с открытым исходным кодом — MPAndroidChart. Графики этой библиотеки очень настраиваемые, интерактивные и легко создаваемые.

Предпосылки

Убедитесь, что установлена последняя версия Android Studio. Вы можете получить его с веб-сайта разработчика Android.

1. Добавление MPAndroidChart в проект

Чтобы использовать эту библиотеку в своем проекте Android, вам нужно всего лишь:

1. Загрузите последнюю версию библиотеки из Github. На момент написания последней версии была 1.7.4.
2. Скопируйте файл mpandroidchartlibrary-1-7-4.jar в каталог libs вашего проекта.
3. В Android Studio щелкните правой кнопкой мыши файл JAR и выберите Добавить как библиотеку.

2. Создание DataSet

Все данные должны быть преобразованы в объект DataSet , прежде чем он может использоваться диаграммой. Различные типы диаграмм используют разные подклассы класса DataSet . Например, BarChart использует экземпляр BarDataSet . Аналогично, PieChart использует экземпляр PieDataSet .

Вместо того, чтобы просто иметь дело со случайными числами для создания образца диаграммы, давайте рассмотрим гипотетический сценарий. Алиса и Боб — друзья. Алиса звонит Бобу несколько раз в месяц, чтобы узнать, что он делает. Боб делает заметку, когда она называет его.

В этом уроке мы используем примечания Боба для создания диаграммы, чтобы показать количество раз, когда Алиса звонила Бобу. Вот что записал Боб:

Месяц	Количество звонков
январь	4
февраль	8
март	6
апрель	12
май	18
июнь	9

Гистограмма кажется идеальной для данных такого типа. Чтобы отобразить данные на диаграмме, нам нужно создать экземпляр BarDataSet . Вы можете выполнить те же действия для создания экземпляров других подклассов DataSet .

Каждое отдельное значение необработанных данных должно быть представлено как Entry . ArrayList таких объектов Entry используется для создания DataSet . Давайте создадим несколько объектов BarEntry и добавим их в ArrayList :

Теперь, когда объекты ArrayList из Entry готовы, мы можем создать DataSet :

3. Определение меток X-Axis

Мы уже добавили несколько значений в нашу диаграмму, но они не будут иметь большого смысла для пользователя, если мы не дадим им значимые метки. Каждая метка оси x представлена с использованием String , а ArrayList используется для хранения всех меток.

4. Создание графика

Все диаграммы этой библиотеки являются подклассами ViewGroup , что означает, что вы можете легко добавить их в любой макет. Вы можете определить свою диаграмму с помощью файла XML или кода Java. Если диаграмма займет весь экран Activity или Fragment , то проще всего использовать Java-код:

Это создает пустой график без каких-либо данных. Давайте используем набор данных и список меток, которые мы создали на предыдущих шагах, чтобы определить данные этой диаграммы.

Давайте также добавим описание к диаграмме.

Если вы сейчас запустите приложение на Android-устройстве, вы сможете увидеть гистограмму, похожую на ту, что показана ниже. Диаграмма интерактивна и реагирует на жесты сжимания и масштабирования.

5. Использование цветовых шаблонов

Если вам не нравятся цвета по умолчанию, вы можете использовать метод setColors класса DataSet для изменения цветовой схемы. Тем не менее, MPAndroidChart также поставляется с несколькими предопределенными цветовыми шаблонами, которые позволяют изменять внешний вид вашего набора данных без необходимости иметь дело с отдельными значениями цвета.

В текущей версии этой библиотеки доступны следующие шаблоны:

• ColorTemplate.LIBERTY_COLORS
• ColorTemplate.COLORFUL_COLORS
• ColorTemplate.JOYFUL_COLORS
• ColorTemplate.PASTEL_COLORS
• ColorTemplate.VORDIPLOM_COLORS

Чтобы связать шаблон цвета с набором данных, вам необходимо использовать метод setColors . Вот пример:

Запустите приложение еще раз, чтобы увидеть график с более яркими цветами.

6. Добавление анимаций

Все диаграммы этой библиотеки поддерживают анимацию, которую вы можете использовать, чтобы сделать ваши диаграммы более живыми. Метод animateXY используется для анимации обеих осей диаграммы. Если вы хотите анимировать только одну из осей, вы можете использовать animateX или animateY для анимации оси x или оси y соответственно. Вы должны указать продолжительность (в миллисекундах) анимации при вызове этих методов. Например, чтобы анимировать ось y, добавьте следующий фрагмент кода:

7. Использование ограничивающих линий

Вы можете добавить лимиты к диаграмме, чтобы добавить больше значений в ваши диаграммы. Лимитные линии имеют смысл только для определенных типов диаграмм, таких как гистограммы, линейные диаграммы и диаграммы рассеяния.

В нашем примере, где Алиса звонит Бобу несколько раз в месяц, скажем, что Боб раздражен, если Алиса звонит ему более десяти раз в месяц. Чтобы показать эту информацию, мы могли бы добавить лимитную линию для этого значения. Вот как вы это делаете:

8. Сохранение диаграммы как изображение

MPAndroidChart также позволяет сохранять текущее состояние диаграммы в качестве изображения. Чтобы использовать эту функцию, сначала необходимо предоставить своему приложению разрешение на запись на SD-карту устройства. Вы можете сделать это, добавив следующий код в ваш AndroidManifest.xml:

У вас есть два способа выбора:

• saveToGallery Этот метод сохраняет вашу диаграмму в виде файла JPEG. Он также позволяет указать качество или степень сжатия изображения.
• saveToPath Этот метод сохраняет вашу диаграмму в виде PNG-файла в указанном вами пути.

Например, чтобы сохранить диаграмму в виде файла JPEG, вы можете использовать следующий фрагмент кода:

Заключение

В этом уроке вы узнали, как использовать библиотеку MPAndroidChart для создания приятных и интерактивных графиков. Ради консистенции я использовал гистограммы во всем этом уроке. Тем не менее, вы можете выполнить те же шаги для создания других типов диаграмм. Чтобы узнать больше об этой библиотеке, я рекомендую вам ознакомиться с документацией и примерами в Github.

Источник

Построение графиков на Android: sl4a, python и flot

Доброго времени суток, %username%!

Введение

Графики — наглядный способ представления информации. Картинка стоит тысячи слов, а график в некоторых случаях часто полностью описывает результаты эксперимента, физического или вычислительного. В конце концов, мне нравятся графики.

Однажды я оказался в ситуации, что данные для построения графика уже есть, а компьютера под рукой нет. Но ведь с такой задачей может справиться и смартфон! Так я смог заставить себя начать применять знания, полученные из наполовину пройденного курса по Python от Google, и использовать sl4a, уже успевший покрыться виртуальной пылью. Итак, для работы понадобятся sl4a (кто еще не слышал такую аббревиатуру, прочитайте это, это и это) + flot (подойдет любая библиотека для построения графиков на js).

Вдоль оси абсцисс будем отсчитывать номер наблюдаемой величины, вдоль оси ординат — её значение. Значения вычисляются следующим образом: есть 30 логов, содержащих строчки вида «value = 0.1 0.2 0.15 0.12 . », где «0.1 0.2 . » — значения, «value» — название величины. Значение «1» есть среднее по всем первым числам из соответствующих строк логов («0.1» в примере строки), «2» — по всем вторым и т.д. В итоге получается двумерная матрица размера M*N, где M — количество строк в логе, N — количество чисел в строке. Предполагается, что логи содержат одинаковое количество строк и одинаковое количество чисел в каждой строке.

Реализация

Отображение графика с помощью flot

За построение графика отвечает плагин flot к jquery. Из полного комплекта с сайта разработчиков для нашей задачи понадобятся только файлы jquery.flot.js и jquery.js. Сам код log_manager.html:

Строка 13 — построение графика с помощью flot. Например, можно написать

и на графике отобразится кусок параболы. Таким образом, данные для построения должны иметь вид [[x0,y0],[x1,y1],[x2,y2],[x3,y3], . ]. Самый простой способ, пришедший мне в голову — подготовить их в python-скрипте в строку точно такого же вида и обернуть в javascript в eval(), которая выполнит переданную строку как если бы это был кусок js-кода. Далее я использую именно этот способ.

Модификация существующих и добавление новых свойств отображения кривых на графике реализуется просто. Например, чтобы отключить тень под кривой, достаточно добавить «shadowSize: 0»:

Две кривых на одном графике:

В строке 14 создается объект для взаимодействия с Android API (его возвращает встроеная в sl4a функция «Android()»).

В 15 строке описывается, как обрабатывать полученный event с именем «plotData». Как только получен event с таким именем, вызывается функция «plotData». Переданные с ним данные (строка-массив) будут находиться в .data.

Осталось только написать скрипт, который файлы прочитает, строку подготовит и пошлет её. Об этом следующая часть.

Подготовка данных с помощью Python

Данный код плох, так писать не стоит. Но свою задачу он выполняет: получает матрицу, состоящую из соответствующих средних по логам.

Источник