Chart Options এবং Customization (চার্ট অপশন এবং কাস্টমাইজেশন)

Google Charts API-এ Chart Options এবং Customization ব্যবহার করে আপনি আপনার চার্টের বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন, যেমন টাইটেল, অক্ষ (axis), রঙ, গ্রিডলাইন, লেজেন্ড, টুলটিপ, আকার, ফন্ট, এবং আরও অনেক কিছু। এই কাস্টমাইজেশনগুলি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।

এখানে আমরা কিছু গুরুত্বপূর্ণ Chart Options এবং কাস্টমাইজেশন পদ্ধতি নিয়ে আলোচনা করব।

1. Title কাস্টমাইজেশন (Title Customization)

চার্টের Title আপনি কাস্টমাইজ করতে পারেন। এটি চার্টের উপরের অংশে ডেটার সারাংশ বা নির্দিষ্ট বিষয় তুলে ধরে।

chartOptions = {
  title: 'My Daily Activities', // Chart Title
  titleTextStyle: {
    color: 'blue',   // Title color
    fontSize: 18,    // Title font size
    bold: true,      // Bold title
    italic: true     // Italic title
  }
};

2. Chart Width এবং Height কাস্টমাইজেশন

চার্টের আকার নির্ধারণ করার জন্য width এবং height অপশন ব্যবহার করা হয়।

chartOptions = {
  width: 600,  // Chart Width
  height: 400  // Chart Height
};

3. Legend কাস্টমাইজেশন (Legend Customization)

Legend হলো চার্টের বৈশিষ্ট্য বা ডেটার ব্যাখ্যা যা সাধারণত চার্টের পাশে বা নিচে থাকে। legend অপশনের মাধ্যমে আপনি লেজেন্ডের পজিশন, ফন্ট, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।

chartOptions = {
  legend: {
    position: 'top',  // Position: 'top', 'bottom', 'left', 'right'
    alignment: 'center',  // Alignment: 'start', 'center', 'end'
    textStyle: {
      color: 'green',  // Legend text color
      fontSize: 14     // Legend text font size
    }
  }
};

4. Tooltip কাস্টমাইজেশন

Tooltip চার্টের উপর হোভার করলে একটি পপআপ হিসেবে ডেটা প্রদর্শিত হয়। tooltip অপশন দিয়ে আপনি টুলটিপের স্টাইল এবং কন্টেন্ট কাস্টমাইজ করতে পারেন।

chartOptions = {
  tooltip: {
    trigger: 'focus',  // Tooltip trigger type: 'focus' or 'selection'
    isHtml: true,      // Enable HTML content in tooltip
    textStyle: {
      color: 'black',   // Tooltip text color
      fontSize: 14      // Tooltip font size
    }
  }
};

5. Axis কাস্টমাইজেশন (Axis Customization)

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করে আপনি অক্ষের টাইটেল, লেবেল এবং গ্রিডলাইন কাস্টমাইজ করতে পারেন।

chartOptions = {
  hAxis: {
    title: 'Time',     // Horizontal Axis title
    minValue: 0,       // Horizontal axis minimum value
    textStyle: {
      color: 'green',  // Horizontal axis text color
      fontSize: 12     // Horizontal axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridline color
      count: 4           // Gridline count
    }
  },
  vAxis: {
    title: 'Sales',    // Vertical Axis title
    textStyle: {
      color: 'red',     // Vertical axis text color
      fontSize: 14      // Vertical axis text font size
    }
  }
};

6. Colors কাস্টমাইজেশন

colors অপশন ব্যবহার করে আপনি চার্টের রঙ কাস্টমাইজ করতে পারেন। এই অপশনটি একাধিক রঙের অ্যারে নেয়, যা বিভিন্ন সেকশন বা ক্যাটেগরির জন্য আলাদা রঙ নির্ধারণ করে।

chartOptions = {
  colors: ['#4285F4', '#34A853', '#FBBC05', '#EA4335']  // Custom Colors
};

7. Gridlines কাস্টমাইজেশন

গ্রিডলাইনগুলি চার্টের অক্ষকে সুষম এবং পড়তে সহজ করে তোলে। আপনি gridlines অপশন ব্যবহার করে তাদের রঙ, প্রস্থ এবং সংখ্যা কাস্টমাইজ করতে পারেন।

chartOptions = {
  hAxis: {
    gridlines: {
      color: '#e5e5e5', // Gridline color
      count: 5          // Number of gridlines
    }
  },
  vAxis: {
    gridlines: {
      color: '#e5e5e5', // Gridline color
      count: 5          // Number of gridlines
    }
  }
};

8. Background Color কাস্টমাইজেশন

চার্টের Background Color পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়।

chartOptions = {
  backgroundColor: '#f2f2f2'  // Chart background color
};

9. 3D Chart কাস্টমাইজেশন

কিছু চার্টে 3D ভিউ তৈরির জন্য is3D অপশন ব্যবহার করা যায়। এটি সাধারণত PieChart, ColumnChart, BarChart-এ ব্যবহৃত হয়।

chartOptions = {
  is3D: true,  // Enable 3D view for the chart
  view: { min: 0, max: 10 }
};

10. FontStyle কাস্টমাইজেশন

চার্টের টেক্সটের font, font size, font weight, এবং font style কাস্টমাইজ করা যায়।

chartOptions = {
  titleTextStyle: {
    fontSize: 16,  // Font size for the title
    fontName: 'Arial',  // Font type
    bold: true,  // Font weight
    italic: true // Font style
  },
  legend: {
    textStyle: {
      fontSize: 14,  // Font size for the legend text
      fontName: 'Verdana'  // Font type for the legend
    }
  }
};

11. Customizing Chart Layout

আপনি layout কাস্টমাইজ করে চার্টের বিভিন্ন উপাদান যেমন title, legend, এবং axis এর অবস্থান নিয়ন্ত্রণ করতে পারেন।

chartOptions = {
  title: 'Sales Overview',
  titlePosition: 'in', // Title inside the chart
  legend: {
    position: 'bottom',
    alignment: 'center' // Align legend to the center
  }
};

Chart Example with Full Customization

নিচে একটি পূর্ণ কাস্টমাইজড Pie Chart এর উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন Chart Options এবং Customization অপশন ব্যবহার করা হয়েছে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Pie Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18,  // Title font size
      bold: true,    // Title font weight
      italic: true   // Title font style
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14   // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true,     // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    }
  };
}

HTML:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Chart Options এবং Customization ব্যবহার করে আপনি আপনার Google Charts-কে কাস্টমাইজ করতে পারেন। বিভিন্ন অপশন যেমন title, legend, colors, tooltip, axis, gridlines, font, এবং background কাস্টম

াইজ করে আপনি চার্টের আঙ্গিক এবং স্টাইল নিয়ন্ত্রণ করতে পারেন। এই কাস্টমাইজেশনগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয়, ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

Google Charts API-এ ChartOptions একটি গুরুত্বপূর্ণ অংশ যা দিয়ে আপনি আপনার চার্টের কাস্টমাইজেশন করতে পারেন। এর মাধ্যমে আপনি চার্টের ভিজ্যুয়াল উপস্থাপন, আকার, রঙ, টাইটেল, লেজেন্ড, অক্ষের কাস্টমাইজেশন, গ্রিডলাইন, টুলটিপ ইত্যাদি কাস্টমাইজ করতে পারবেন।

এখানে ChartOptions ব্যবহার করে বিভিন্ন কাস্টমাইজেশন উদাহরণ দেওয়া হয়েছে।

ChartOptions এর প্রধান কাস্টমাইজেশন অপশনস

1. Title কাস্টমাইজেশন

চার্টের টাইটেল সেট করতে title অপশন ব্যবহার করা হয়। আপনি টাইটেলের স্টাইল যেমন রঙ, ফন্ট সাইজ, ইত্যাদি কাস্টমাইজ করতে পারেন।

chartOptions = {
  title: 'My Daily Activities', // Title
  titleTextStyle: {
    color: 'blue', // Title text color
    fontSize: 18, // Title text size
    bold: true, // Title text weight
    italic: true // Title text style
  }
};

2. Legend কাস্টমাইজেশন

চার্টের লেজেন্ড কাস্টমাইজ করতে legend অপশন ব্যবহার হয়। এটি আপনাকে লেজেন্ডের পজিশন, স্টাইল ইত্যাদি কাস্টমাইজ করার সুবিধা দেয়।

chartOptions = {
  legend: {
    position: 'top', // Position: top, bottom, left, right
    alignment: 'center', // Alignment: start, center, end
    textStyle: {
      color: 'black', // Text color
      fontSize: 14 // Font size
    }
  }
};

3. Chart Size কাস্টমাইজেশন

চার্টের আকার কাস্টমাইজ করতে width এবং height অপশন ব্যবহার করা হয়।

chartOptions = {
  width: 600, // Width of the chart
  height: 400 // Height of the chart
};

4. Colors কাস্টমাইজেশন

colors অপশন দিয়ে আপনি চার্টের বার, সেগমেন্ট, অথবা অন্যান্য উপাদানের রঙ কাস্টমাইজ করতে পারেন।

chartOptions = {
  colors: ['#4285F4', '#DB4437', '#0F9D58', '#F4B400'] // Custom colors for chart elements
};

5. Tooltip কাস্টমাইজেশন

চার্টের উপর হোভার করলে যেসকল তথ্য টুলটিপে প্রদর্শিত হয়, সেগুলি কাস্টমাইজ করতে tooltip অপশন ব্যবহার করা হয়।

chartOptions = {
  tooltip: {
    trigger: 'focus', // When to show tooltip: focus, selection
    isHtml: true, // Enable HTML content in tooltip
    textStyle: {
      color: 'black', // Tooltip text color
      fontSize: 14 // Tooltip font size
    }
  }
};

6. Axis কাস্টমাইজেশন (hAxis, vAxis)

অক্ষের টাইটেল, গ্রিডলাইন, এবং লেবেল কাস্টমাইজ করতে hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়।

chartOptions = {
  hAxis: {
    title: 'Time', // Horizontal axis title
    minValue: 0, // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12 // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales', // Vertical axis title
    textStyle: {
      color: 'red', // Axis text color
      fontSize: 14 // Axis text font size
    }
  }
};

7. Gridlines কাস্টমাইজেশন

চার্টের অক্ষের গ্রিডলাইন কাস্টমাইজ করতে gridlines ব্যবহার করা হয়।

chartOptions = {
  hAxis: {
    gridlines: {
      color: 'lightgrey', // Gridline color
      width: 0.5, // Gridline width
      count: 6 // Number of gridlines
    }
  },
  vAxis: {
    gridlines: {
      color: 'lightgrey',
      width: 0.5
    }
  }
};

8. 3D Chart কাস্টমাইজেশন

কিছু চার্ট যেমন PieChart, ColumnChart, BarChart-এ আপনি 3D ভিউ ব্যবহার করতে পারেন।

chartOptions = {
  is3D: true, // Enable 3D for the chart
  view: { min: 0, max: 10 }
};

9. Background Color কাস্টমাইজেশন

চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor ব্যবহার করা হয়।

chartOptions = {
  backgroundColor: '#f2f2f2' // Set background color
};

10. Font Style কাস্টমাইজেশন

চার্টের টেক্সটের ফন্ট স্টাইল এবং সাইজ কাস্টমাইজ করতে fontName, fontSize, fontWeight ব্যবহার করা হয়।

chartOptions = {
  titleTextStyle: {
    fontName: 'Arial', // Font family
    fontSize: 16, // Font size
    bold: true // Font weight
  }
};

চলমান উদাহরণ: Full Chart Customization

এখানে আমরা একটি Pie Chart তৈরি করব এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করব।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Pie Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',  // Title
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18, // Title font size
      bold: true // Title bold
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    }
  };
}

app.component.html:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

ChartOptions ব্যবহার করে আপনি Google Charts এর বিভিন্ন উপাদান কাস্টমাইজ করতে পারেন, যেমন title, legend, colors, tooltip, axis ইত্যাদি। এটি চার্টের দৃশ্যমানতা, ব্যবহারকারীর অভিজ্ঞতা এবং ফাংশনালিটি উন্নত করতে সহায়তা করে। বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনি আপনার চার্টকে আপনার প্রয়োজন অনুযায়ী তৈরি করতে পারবেন।

Google Charts API-তে চার্টের title, legend, axis, এবং gridlines কাস্টমাইজ করার জন্য বিভিন্ন অপশন এবং স্টাইল ব্যবহার করা হয়। এগুলি ব্যবহার করে আপনি চার্টের উপস্থাপনাকে সম্পূর্ণ কাস্টমাইজ করতে পারেন। এখানে বিস্তারিতভাবে আলোচনা করা হলো।

1. Title কাস্টমাইজেশন

চার্টের টাইটেল title অপশন দিয়ে কাস্টমাইজ করা হয়। এর মাধ্যমে আপনি টাইটেলের টেক্সট, ফন্ট সাইজ, রঙ, স্টাইল এবং পজিশন পরিবর্তন করতে পারেন।

Title কাস্টমাইজ করতে:

• title: টাইটেলের টেক্সট।
• titleTextStyle: টাইটেল টেক্সটের স্টাইল (যেমন ফন্ট সাইজ, ফন্ট কালার, ইত্যাদি)।

chartOptions = {
  title: 'My Daily Activities',  // Title text
  titleTextStyle: {
    color: 'blue',  // Title text color
    fontSize: 18,   // Font size
    bold: true,     // Make the title bold
    italic: true    // Make the title italic
  }
};

2. Legend কাস্টমাইজেশন

Legend চার্টের লেজেন্ড কাস্টমাইজ করতে ব্যবহার করা হয়। এর মাধ্যমে আপনি লেজেন্ডের পজিশন, টেক্সট স্টাইল, এবং রঙ পরিবর্তন করতে পারেন।

Legend কাস্টমাইজ করতে:

• position: লেজেন্ডের পজিশন (top, bottom, left, right)।
• alignment: লেজেন্ডের এলাইনমেন্ট (start, center, end)।
• textStyle: লেজেন্ডের টেক্সট স্টাইল কাস্টমাইজ করা (রঙ, ফন্ট সাইজ, ইত্যাদি)।

chartOptions = {
  legend: {
    position: 'top', // Legend position: top, bottom, left, right
    alignment: 'center', // Legend alignment: start, center, end
    textStyle: {
      color: 'black', // Legend text color
      fontSize: 14,  // Legend font size
      fontName: 'Arial' // Legend font family
    }
  }
};

3. Axis কাস্টমাইজেশন

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করে আপনি অক্ষের টাইটেল, লেবেল এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন। এছাড়া, আপনি axis gridlines ও কাস্টমাইজ করতে পারবেন।

Horizontal axis (hAxis) এবং Vertical axis (vAxis) কাস্টমাইজ:

• title: অক্ষের টাইটেল।
• minValue: অক্ষের মিনিমাম মান।
• textStyle: অক্ষের টেক্সট স্টাইল (রঙ, সাইজ, ফন্ট, ইত্যাদি)।
• gridlines: গ্রিডলাইনের কাস্টমাইজেশন।

chartOptions = {
  hAxis: {
    title: 'Time',  // Horizontal axis title
    minValue: 0,    // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12    // Axis text font size
    },
    gridlines: {
      color: 'lightgrey',  // Gridlines color
      count: 5             // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales',  // Vertical axis title
    textStyle: {
      color: 'red',    // Axis text color
      fontSize: 14     // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color for vertical axis
      count: 4            // Number of gridlines
    }
  }
};

4. Gridlines কাস্টমাইজেশন

Gridlines চার্টের গ্রিডলাইনগুলোর কাস্টমাইজেশন করতে ব্যবহৃত হয়। আপনি গ্রিডলাইনের রঙ, সাইজ, এবং সংখ্যা কাস্টমাইজ করতে পারেন। এটি অক্ষের মাধ্যমে চার্টের উপস্থাপনাকে পরিষ্কার এবং আরও দেখতে সুন্দর করে তোলে।

Gridlines কাস্টমাইজ করতে:

• color: গ্রিডলাইনের রঙ।
• count: গ্রিডলাইনের সংখ্যা (যতটা কম হবে, ততটা বড় হবে)।
• width: গ্রিডলাইনের প্রস্থ।

chartOptions = {
  hAxis: {
    gridlines: {
      color: 'lightgrey',  // Gridlines color
      count: 5,            // Number of gridlines
      width: 1             // Gridlines width
    }
  },
  vAxis: {
    gridlines: {
      color: 'lightgrey',  // Gridlines color for vertical axis
      count: 4,            // Number of gridlines
      width: 1             // Gridlines width
    }
  }
};

Complete Example (Pie Chart with Title, Legend, Axis, and Gridlines)

এখানে একটি Pie Chart এর উদাহরণ দেওয়া হলো যেখানে Title, Legend, Axis, এবং Gridlines কাস্টমাইজ করা হয়েছে।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Customization Example';

  // Chart Type
  chartType = 'PieChart';

  // Chart Data
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options
  chartOptions = {
    title: 'My Daily Activities',
    titleTextStyle: {
      color: 'blue',
      fontSize: 18,
      bold: true,
      italic: true
    },
    pieHole: 0.4, // Doughnut style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'focus',
      isHtml: true,
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    hAxis: {
      title: 'Time',
      minValue: 0,
      textStyle: {
        color: 'green',
        fontSize: 12
      },
      gridlines: {
        color: 'lightgrey',
        count: 5
      }
    },
    vAxis: {
      title: 'Activities',
      textStyle: {
        color: 'red',
        fontSize: 14
      },
      gridlines: {
        color: 'lightgrey',
        count: 4
      }
    }
  };
}

app.component.html:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Google Charts API-তে title, legend, axis, এবং gridlines কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার চার্টের উপস্থাপনাকে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি আপনাকে আপনার চার্টের স্টাইল এবং লেআউট নিয়ন্ত্রণে সহায়তা করে, যাতে তা আরও সুন্দর, পাঠযোগ্য এবং ইন্টারঅ্যাকটিভ হয়। Title, Legend, Axis, এবং Gridlines এর মাধ্যমে আপনি চার্টের বিভিন্ন অংশের আঙ্গিক এবং রঙ নির্ধারণ করতে পারেন।

Google Charts API ব্যবহার করে আপনি চার্টের রঙ এবং ফন্ট কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি আপনার চার্টকে আপনার অ্যাপ্লিকেশনের ডিজাইন এবং থিমের সাথে সামঞ্জস্যপূর্ণ করতে পারেন। Color Scheme এবং Fonts কাস্টমাইজেশন করতে আপনাকে ChartOptions এ কিছু স্টাইলিং অপশন সেট করতে হবে।

1. Color Scheme কাস্টমাইজেশন (Changing Color Scheme)

Color Scheme পরিবর্তন করে আপনি চার্টের বিভিন্ন উপাদান যেমন বারের রঙ, লাইন রঙ, পাই চার্টের সেগমেন্ট রঙ ইত্যাদি পরিবর্তন করতে পারেন। আপনি colors অপশন ব্যবহার করে একাধিক রঙ নির্ধারণ করতে পারেন।

Color Scheme কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A8']  // Custom Colors for each segment or bar
};

এখানে, colors অ্যারে ব্যবহার করা হয়েছে যেখানে প্রতিটি রঙ একটি নির্দিষ্ট চার্ট সেগমেন্ট বা বারের জন্য নির্ধারিত।

Pie Chart এর রঙ পরিবর্তন:

chartOptions = {
  title: 'My Daily Activities',
  pieHole: 0.4, // Doughnut style
  colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A8'] // Color Scheme
};

এখানে আমরা একটি Pie Chart তৈরি করেছি এবং তার সেগমেন্টের জন্য কাস্টম রঙ নির্ধারণ করেছি।

2. Fonts কাস্টমাইজেশন (Changing Fonts)

Fonts কাস্টমাইজেশনের মাধ্যমে আপনি টাইটেল, অক্ষের লেবেল এবং লেজেন্ডের ফন্ট পরিবর্তন করতে পারেন। এটি titleTextStyle, hAxis, vAxis, এবং legend অপশনগুলির মাধ্যমে করা হয়।

Font Size, Family, Color, Weight পরিবর্তন:

chartOptions = {
  title: 'Sales Data',
  titleTextStyle: {
    color: 'blue',      // Title text color
    fontSize: 18,       // Title font size
    fontName: 'Arial',  // Title font family
    bold: true,         // Title text weight
    italic: false       // Title text style
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      color: 'green',   // Axis title color
      fontSize: 14,     // Axis title font size
      fontName: 'Times New Roman', // Axis title font family
      italic: true      // Axis title style
    },
    textStyle: {
      color: 'black',   // Axis label color
      fontSize: 12,     // Axis label font size
      fontName: 'Verdana'  // Axis label font family
    }
  },
  vAxis: {
    title: 'Sales',
    titleTextStyle: {
      color: 'red',     // Axis title color
      fontSize: 14,     // Axis title font size
      fontName: 'Courier New', // Axis title font family
      italic: true      // Axis title style
    },
    textStyle: {
      color: 'black',   // Axis label color
      fontSize: 12,     // Axis label font size
      fontName: 'Georgia'  // Axis label font family
    }
  }
};

এখানে, titleTextStyle, hAxis, এবং vAxis এর মাধ্যমে চার্টের টাইটেল, অক্ষের টাইটেল এবং অক্ষের লেবেলগুলোর ফন্ট, আকার, রঙ ইত্যাদি কাস্টমাইজ করা হয়েছে।

3. Combination of Colors and Fonts

আপনি চাইলে colors এবং fonts কাস্টমাইজেশন একসাথে ব্যবহার করতে পারেন যাতে আপনার চার্টের প্রতিটি উপাদানকে সম্পূর্ণভাবে কাস্টমাইজ করা যায়। নিচে একটি উদাহরণ দেওয়া হলো:

chartOptions = {
  title: 'Company Performance',
  titleTextStyle: {
    color: 'darkblue',
    fontSize: 22,
    fontName: 'Comic Sans MS',
    bold: true
  },
  colors: ['#FF5733', '#33FF57', '#3357FF'],
  legend: {
    position: 'top',
    alignment: 'center',
    textStyle: {
      color: 'purple',
      fontSize: 14,
      fontName: 'Arial'
    }
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      color: 'green',
      fontSize: 16,
      fontName: 'Verdana'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Arial'
    }
  },
  vAxis: {
    title: 'Revenue',
    titleTextStyle: {
      color: 'red',
      fontSize: 16,
      fontName: 'Courier New'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Georgia'
    }
  }
};

এখানে, আমরা title, legend, hAxis, vAxis সবই কাস্টমাইজ করেছি যাতে চার্টের স্টাইল এবং লেআউট পুরোপুরি কাস্টমাইজড হয়।

4. Font Size and Font Style Adjustment Example

এছাড়াও, fontSize, fontName, এবং fontWeight কাস্টমাইজ করে আপনি যেকোনো ধরনের ফন্ট স্টাইলিং করতে পারেন।

chartOptions = {
  title: 'Product Sales',
  titleTextStyle: {
    color: 'darkblue',
    fontSize: 24, // Title font size
    fontName: 'Roboto', // Title font family
    bold: true // Title text weight
  },
  hAxis: {
    title: 'Year',
    titleTextStyle: {
      color: 'green',
      fontSize: 16,
      fontName: 'Arial'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Verdana'
    }
  }
};

এখানে, fontSize, fontName, fontWeight ইত্যাদি পরিবর্তন করে ফন্ট স্টাইলিং কাস্টমাইজ করা হয়েছে।

5. Custom Font Family for Legend, Axis Labels

আপনি legend, hAxis, এবং vAxis এর জন্য fontFamily সেট করতে পারেন, যা পুরো চার্টের ফন্ট স্টাইল পরিবর্তন করবে:

chartOptions = {
  legend: {
    position: 'top',
    textStyle: {
      fontSize: 16,
      fontName: 'Arial', // Set custom font family
      color: 'black' // Legend text color
    }
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      fontSize: 14,
      fontName: 'Times New Roman', // Custom font for hAxis
      color: 'blue'
    },
    textStyle: {
      fontSize: 12,
      fontName: 'Verdana', // Custom font for axis labels
      color: 'green'
    }
  }
};

সারাংশ

Google Charts API-তে Color Scheme এবং Fonts কাস্টমাইজেশন আপনাকে চার্টের ভিজুয়াল প্রেজেন্টেশন সম্পূর্ণভাবে নিয়ন্ত্রণ করতে সহায়তা করে। আপনি চার্টের title, legend, axis labels, tooltip, এবং অন্যান্য উপাদানের রঙ, ফন্ট, আকার ইত্যাদি কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি আপনার চার্টকে আরও ব্যবহারকারী-বান্ধব এবং অ্যাপ্লিকেশনের থিমের সাথে সামঞ্জস্যপূর্ণ করে তোলে।

Google Charts API-তে Tooltip এবং Animation দুটি শক্তিশালী কাস্টমাইজেশন অপশন। এগুলি ব্যবহার করে আপনি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন। Tooltip ব্যবহারকারীকে ডেটা পয়েন্টের উপর হোভার করলে অতিরিক্ত তথ্য প্রদান করে, আর Animation চার্টের প্রদর্শনকে মসৃণ এবং আকর্ষণীয় করে তোলে।

এখন চলুন দেখি Tooltip এবং Animation কাস্টমাইজ করার পদ্ধতি।

1. Tooltip কাস্টমাইজেশন

Tooltip হল একটি ইনফরমেশন বক্স যা চার্টের উপর হোভার করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সহায়তা করে। Google Charts API তে আপনি tooltip কাস্টমাইজ করতে পারেন বিভিন্নভাবে যেমন তার trigger, textStyle, HTML ইত্যাদি।

Tooltip কাস্টমাইজেশন অপশনস:

• trigger: Tooltip কখন এবং কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে ব্যবহার করা হয়। এর মান হতে পারে 'focus', 'selection', অথবা 'none'।
• textStyle: Tooltipের টেক্সট কাস্টমাইজ করতে ব্যবহৃত হয়, যেমন রঙ, ফন্ট সাইজ এবং স্টাইল।
• isHtml: আপনি যদি HTML ব্যবহার করতে চান, তবে এটিকে true সেট করতে হবে।
• showColorCode: Tooltip এ রঙের কোড দেখানোর জন্য ব্যবহৃত হয়।

Tooltip কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  tooltip: {
    trigger: 'focus',  // Tooltip প্রদর্শন হবে যখন ইউজার একটি ডেটা পয়েন্টে ফোকাস করবে
    isHtml: true,  // Tooltip এ HTML সক্রিয়
    textStyle: {
      color: 'blue',  // Tooltip text color
      fontSize: 14,   // Tooltip text size
      bold: true      // Tooltip text bold
    },
    showColorCode: true  // Tooltip এ রঙের কোড দেখানো হবে
  }
};

এখন আপনি HTML এর মাধ্যমে একটি টুলটিপ কাস্টমাইজ করতে পারেন:

chartOptions = {
  tooltip: {
    trigger: 'focus',
    isHtml: true,
    textStyle: {
      color: 'green',
      fontSize: 16
    },
    content: '<div style="color:red;">Custom Tooltip Content</div>'  // Custom HTML in tooltip
  }
};

2. Animation কাস্টমাইজেশন

Animation হল সেই ফিচার যা চার্ট লোড হওয়ার সময় বা ডেটা পরিবর্তনের সময় মসৃণ এফেক্ট প্রদান করে। এটি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। Google Charts API তে animation কাস্টমাইজ করার মাধ্যমে আপনি চার্টের startup এফেক্ট, duration, এবং easing নিয়ন্ত্রণ করতে পারেন।

Animation কাস্টমাইজেশন অপশনস:

• startup: এটি যদি true হয়, তবে এনিমেশন শুরু হবে চার্ট লোড হওয়ার সময়।
• duration: এনিমেশনের সময়কাল (মিলিসেকেন্ডে)।
• easing: এনিমেশনের টাইপ, যেমন 'linear', 'inAndOut' বা 'out'।

Animation কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  animation: {
    startup: true,      // Animation starts when the chart is loaded
    easing: 'inAndOut', // Easing function for animation
    duration: 1000      // Animation duration in milliseconds
  }
};

এখানে, চার্ট লোড হওয়ার সময় এনিমেশন শুরু হবে এবং 'inAndOut' easing ফাংশন ব্যবহার করা হবে, যা অল্প সময়ের মধ্যে গতি বাড়িয়ে এবং কমিয়ে এনিমেশন করবে। এনিমেশনের জন্য সময়কাল হল 1000 মিলিসেকেন্ড (1 সেকেন্ড)।

ডাইনামিক ডেটা আপডেট করার পর এনিমেশন:

updateChartData() {
  this.chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 6],
    ['Eat', 3],
    ['Commute', 2],
    ['Watch TV', 1],
    ['Sleep', 12]
  ];
  
  this.chartOptions.animation = {
    startup: true,
    easing: 'out',
    duration: 1500  // Longer duration for smooth animation
  };
}

এখানে, ডেটা আপডেটের পর এনিমেশন 'out' easing ফাংশন সহ এবং 1500 মিলিসেকেন্ডের সময়কাল দিয়ে চালু হবে।

Tooltip এবং Animation কাস্টমাইজেশন উদাহরণ

এখন চলুন একটি পূর্ণাঙ্গ উদাহরণ দেখি যেখানে Tooltip এবং Animation কাস্টমাইজেশন একসাথে ব্যবহার করা হচ্ছে।

উদাহরণ (Pie Chart with Tooltip and Animation):

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',  // Title
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18, // Title font size
      bold: true // Title bold
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    animation: {
      startup: true,
      easing: 'inAndOut',
      duration: 1000  // Animation duration in milliseconds
    }
  };
}

app.component.html:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Conclusion

Google Charts API-তে Tooltip এবং Animation কাস্টমাইজেশন খুবই গুরুত্বপূর্ণ ফিচার। আপনি tooltip এর মাধ্যমে ডেটার বিস্তারিত তথ্য প্রদর্শন করতে পারেন, এবং animation এর মাধ্যমে চার্ট লোড হওয়ার সময় সুন্দর মসৃণ এফেক্ট যোগ করতে পারেন। এগুলি চার্টের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেটার সঙ্গে ইন্টারঅ্যাকশন আরো আকর্ষণীয় করে তোলে।