B4J Library [ABMaterial]: Why do I think Billboard.js is awesome?

Mashiane · Aug 10, 2018

Update:

Discovered some hidden gems from the playground and implemented some I can easily use.

Ta!

prajinpraveen · Aug 12, 2018

Thank you. I would like to test it out. Please can you upload a project?
I cannot get this to work. thanks

Mashiane · Aug 23, 2018

So as it happens, I need to show different colors for the same series. This means I need some kind of color reference for the chart. There is a function to ensure that different colors are used as its not default.. As an example...

So I had to build a js function, saved it in a js file and saved under js/custom of my app.

B4X:

function HTMLColors() {
    var colors = [];
colors.push('lightslategrey');
colors.push('darkviolet');
colors.push('cyan');
colors.push('darkslateblue');
colors.push('bisque');
colors.push('lightgrey');
colors.push('khaki');
colors.push('darkgray');
colors.push('saddlebrown');
colors.push('blanchedalmond');
colors.push('darkblue');
colors.push('lightcoral');
colors.push('orangered');
colors.push('moccasin');
colors.push('azure');
colors.push('lightgoldenrodyellow');
colors.push('skyblue');
colors.push('deepskyblue');
colors.push('chartreuse');
colors.push('mediumpurple');
colors.push('lightyellow');
colors.push('violet');
colors.push('palevioletred');
colors.push('dimgrey');
colors.push('rosybrown');
colors.push('honeydew');
colors.push('mediumblue');
colors.push('darkseagreen');
colors.push('limegreen');
colors.push('paleturquoise');
colors.push('mediumorchid');
colors.push('burlywood');
colors.push('silver');
colors.push('papayawhip');
colors.push('chocolate');
colors.push('lightsteelblue');
colors.push('pink');
colors.push('darkgreen');
colors.push('sienna');
colors.push('seashell');
colors.push('thistle');
colors.push('yellow');
colors.push('lightseagreen');
colors.push('cornsilk');
colors.push('blueviolet');
colors.push('tomato');
colors.push('cornflowerblue');
colors.push('sandybrown');
colors.push('gold');
colors.push('springgreen');
colors.push('gray');
colors.push('slategrey');
colors.push('mediumvioletred');
colors.push('crimson');
colors.push('darkcyan');
colors.push('ivory');
colors.push('darkmagenta');
colors.push('wheat');
colors.push('indianred');
colors.push('darkorchid');
colors.push('whitesmoke');
colors.push('mintcream');
colors.push('lightpink');
colors.push('black');
colors.push('teal');
colors.push('cadetblue');
colors.push('beige');
colors.push('darkkhaki');
colors.push('blue');
colors.push('darkslategray');
colors.push('royalblue');
colors.push('seagreen');
colors.push('purple');
colors.push('orchid');
colors.push('forestgreen');
colors.push('darksalmon');
colors.push('palegreen');
colors.push('navy');
colors.push('lightslategray');
colors.push('rebeccapurple');
colors.push('greenyellow');
colors.push('red');
colors.push('aqua');
colors.push('white');
colors.push('dodgerblue');
colors.push('lightblue');
colors.push('olive');
colors.push('coral');
colors.push('peachpuff');
colors.push('darkolivegreen');
colors.push('darkturquoise');
colors.push('darkgrey');
colors.push('lavender');
colors.push('lightgray');
colors.push('gainsboro');
colors.push('tan');
colors.push('plum');
colors.push('midnightblue');
colors.push('powderblue');
colors.push('dimgray');
colors.push('lemonchiffon');
colors.push('salmon');
colors.push('lightgreen');
colors.push('brown');
colors.push('goldenrod');
colors.push('steelblue');
colors.push('lightsalmon');
colors.push('darkred');
colors.push('snow');
colors.push('olivedrab');
colors.push('yellowgreen');
colors.push('indigo');
colors.push('lawngreen');
colors.push('magenta');
colors.push('aquamarine');
colors.push('floralwhite');
colors.push('antiquewhite');
colors.push('hotpink');
colors.push('turquoise');
colors.push('peru');
colors.push('fuchsia');
colors.push('firebrick');
colors.push('aliceblue');
colors.push('darkgoldenrod');
colors.push('navajowhite');
colors.push('lavenderblush');
colors.push('mediumspringgreen');
colors.push('slategray');
colors.push('mistyrose');
colors.push('linen');
colors.push('darkorange');
colors.push('slateblue');
colors.push('lightcyan');
colors.push('lightskyblue');
colors.push('mediumseagreen');
colors.push('mediumturquoise');
colors.push('deeppink');
colors.push('ghostwhite');
colors.push('green');
colors.push('lime');
colors.push('mediumaquamarine');
colors.push('oldlace');
colors.push('grey');
colors.push('orange');
colors.push('darkslategrey');
colors.push('mediumslateblue');
colors.push('maroon');
colors.push('palegoldenrod');
return colors;
}

So the method that differentiates the colors is

B4X:

private Sub BuildDifferentColors() As String
    If DifferentColors = False Then Return ""
    Dim script As String = $"color: function(color, d) {
    return colors[d.index];
   },"$
    Return script
End Sub

and colors is defined as

B4X:

colors = HTMLColors();

when my component is initialized. I have attached the updated version here. All one needs to do is turn the DifferentColors property to True.

Ta!

B4J Library [ABMaterial]: Why do I think Billboard.js is awesome?

Attachments

Mashiane

Expert

Attachments

prajinpraveen

Active Member

Mashiane

Expert

Attachments

Similar Threads