// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \example 2d/hellographs
    \meta tags {Graphs, GraphsView, BarSeries, LineSeries}
    \examplecategory {Data Visualization}
    \title HelloGraphs
    \ingroup qtgraphs_qmlexamples
    \brief Using Graphs for 2D in a Qt Quick application.

    \e {HelloGraphs} shows how to make a simple 2D bar graph and line graph.

    \image hellographs-example.png

    The following sections describe how to create a bar graph using BarSeries
    and a line graph using LineSeries.

    \include examples-run.qdocinc

    \section1 BarGraph

    The first graph in the example is a bar graph. Creating it starts with a GraphsView
    component and setting the \l{GraphsView::theme}{theme} to one which is suitable on
    dark backgrounds. This theme adjusts the graph background grid and axis lines and
    labels.

    \snippet hellographs/qml/hellographs/main.qml bargraph
    \dots

    To make this a bar graph, add a \l BarSeries. X axis of the series is
    BarCategoryAxis with 3 categories. We hide both the vertical grid and the axis lines.
    Y axis of the series is \l ValueAxis with visible range between 20 and 100. Major ticks
    with labels will be shown on every 10 values using \l{ValueAxis::tickInterval}{tickInterval}.
    Minor ticks will be shown on every 1 values using \l{ValueAxis::minorTickCount}{minorTickCount} \c 9,
    which means that between every major ticks there will be \c 9 minor ones.

    \snippet hellographs/qml/hellographs/main.qml barseries
    \dots

    Then data is added into \l BarSeries using \l BarSet. There are 3 bars, and we define
    custom bars color and border properties. These properties will override the possible
    \l{AbstractSeries::theme}{theme} set for the \l AbstractSeries.

    \snippet hellographs/qml/hellographs/main.qml barset

    \section1 LineGraph

    The second graph of the example is a line graph. It also starts by defining a
    \l GraphsView element. Custom \l GraphTheme is created to get a custom appearance.
    \l GraphTheme offers quite a wide range of customization possibilities for the background
    grid and axis, which get applied after the \l{GraphTheme::colorTheme}{colorTheme}.

    \snippet hellographs/qml/hellographs/main.qml linegraph
    \dots

    Custom \c Marker component is used to visualize the data points.

    \snippet hellographs/qml/hellographs/main.qml linemarker

    The previous bar graph didn't define a separate \l SeriesTheme, so it uses the
    default theme. This line graph uses a custom theme with the desired line colors.

    \snippet hellographs/qml/hellographs/main.qml lineseriestheme

    To make this a line graph, add a \l LineSeries. The first series defines
    \l{XYSeries::axisX}{axisX} and  \l{XYSeries::axisY}{axisY} for this graph.
    It also sets the \l{XYSeries::pointMarker}{pointMarker} to use the custom
    \c Marker component that was created earlier. Data points are added using
    \l XYPoint elements.

    \snippet hellographs/qml/hellographs/main.qml lineseries1

    The second line series is similar to the first. The \l{XYSeries::axisX}{axisX}
    and \l{XYSeries::axisY}{axisY} don't need to be defined as the graph already contains them.
    As this is second \l LineSeries inside the \l GraphsView, second color from the \c seriesTheme
    gets automatically picked.

    \snippet hellographs/qml/hellographs/main.qml lineseries2
*/
