vue-spider-graph

1.0.5 • Public • Published

vue-spider-graph

Install

npm install vue-spider-graph --save

Example

Demo Link

Demo

Usage

Use in Vue Component

<template>
  <div>
    <SpiderGraph
      ref="spiderGraphRef"
      :height="600"
      :width="600"
      :numberOfDataPoints="10"
      :dataRatings="[5,7,4,6,9,3,5,6,8,6]"
      :predefinedRatings="[8,9,7,8,6,8,6,5,9,5]"
      :predefinedRatingsColor="`#F7A61B`"
      :predefinedRatingsGridColor="`rgba(247,166,27, 0.2)`"
      :dataRatingsColor="`#c40d1e`"
      :dataRatingsColorGridColor="`rgba(196,11,30, 0.2)`"
    ></SpiderGraph>
  </div>
</template>
<script>
  import SpiderGraph from "vue-spider-graph";

  new Vue({
    el: "#app",
    components: {
      SpiderGraph,
    },
  });
</script>

Change Value and Redraw Graph

<template>
  <div>
    <SpiderGraph
      ref="spiderGraphRef"
      :height="600"
      :width="600"
      :numberOfDataPoints="10"
      :dataRatings="this.dataRatings"
      :predefinedRatings="[8,9,7,8,6,8,6,5,9,5]"
      :predefinedRatingsColor="`#F7A61B`"
      :predefinedRatingsGridColor="`rgba(247,166,27, 0.2)`"
      :dataRatingsColor="`#c40d1e`"
      :dataRatingsColorGridColor="`rgba(196,11,30, 0.2)`"
    ></SpiderGraph>
  </div>
</template>
<script>
  import SpiderGraph from "vue-spider-graph";

  new Vue({
    el: "#app",
    components: {
      SpiderGraph,
    },
    created() {
      this.dataRatings = [5, 7, 4, 6, 9, 3, 5, 6, 8, 6];
    },
    mounted() {
      //I am Changing value of first Index by 1 every second and redrwaing Graph
      let spiderGraph = this.$refs["spiderGraphRef"];
      setInterval(() => {
        if (this.dataRatings[0] == 10) this.dataRatings[0] = 0;
        this.dataRatings[0]++;
        spiderGraph.draw();
      }, 1000);
    },
  });
</script>

Options

Props

Props Default Description
height 500 Canvas height
width 500 Canvas width
numberOfDataPoints 10 Number Of Rating Data points
dataRatings [] Array of Rating Data points. example: [5,7,4,6,9,3,5,6,8,6]
predefinedRatings [] Array of Predefined Rating Data points. example: [8,9,7,8,6,8,6,5,9,5]
predefinedRatingsColor #F7A61B Predefined Rating point color
predefinedRatingsGridColor rgba(247,166,27, 0.2) Predefined Rating Grid color
dataRatingsColor #c40d1e Rating point color
dataRatingsColorGridColor rgba(196,11,30, 0.2) Rating Grid color

Function

Name Type Description
draw() n/a Redraw Graph after Value Change

Package Sidebar

Install

npm i vue-spider-graph

Weekly Downloads

1

Version

1.0.5

License

ISC

Unpacked Size

486 kB

Total Files

22

Last publish

Collaborators

  • bitto.kazi