Ui-Skote/Laravel-vuejs/Admin/resources/js/views/charts/chartist.vue

<script>
import Layout from "../../layouts/main";
import PageHeader from "../../components/page-header";

import {
  smilAnimationChart,
  simpleLineChart,
  polarBarChart,
  areaLineChart,
  lineSmoothingChart,
  overlappingBarChart,
  stackBarChart,
  horizontalBarChart,
  donutAnimateChart,
  simplePieChart,
  distributedSeries,
  labelPlacementChart,
  extremeConfiguration,
  lineAreaChart
} from "./data-chartist";

/**
 * Chartist-chart component
 */
export default {
  components: { Layout, PageHeader },
  data() {
    return {
      smilAnimationChart: smilAnimationChart,
      simpleLineChart: simpleLineChart,
      polarBarChart: polarBarChart,
      areaLineChart: areaLineChart,
      lineSmoothingChart: lineSmoothingChart,
      overlappingBarChart: overlappingBarChart,
      stackBarChart: stackBarChart,
      horizontalBarChart: horizontalBarChart,
      donutAnimateChart: donutAnimateChart,
      simplePieChart: simplePieChart,
      distributedSeries: distributedSeries,
      labelPlacementChart: labelPlacementChart,
      extremeConfiguration: extremeConfiguration,
      lineAreaChart: lineAreaChart,
      title: "Chartist Charts",
      items: [
        {
          text: "Charts",
          href: "/"
        },
        {
          text: "Chartist Charts",
          active: true
        }
      ]
    };
  }
};
</script>

<template>
  <Layout>
    <PageHeader :title="title" :items="items" />
    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Advanced Smil Animations</h4>

            <!-- Advanced Smil Animations -->
            <chartist
              ratio="ct-chart"
              :data="smilAnimationChart.data"
              :options="smilAnimationChart.options"
              type="Line"
            ></chartist>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Simple Line Chart</h4>

            <!-- Simple line chart -->
            <chartist
              ratio="ct-chart"
              :data="simpleLineChart.data"
              :options="simpleLineChart.options"
              type="Line"
            ></chartist>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Line Chart With Area</h4>

            <!-- Line chart with area -->
            <chartist
              ratio="ct-chart"
              :data="areaLineChart.data"
              :options="areaLineChart.options"
              type="Line"
            ></chartist>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Bi-polar Line Chart Wth Area Only</h4>

            <!-- Bi-polar Line chart -->
            <chartist
              ratio="ct-chart"
              :data="lineAreaChart.data"
              :options="lineAreaChart.options"
              type="Line"
            ></chartist>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Line Interpolation / Smoothing</h4>

            <!-- Line Interpolation / Smoothing chart -->
            <chartist
              ratio="ct-chart"
              type="Line"
              :data="lineSmoothingChart.data"
              :options="lineSmoothingChart.options"
            ></chartist>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Overlapping Bars On Mobile</h4>

            <!-- Overlapping bars on mobile -->
            <chartist
              ratio="ct-chart"
              :data="overlappingBarChart.data"
              :options="overlappingBarChart.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Stacked Bar Chart</h4>

            <!-- Stacked bar chart -->
            <chartist
              ratio="ct-chart"
              :data="stackBarChart.data"
              :options="stackBarChart.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Horizontal Bar Chart</h4>

            <!-- Horizontal bar chart -->
            <chartist
              ratio="ct-chart"
              :data="horizontalBarChart.data"
              :options="horizontalBarChart.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Distributed Series</h4>

            <!-- Distributed series -->
            <chartist
              ratio="ct-chart"
              :data="distributedSeries.data"
              :options="distributedSeries.options"
              type="Bar"
            ></chartist>
          </div>
          <!-- end card-body -->
        </div>
      </div>
      <!-- end col -->

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Label Placement</h4>

            <!-- Label placement chart -->
            <chartist
              ratio="ct-chart"
              :data="labelPlacementChart.data"
              :options="labelPlacementChart.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>
      <!-- end col -->
    </div>
    <!-- end row -->
    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Extreme Responsive Configuration</h4>

            <chartist
              ratio="ct-chart"
              :data="extremeConfiguration.data"
              :options="extremeConfiguration.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body" dir="ltr">
            <h4 class="card-title mb-4">Bi-polar Bar Chart</h4>

            <!-- Bi-polar bar -->
            <chartist
              ratio="ct-chart"
              :data="polarBarChart.data"
              :options="polarBarChart.options"
              type="Bar"
            ></chartist>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Donut With Svg.animate</h4>

            <!-- Animating a Donut with Svg.animate -->
            <chartist
              ratio="ct-chart"
              :data="donutAnimateChart.data"
              :options="donutAnimateChart.options"
              type="Pie"
            ></chartist>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-4">Simple Pie Chart</h4>

            <!-- Simple pie chart -->
            <chartist
              ratio="ct-chart"
              :data="simplePieChart.data"
              :options="simplePieChart.options"
              type="Pie"
            ></chartist>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>