Chart of the week: Creating a line chart with plot bands to explore global GNI per capita with income thresholds

Jollen Moyani - May 20 - - Dev Community

TL;DR: Explore global Gross National Income (GNI) per capita and income thresholds through a line chart created with Syncfusion’s .NET MAUI Cartesian Chart control. Discover how to gather and link data to the chart while enhancing visualization by customizing elements such as title, axis, and tooltip.

Welcome to our Chart of the Week blog series!

Today, we’ll use Syncfusion’s .NET MAUI Cartesian Chart control to create a line chart with plot bands. This chart will help us explore global Gross National Income (GNI) per capita alongside income thresholds.

GNI represents the total income earned by people and businesses in a country. We will analyze GNI values from 2000 to 2018, categorized by country. This control is compatible with desktop platforms such as Windows and Mac, as well as mobile platforms like Android and iOS.

Line chart with plot bands to explore global GNI per capita with income thresholds

Line chart with plot bands to explore global GNI per capita with income thresholds

Let’s get started!

Step 1: Gathering GNI data by country

First, gather data on the GNI per capita. Choose the countries in which you need data and the format for downloading it. For example, obtain GNI data for Brazil, China, the UK, and the US, and download it in CSV format. After downloading, use the data from 2000 to 2018.

Step 2: Preparing data for the chart

Create a model class that includes properties for storing information about GNI (Gross National Income) country-by-country, along with the corresponding year.

Refer to the following code example.

public class Model
{
    public DateTime Year { get; set; }
    public double BrazilGNI { get; set; }
    public double ChinaGNI { get; set; }
    public double UKGNI { get; set; }
    public double USGNI { get; set; }
    public Model(DateTime year, double brazilGNI, double chinaGNI, double ukGNI, double usGNI)
    {
        Year = year;
        BrazilGNI = brazilGNI;
        ChinaGNI = chinaGNI;
        UKGNI = ukGNI;
        USGNI = usGNI;
    }
}
Enter fullscreen mode Exit fullscreen mode

Next, read the CSV file and store the GNI values country-wise with the corresponding year in the observable collection of the EconomicRate property. Refer to the following code example.

