Create a Vue Component for an internal tool

Contest Brief

I'm looking for a Vue developer to build a simple Vue component that I can include in my Vue app.

You don't have to worry too much about CSS. Since it's internal, it doesn't have to be absolutely beautiful.

The component I want you to build is a graph. I've attached a picture of how it should look more or less.

The graph should show how a score of a user evolves overtime for all the users. For example, some user might have a score of 40 on a certain date, then 55 the week after. And the graph should show this change. The graph will be used to determine which users have increased their score.

The Vue component should have one data input. It should look something like this:

<Graph :data="data" />

The data will have the following format:
data = [{"userid": "55", "scores": [{"score": 50, "date": "2020-11-01 10:57:34"}, {"score": 100, "date": "2020-11-05 10:57:34"}, {"score": 150, "date": "2020-11-15 10:57:34"}]},
{"userid": "12", "scores": [{"score": 66, "date": "2020-09-01 11:57:34"}, {"score": 32, "date": "2020-10-05 10:57:34"}, {"score": 12, "date": "2020-12-15 10:57:34"}]}
]

As you can see on the image, I need to be able to deselect/select users and when I hover over a line, I need to be able to see the userid & score at that specific point.

Simply send me an image of how the component looks when you're done. I will award the project to the person who makes the best solution.

Some additional information:
There will be something like 200-500 users displayed on the graph - keep that in mind - this is also why I need to be able to select/deselect.

I'm available if you have any further questions of course!

Recommended Skills

Employer Feedback

“Just excellent work! Will work with Carolina again and can only recommend her. Smart, understands the requirements and executes well! ”

Profile image nathanganserpro, United Kingdom.

Top entries from this contest

View More Entries

Public Clarification Board

  • nithmit
    nithmit
    • 1 month ago

    Hi i am new to freelancer website, i created the graph but it wont allow to submit because of trust
    here is the image.
    https://drive.google.com/file/d/13IOc0u0NLch8WdzzAC3uIFZ6oRNCpNwi/view?usp=sharing

    • 1 month ago
  • nithmit
    nithmit
    • 1 month ago

    hi, do you used chart js? which library you used for chart which you shown in image. if you tell then I will try to implement in that library.

    • 1 month ago
    1. nathanganserpro
      Contest Holder
      • 1 month ago

      this was an alternative chart. you can use any library you wish to!

      • 1 month ago
    2. nithmit
      nithmit
      • 1 month ago

      in that json, user 55 got score in same month, user 12 has different month.
      Is this sample json correct or any typo error ?

      • 1 month ago
  • StrongDecs
    StrongDecs
    • 2 months ago

    Hello, Increase price please. Thanks,

    • 2 months ago
    1. nathanganserpro
      Contest Holder
      • 2 months ago

      sorry, this is the budget for this task but stay tuned, other tasks are coming! also, feel free to use existing libraries to make the work easier :)

      • 2 months ago
    2. StrongDecs
      StrongDecs
      • 2 months ago

      sometimes options allow us to stay tuned :), let's talk by inbox pls. please check the Entry #2

      • 2 months ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!