Skip to content

Instantly share code, notes, and snippets.

View yakuzaaaa's full-sized avatar
🎯
Focusing

Nilarnab Mookherjee yakuzaaaa

🎯
Focusing
View GitHub Profile
@yakuzaaaa
yakuzaaaa / datsource-style-embed.js
Created May 14, 2019 07:11
Style fusionCharts data
"dataSource": {
"chart": {
"showLegend": "1"
},
"dataset": [{
"seriesname": "2006",
"data": [
{
"value": "27400",
"color": '#004D40',
<!-- 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>
var themeObject = {
name: 'custom',
theme: {
base: {
chart: {
showlegend: '1'
},
dataset: [{
data: [{
color: '#ff0000'
// Base definition
function getTheme(options) {
return {
"name": "custom",
"theme": {
"base": {
"chart": {
"showlegend": "1"
},
"dataset": [{
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
@yakuzaaaa
yakuzaaaa / chart-specific-style.js
Last active May 14, 2019 08:04
Chart specific theme styles for fusionCharts
base: {
chart: {
canvasBgColor: '#ffffff'
}
pie2d: {
chart: {
bgColor: '#FF0000'
}
},
msline: {
.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;
/*
A very inefficient but with best browser support way would be to check if the
clientBoundingRect of the image is currently inside the viewport or not on every
scroll event, damn! it's costly!
*/
/*
Let's say the images in HTML are: