Skip to content

Improved samples #122

Open
Open
@Joelius300

Description

@Joelius300

With #153, I have laid out the foundation for this issue. Instead of the three (redundant) sample projects, we now have a dual-mode blazor application that looks and feels similar to the official Chart.js samples.

Now we need your help!

If you want to contribute to this library and/or get to know ChartJs.Blazor, you can port one of the samples listed below and submit a Pull Request. Please write a short comment on this issue before getting to work on the PR in order to avoid conflicts with other contributors.

If you decide to port a sample, please keep the following points in mind:

  • Carefully look at the source of the original sample. You can do so on the 2.9 Branch of Chart.js.
  • Check out the already ported samples and try to match the style and feel of them. You should also use the same folder/path structure. In many cases, it's a viable strategy to copy one of the existing samples and adjust it.
  • Watch out for Copy-Paste errors. The samples are similar and the redundancy is okay since they should be more or less standalone but when you clone a sample and adjust it, make sure to not miss anything.
  • Test your sample in both the Client- and the Server-Mode. It should look and feel almost like the original on the official Chart.js samples.
  • When submitting the PR, please include the relevant information like links to the original sample, the js-source and maybe to your comment on this issue :)

If you hit any roadblocks along the way (e.g. you simply cannot port a sample because we don't support that feature yet), this issue is the place to discuss it. I highly recommend to start with the easier samples that don't contain any of the known hurdles like callbacks.

Below you can find a list of samples we want to port. I will tick them off once they're merged.

We appreciate your contributions!

Important

Bar charts
Line charts
Area charts
Other charts
Linear scale
Logarithmic scale
Time scale
Scale options
Legend
Tooltip

Additional

Bar charts
Line charts
Other charts
Scale options
Tooltip
Scriptable
Advanced
Before edit

Currently our library has three sample projects. That's too much.
Our samples also don't show nearly all features Chart.js resp. our library has.
Nor are they analogous to the official Chart.js samples which understandably generates confusion.

Solution

Client- / Server-side

Currently we have lots of redundancies because of our three projects. We should eliminate two of them and run them in dual mode. There's already an amazing resource for running blazor in dual mode which we can take as reference. Once this is done, we can also update https://www.iheartblazor.com with these samples so you can swich between client and server without having to build the samples yourself.

Porting samples

We should try to mirror the offical samples in order to show our consumers how to achieve the same thing. This has the many benefits like more clarity for the simple user when trying to achieve something and a reference for the people who already know Chart.js. It's also simpler for us to maintain and to give support.
Of course some additional samples might be needed e.g. for the callback stuff, especially when you consider the server-side incompatibility.

Format checklists

var x = ... from https://github.com/chartjs/Chart.js/blob/2.9/samples/samples.js
var l = '';
x.forEach(y => { l+='\n### ' + y.title + '\n'; y.items.forEach(z => l+='[' + z.title + '](https://www.chartjs.org/samples/latest/' + z.path + ')\n')});

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestgood first issueGood for newcomershelp wantedExtra attention is neededsamplesSomething to do with the samples.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions