Serenity: Can't find the origin of data in the charts

[DoeJowns]

Hi everyone !

I'm currently adapting the dashboard to my project, and I wanted to edit the "Sales" graph. Problem : impossible to find where the data used in order to make the graphic are. Any idea ?

I'm talking about this graph :

<section class="col-lg-7 connectedSortable">
        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
                <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
                <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div><!-- /.nav-tabs-custom -->
    </section><!-- right col -->
</div><!-- /.row (main row) -->

[gguadalupe]

If you are using Visual Studio in English, Ctrl-F is useful to search stuff.
The data is hardcoded as an example. The file is Scriptsadminltepagesdashboard.js
If you want to load data, then you can follow the example of the KPIs. It's basically the same.
This is what I did to put some simple data in the donut and the bar chart:

In the DashboardIndex.cshtml

<script type="text/javascript">
    jQuery(function () {

        //This is if we use typescript to load the chart.
        // the info looks like hidden.
        ProjectName.Common.DashboardChart.initializeChart();
    });
</script>

In a new file named DashboardChart.ts

        static initializeChart() {
            $(function () {

                Common.DashboardPageService.CountByStatus({}, response => {
                    this.areaChart = new Morris.Bar({
                        element: 'revenue-chart',
                        resize: true, parseTime: false,
                        data: response.Values,
                        xkey: 'Month',
                        ykeys: response.StatusKeys, labels: response.StatusLabels, hideHover: 'auto'
                    });
                });

What I did was to follow the example of the Chart In Dialog.
FYI. I'm not a web developer so these examples may not be the best way of doing it.

Also, search the forum (ctrl-f), someone shared some examples of how to correctly implement this.

Gus

[sayuga]

I have a sample that shows the implementation of the charts using the basic samples chart in dialog.

https://github.com/sayuga/AdminLTE-Widgets-in-Typscript/tree/master/Charts

You'll have to create a service call to get the data for the chart. The data being used in the current dashboard samples is being fed through a scrip that is holding dummy data in a .js file so it'd be useless to adapt that end.

I've gotten most of the Dashboard widgets rebuilt in my repository so you are welcome to use that as a starting point. I haven't finished them due to another project taking priority but let me know if you need more help.

[gguadalupe]

Hey @sayuga Thank you!! this was the example I was talking about! awesome stuff!

Gus.

[sayuga]

@gguadalupe , If your issue is resolved, please close the issue.

[gguadalupe]

Hi @sayuga, this is not mine. It's @DoeJowns

Gus.

[sayuga]

Oops. My mistake. @DoeJowns then. If you are all set please remember to close the ticket.

Sorry @gguadalupe

[chockyu]

@sayuga thanks ,your example is very useful fro me .