public class ViewModel
{
    private DateTime year;
    public ViewModel()
    {
        EconomicRate = new ObservableCollection();
        ReadCSVFile();
    }
    private void ReadCSVFile()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("EconomicRatesDemo.Resources.dataset.csv");
        string line;
        ObservableCollection lines = new ObservableCollection();
        if (inputStream != null)
        {
            using (StreamReader reader = new StreamReader(inputStream))
            {
                while ((line = reader.ReadLine()) != null)
                {
                    lines.Add(line);
                }
            }
            lines.RemoveAt(0);
            foreach (var items in lines)
            {
                string[] data = items.Split(',');
                if (int.TryParse(data[0], out int yearValue))
                {
                    year = new DateTime(yearValue, 1, 1);
                }
                double brazilGNI = Convert.ToDouble(data[1]);
                double chinaGNI = Convert.ToDouble(data[2]);
                double ukGNI = Convert.ToDouble(data[3]);
                double usGNI = Convert.ToDouble(data[4]);
                EconomicRate.Add(new Model(year, brazilGNI, chinaGNI, ukGNI, usGNI));
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Layout definition

Define the layout using a Border element. Inside the border, we’ll utilize a Grid to place our elements.

Refer to the following code example.

<Border Background="#e8ebe0" 
                 StrokeThickness="4"
                StrokeShape="{OnPlatform Default= RoundRectangle 40, Android= RoundRectangle 35}"
                Margin="{OnPlatform Default=30, Android= 10}">
 <Grid RowDefinitions="80,*" ColumnDefinitions="*,*" BackgroundColor="Black">
     <VerticalStackLayout Grid.Row="0" Grid.Column="0">
         …
    </VerticalStackLayout>
    <HorizontalStackLayout Grid.Row="0" Grid.Column="1">
       …
    </HorizontalStackLayout>
  </Grid>
</Border>
Enter fullscreen mode Exit fullscreen mode

Step 4: Configuring the Syncfusion .NET MAUI Cartesian Charts

Now, configure the Syncfusion .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

 <chart:SfCartesianChart Grid.Row="1" Grid.ColumnSpan="2">
 <chart:SfCartesianChart.XAxes>
     <chart:DateTimeAxis >
           …  
     </chart:DateTimeAxis>
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
     <chart:NumericalAxis >
           …
     </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

Step 5: Binding data to the chart

We’ll utilize the Syncfusion Line series instances to visualize the GNI per country yearly. Bind the ViewModel to the page’s binding context to enable access to ViewModel properties. Then, bind the Year and GNI properties to the X and Y axes using the XBindingPath and YBindingPath respectively. Additionally, bind the collection to ItemsSource to the EconomicRate.

Refer to this code example.

<ContentPage.BindingContext>
     <local:ViewModel/>
</ContentPage.BindingContext>
<chart:SfCartesianChart Grid.Row="1" Grid.ColumnSpan="2">
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                   YBindingPath="BrazilGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="ChinaGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="UKGNI" />
    <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                    XBindingPath="Year" 
                                    YBindingPath="USGNI" />
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

Step 6: Setting plot bands to the Y-axis.

We use NumericalPlotBand to shade three regions: lower GNI, middle GNI, and upper GNI regions and also add corresponding text. These plot bands are created and added to the NumericalPlotBandCollection. The Start and End APIs determine each shading region’s beginning and end positions. We can customize the text for the plot bands using ChartPlotBandLabelStyle.

Refer to the following code example.

<chart:SfCartesianChart.YAxes>
     <chart:NumericalAxis >
    <!—Lower GNI plot band-->
         <chart:NumericalAxis.PlotBands>
             <chart:NumericalPlotBandCollection>
                 <chart:NumericalPlotBand Start="0" End="5000" 
                                                                  Fill="#3d5c5c"
                                                                  Text="Lower">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
                   <!--Middle GNI plot band-->
                 <chart:NumericalPlotBand Start="30000" End="35000" 
                                                                   Fill="#3d5c5c"
                                                                   Text="Middle">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
                  <!--Higher GNI plot band-->
                 <chart:NumericalPlotBand Start="58500" End="63500" 
                                                                  Fill="#3d5c5c"
                                                                  Text="Higher">
                     <chart:NumericalPlotBand.LabelStyle>
                         <chart:ChartPlotBandLabelStyle TextColor="White"/>
                     </chart:NumericalPlotBand.LabelStyle>
                 </chart:NumericalPlotBand>
             </chart:NumericalPlotBandCollection>
         </chart:NumericalAxis.PlotBands>
     </chart:NumericalAxis>
 </chart:SfCartesianChart.YAxes>
Enter fullscreen mode Exit fullscreen mode

Step 7: Customizing the chart appearance

Let’s enhance the visual appeal of the line series along with plot bands and their elements. We’ll customize the look of the line graph by adjusting various properties and styles.

Adding chart title

In the VerticalStackLayout , a Label element is used to place the chart title and description vertically. In the HorizontalStackLayout , BoxView elements and labels are added to indicate which countries have which line series, using color in the BoxView. Customize the chart title like in the following code example.

<VerticalStackLayout Grid.Row="0" Grid.Column="0">
     <Label Text="Exploring Global GNI per Capita with Income Thresholds" 
                  TextColor="#e6e600"
                  FontAttributes="Bold"
                  FontSize="{OnPlatform Android=15, iOS= 15, Default= 20 }"
                  Margin="{OnPlatform Default='35,10,0,0'}"/>
     <Label Text="Gross National Income (GNI) is the total income earned by a country's people and businesses. Here, GNI values from 2000 to 2018 shared country-wise." 
                  TextColor="White"
                   FontSize="12"
                   Margin="{OnPlatform Default='35,0,0,0'}"/>
 </VerticalStackLayout>
 <HorizontalStackLayout Grid.Row="0" Grid.Column="1" HeightRequest="40" WidthRequest="350">
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#b1f48a"/>
     <Label Text="Brazil" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}" />
     <BoxView HeightRequest="1" WidthRequest="20"
                       BackgroundColor="#f7a7a1" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="China" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#ffe799" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="UK" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
     <BoxView HeightRequest="1" WidthRequest="20"
                        BackgroundColor="#e6e6ff" Margin="{OnPlatform Default='20,0,0,0'}"/>
     <Label Text="US" TextColor="White" Margin="{OnPlatform Default='2,9,0,0'}"/>
 </HorizontalStackLayout>
Enter fullscreen mode Exit fullscreen mode

Customizing the axes

Let’s customize the primary and secondary axes using the following properties:

ShowMajorGridLines – Control the visibility of grid lines.

PlotOffsetStart – Used to provide padding to the axis at the start position.

PlotOffserEnd – Used to provide padding to the axis at the end position.

Title – Used to set titles for chart axes.

ChartAxisLabelStyle – Used to customize axis labels.

Refer to the following code example.

<chart:SfCartesianChart.XAxes>
      <chart:DateTimeAxis ShowMajorGridLines="False" PlotOffsetStart="7" PlotOffsetEnd="20">
          <chart:DateTimeAxis.Title>
              <chart:ChartAxisTitle Text="Years" TextColor="White"/>
          </chart:DateTimeAxis.Title>
          <chart:DateTimeAxis.LabelStyle>
              <chart:ChartAxisLabelStyle TextColor="White"/>
          </chart:DateTimeAxis.LabelStyle>
      </chart:DateTimeAxis>
  </chart:SfCartesianChart.XAxes>
  <chart:SfCartesianChart.YAxes>
      <chart:NumericalAxis ShowMajorGridLines="False" PlotOffsetStart="{OnPlatform Android=5}" >
          <chart:NumericalAxis.Title>
              <chart:ChartAxisTitle Text="GNI per capita, Atlas (in dollar)" TextColor="White"/>
          </chart:NumericalAxis.Title>
          <chart:NumericalAxis.LabelStyle>
              <chart:ChartAxisLabelStyle TextColor="White"/>
          </chart:NumericalAxis.LabelStyle>
    </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
Enter fullscreen mode Exit fullscreen mode

Customizing the line series marker

Let’s customize the line series marker using the following properties:

ShowMarker: Used to highlight the position of the data point.

MarkerSettings: To change the series markers’ appearance, create an instance of the MarkerSettings property. The following properties are used to customize marker appearance.

  • Type: Used to describe the marker shape.
  • Height: Indicates the height of the marker.
  • Width: Indicates the width of the marker.

Refer to the following code example.


<chart:SfCartesianChart>
 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                XBindingPath="Year" 
                                YBindingPath="BrazilGNI"
                                ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Circle" Height="8" Width="8" />
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="ChinaGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Triangle" Height="8" Width="8"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="UKGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Hexagon" Height="8" Width="8"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>

 <chart:LineSeries ItemsSource="{Binding EconomicRate}"
                                 XBindingPath="Year" 
                                 YBindingPath="USGNI"
                                 ShowMarkers="True">
     <chart:LineSeries.MarkerSettings>
         <chart:ChartMarkerSettings Type="Plus"/>
     </chart:LineSeries.MarkerSettings>
 </chart:LineSeries>
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

Customizing the line series appearance

Using the PaletteBrushes property, we can apply custom brushes to line series. This property is bound to a collection of brushes named CustomBrushes.

<chart:SfCartesianChart PaletteBrushes="{Binding CustomBrushes}">
      …
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode 
public List<Brush> CustomBrushes { get; set; }
  CustomBrushes = new List<Brush>()
  {
      new SolidColorBrush(Color.FromArgb("#b1f48a")),
      new SolidColorBrush(Color.FromArgb("#f7a7a1")),
      new SolidColorBrush(Color.FromArgb("#ffe799")),
      new SolidColorBrush(Color.FromArgb("#e6e6ff")),
  };
Enter fullscreen mode Exit fullscreen mode

Customizing the tooltip using a template

Using the TooltipTemplate property in the series allows customization of the tooltip’s appearance. A data template with the data points’ year, country name, and GNI values is created and bound to the TooltipTemplate property, with the tooltip enabled. Each line series data point displays its information in the tooltip template.

<chart:SfCartesianChart>
  <chart:SfCartesianChart.Resources>
     <!--BrazilGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate1">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*">
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year : "
                 TextColor="Black"
                 FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                           Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
               FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="Brazil"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center" />
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.BrazilGNI,StringFormat='${0}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--ChinaGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate2">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year :"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                           Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                           Text="China"
                            TextColor="Black"
                            FontSize="12"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.ChinaGNI,StringFormat='${0}'}"
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--UKGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate3">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                           Text="Year :"
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                          Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="UK"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Start"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI : "
                           TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.UKGNI,StringFormat='${0}'}"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
     <!--USGNI line series tooltip template-->
     <DataTemplate x:Key="tooltipTemplate4">
         <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*" >
             <Label Grid.Row="0" Grid.Column="0"
                          Text="Year :"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Center"/>
             <Label Grid.Row="0" Grid.Column="1"
                          Text="{Binding Item.Year,StringFormat='{0:yyyy}'}"
                          TextColor="Black"
                          FontSize="12"/>
             <Label Grid.Row="1" Grid.Column="0" 
                          Text="Country : "
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                           HorizontalTextAlignment="Center"/>
             <Label Grid.Row="1" Grid.Column="1"
                          Text="US"
                          TextColor="Black"
                          FontSize="12"
                          VerticalTextAlignment="Center"
                          HorizontalTextAlignment="Start"/>
             <Label Grid.Row="2" Grid.Column="0" 
                          Text="GNI :"
                          TextColor="Black"
                          FontSize="12"
                         VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
             <Label Grid.Row="2" Grid.Column="1" 
                          Text="{Binding Item.USGNI,StringFormat='${0}'}"
                          TextColor="Black"
                           FontSize="12"
                           VerticalTextAlignment="Center"
                         HorizontalTextAlignment="Center"/>
         </Grid>
     </DataTemplate>
  </chart:SfCartesianChart.Resources>
  <chart:SfCartesianChart.TooltipBehavior>
      <chart:ChartTooltipBehavior Background="White"/>
  </chart:SfCartesianChart.TooltipBehavior>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate1}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate2}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate3}"/>
  <chart:LineSeries EnableTooltip="True"
                   TooltipTemplate="{StaticResource tooltipTemplate4}"/>
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

