Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Nilarnab Mookherjee yakuzaaaa

🎯
Focusing
View GitHub Profile
View theme-variants.js
// Base definition
function getTheme(options) {
return {
"name": "custom",
"theme": {
"base": {
"chart": {
"showlegend": "1"
},
"dataset": [{
View create-theme.js
var themeObject = {
name: 'custom',
theme: {
base: {
chart: {
showlegend: '1'
},
dataset: [{
data: [{
color: '#ff0000'
View add-theme-to-chart.js
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
View include-theme.html
<!-- First include the theme of our choice -->
<script src="../path/to/fusioncharts.theme.fusion.js"></script>
<script>
// before rendering a chart
FusionCharts.options.defaultTheme = 'fusion';
</script>
View datsource-style-embed.js
"dataSource": {
"chart": {
"showLegend": "1"
},
"dataset": [{
"seriesname": "2006",
"data": [
{
"value": "27400",
"color": '#004D40',
@yakuzaaaa
yakuzaaaa / conditional-styling.js
Last active May 14, 2019
Conditional theme styling snippets
View conditional-styling.js
base: {
chart: {
canvasBgColor: '#ffffff'
}
dataset: [{
data: function (index, data) {
var colorHex = data.value > 30000 ? '#0000ff' : '#ffff00';
return {
color: colorHex
};
@yakuzaaaa
yakuzaaaa / chart-specific-style.js
Last active May 14, 2019
Chart specific theme styles for fusionCharts
View chart-specific-style.js
base: {
chart: {
canvasBgColor: '#ffffff'
}
pie2d: {
chart: {
bgColor: '#FF0000'
}
},
msline: {
View shimmer.css
.shimmer-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f9;
background-image: linear-gradient(to right, #f6f7f9 20%, #e9ebee 40%, #f6f7f9 60%, #f6f7f9 100%);
background-repeat: no-repeat;
View lazy-load-image-directive.ts
import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[lazy-load]' // Attribute selector
})
export class LazyLoadDirective implements OnChanges {
@Input('source')
source;
lazyImageObserver: any;
View some.html
<!--
We will use the directive in HTML in the following way
lazy-load here is our directive name and source is our input to the directive and it contains the original source URL -->
<img lazy-load [source]="srcUrl">
You can’t perform that action at this time.