CODEWITHSUNDEEP
javascriptc#bridgechartist.jsbridge.net
Bojidar Stanchev
Bojidar Stanchev

Reputation: 555

Retyped.chartist usage unclear. How do I create a basic line chart?

I'm using bridge.NET and Retyped, I have Chartist as a js library and also I have Retyped.chartist as a nuget package in visual studio (this maps c# code to the js lib). When I run the website The library is loaded. But my code doesnt work: 

chartist.Chartist2.Line.New(newUsersChart, new Chartist.IChartistData
        {
            labels = arr,
            series = arr2
        });

The error is that Chartist2 is undefined. Tried to access Line on undefined. I tried looking trough the retyped mapping, but no luck. Nothing found over the internet about this specific scenario...

Upvotes: 1

Views: 132

Answers (1)

retype
retype

Reputation: 2385

I have the Bridge CLI installed and used the following commands to create a demo project (on Mac):

mkdir demo1
cd demo1
bridge new
bridge add package retyped.chartist
bridge build
bridge run
code .

The call to code . opens the project in Visual Studio Code.

Within Program.cs, I used the following C#:

using System;
using Bridge;
using Retyped;
using static Retyped.chartist;

namespace Demo
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var data = new Chartist.IChartistData
            {
                labels = new es5.Array<string>("Mon", "Tue", "Wed", "Thu", "Fri"),
                series = new es5.Array<es5.Array<double>>(new es5.Array<double>(5, 2, 4, 2, 0 ))
            };

            var options = new Chartist.ILineChartOptions
            {
                width = 300,
                height = 200
            };

            Chartist2.Line.New(".ct-chart", data, options);
        }
    }
}

Not the cleanest or most obvious C#, but it's what's currently required to get this working. Hopefully at some point in the future Retyped can improve the C# to allow for use of more natural and common C# classes, such as anonymous objects and basic C# arrays.

This demo is based on a sample provided in the Chartist Getting Started doc.

The following loader config section is also required in the projects bridge.json file:

"loader": {
  "manualLoading": "true",
  "skipManualVariables": "true"
}

In the /dist folder, I then created a new demo.html file and added the following:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.js"></script>

    <script src="bridge.js"></script>
    <script src="demo1.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth"></div>
  </body>
</html>

Rebuild the project.

If you go back to the browser and view demo.html, the Chartist chart should render correctly.

Hope this helps.

Upvotes: 2

Related Questions