After executing the above code examples, we will get the output that resembles the following image.

Line chart with plot bands to explore global GNI per capita with income thresholds

Line chart with plot bands to explore global GNI per capita with income thresholds

GitHub reference

For more details, refer to the Line chart with plot bands to explore global GNI per capita with income thresholds demo.

Conclusion

Thank you for reading! We have demonstrated how to explore global GNI per capita with an income thresholds line chart using the Syncfusion .NET MAUI Cartesian Charts control. We encourage you to follow these steps and share your thoughts on the experience in the comment section below.

The existing customers can download the latest version of Essential Studio from the License and Downloads page. If you are new, try our 30-day free trial to explore our incredible features.

If you require assistance, please don’t hesitate to contact us via our support forums, support portal, or feedback portal. We are always eager to help you!

Related blogs

Image
How to Add 100% Free Support Chat to Your Application with Tawk.to

chatgpt, nextjs, typescript, coding
Image
Top 10 Cybersecurity Threats You Need to Know About This Year 2024

cybersecurity, discuss, danger, security
Image
Daily Drawing Challenge: A Creative Journey with Tolgee

webdev, opensource, hacktoberfest, nextjs
Image
pelayanan dan spesifikasi yang ada selalu pada agen slots online dapat dipercaya
Image
7 Things You've Never Learned About Pedestrian Accident Lawyer
Image
Ten Accident Lawyers Myths You Shouldn't Share On Twitter
Image
Monday.com Salesforce Integration Guide

blog, integrations, salesforce
Image
The Ultimate Guide to Protecting Windows 11
Image
A Peek At The Secrets Of Mesothelioma From Asbestos Exposure
Image
trik untung besar di permainan slots online
Image
My Third PR for Hacktoberfest
Image
Cat Flaps For French Doors
Image
Deep Dive Prompts

promptengineering, learning, llm
Image
cari situs slots online paling beri keuntungan
Image
bonus menarik pada permainan slots online
Image
7 Helpful Tips To Make The Most Out Of Your Asbestos Lawsuit
Image
Be On The Lookout For: How Crypto Casino List Is Taking Over And What Can We Do About It
Image
Checklist pour Publier Votre Jeu sur Steam : Guide Amateur pour une Sortie Réussie
Image
20 Trailblazers Leading The Way In Accident Lawyer Jacksonville
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .