• FRAMEWORK

Data Display

Charts

Trend Line Chart

You can review the usage below for trend line chart.

  • Gösterim: Son 12 Ay
  • Ölçüt: Skor

    // Trend Line
    createTrendLineChart('chartTrendLine',
    ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
    [42, 51, 47, 59, 63, 60, 68, 71, 66, 74, 78, 82]
    );

Time Series (Zoom + Pan)

You can review the usage below for polar area chart.

  • Son: 2 Yıl
  • Zaman: Saat

     var labels = [], values = [], now = moment().startOf('month');
  for (var i = 11; i >= 0; i--) { var d = moment(now).subtract(i, 'months'); labels.push(d); values.push(50 + Math.round(Math.random() * 40)); }

  createTimeSeriesZoomPan('idTimeSeries', labels, values, {
      datasetLabel: 'Satış',
      legend: { position: 'bottom' }
  });

Grouped Bar

You can review the usage below for bar chart. 


    createGroupedBarChart('chartGroupedBar',
    ["2800", "2850", "2900", "2950", "3000"],
    [
    { label: "Africa", backgroundColor: "#079992", data: [4000, 4000, 6000, 8000, 10000] },
    { label: "America", backgroundColor: "#38ada9", data: [10000, 20000, 30000, 40000, 50000] },
    { label: "Europe", backgroundColor: "#0a3d62", data: [88000, 76000, 64000, 52000, 40000] }
    ]
    );

Mixed (Bar + Line)

You can review the usage below for mixed chart. 


                                           createMixedBarLineChart('idMixedChart',
      ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
      [120, 150, 130, 180, 200, 210, 230, 220, 240, 260, 255, 280],       // bar
      [2.1, 2.4, 2.2, 2.8, 3.0, 3.2, 3.3, 3.2, 3.5, 3.8, 3.7, 4.0]       // line (%)
  );

Stacked Bar

You can review the usage below for stacked bar chart. 


                                           createStackedBarChart('chartStackedBar',
      ['Q1', 'Q2', 'Q3', 'Q4'],
      [
          { label: 'Ürün A', data: [120, 150, 180, 200], backgroundColor: '#42a5f5' },
          { label: 'Ürün B', data: [80, 100, 120, 140], backgroundColor: '#66bb6a' },
          { label: 'Ürün C', data: [60, 70, 90, 100], backgroundColor: '#ffa726' }
      ]
  );

Stacked Area

You can review the usage below for total stacked area chart. 


    createStackedAreaChart('chartStackedAreaChart',
    ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
    [
    { label: 'A', data: [12, 14, 13, 18, 16, 19, 21, 20, 22, 24, 23, 26], borderColor: '#42a5f5', bg: 'rgba(66,165,245,0.25)' },
    { label: 'B', data: [8, 10, 9, 11, 12, 13, 14, 15, 15, 16, 17, 18], borderColor: '#66bb6a', bg: 'rgba(102,187,106,0.25)' }
    ]
    );

Scatter Plot

You can review the usage below for total scatter plot chart. 


    createScatterChart('chartScatterChart', [
    { x: 5, y: 7 }, { x: 8, y: 9 }, { x: 12, y: 6 }, { x: 15, y: 13 }, { x: 18, y: 10 }
    ]);

Bar Chart

You can review the usage below for bar chart. 


    createBarChart('chartBar',
    ['Label 1', 'Label 2', 'Label 3'],
    [53548, 54454, 64859]
    );

Chart foBarChart = new Chart(); // FOFramework.Core.Chart
foBarChart.type = ChartTypes.Bar;
foBarChart.data.labels = new List<string>
() { "Label 1", "Label 2", "Label 3" };

List<int>
myBarSet = new List<int>
() { 10, 50, 247 };
foBarChart.data.datasets.First().data = myBarSet;
foBarChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorBlue);
foBarChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorGreen);
foBarChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorYellow);
foBarChart.options.responsive = false;
foBarChart.data.datasets.First().datalabels.display = false;
foBarChart.options.legend.position = ChartOptionPosions.Bottom;
foBarChart.options.legend.labels.fontColor = "black";
foBarChart.options.legend.labels.boxWidth = 10;
foBarChart.options.legend.labels.boxHeight = 10;
foBarChart.options.legend.labels.padding = 5;
foBarChart.totalCount = 123; // optionally choice, for total number
model.foBarChart = foBarChart;

Horizontal Bar Chart

You can review the usage below for horizontal bar chart. 


    createHorizontalBarChart('chartHorizontalBarChart',
    ['Kategori 1', 'Kategori 2', 'Kategori 3', 'Kategori 4'],
    [{ label: 'Değerler', data: [45, 70, 38, 90], backgroundColor: '#26c6da' }]
    );

Filled Line

You can review the usage below for filled line chart. 


    createBasicLineChart('chartFilledLine',
    ['Label 1', 'Label 2', 'Label 3'],
    [53451, 15854, 10814],
    ['rgba(0,168,96,0.5)', 'rgba(0,153,255,0.5)', 'rgba(250,186,87,0.5)']
    );

Chart foLineChart = new Chart(); // FOFramework.Core.Chart
foLineChart.type = ChartTypes.Line;
foLineChart.data.labels = new List<string>
() { "Label 1", "Label 2", "Label 3" };

List<int>
myLineSet = new List<int>
() { 10, 50, 247 };
foLineChart.data.datasets.First().data = myLineSet;
foLineChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorBlue);
foLineChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorGreen);
foLineChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorYellow);
foLineChart.options.responsive = false;
foLineChart.options.legend.position = ChartOptionPosions.Bottom;
foLineChart.options.legend.labels.fontColor = "black";
foLineChart.options.legend.labels.boxWidth = 10;
foLineChart.options.legend.labels.boxHeight = 10;
foLineChart.options.legend.labels.padding = 5;
foLineChart.totalCount = 123; // optionally choice, for total number
model.foLineChart = foLineChart;

Pie Chart

You can review the usage below for Pie chart. 


    createPieChart('chartPie',
    ['Label 1', 'Label 2', 'Label 3'],
    [5000, 15000, 10000]
    );

Chart foPieChart = new Chart(); // FOFramework.Core.Chart
foPieChart.type = ChartTypes.Pie;
foPieChart.data.labels = new List<string>
() { "Label 1", "Label 2", "Label 3" };

List<int>
myPieSet = new List<int>
() { 10, 50, 247 };
foPieChart.data.datasets.First().data = myPieSet;
foPieChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorBlue);
foPieChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorGreen);
foPieChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorYellow);
foPieChart.options.responsive = false;
foPieChart.data.datasets.First().datalabels.display = false;
foPieChart.options.legend.position = ChartOptionPosions.Bottom;
foPieChart.options.legend.labels.fontColor = "black";
foPieChart.options.legend.labels.boxWidth = 10;
foPieChart.options.legend.labels.boxHeight = 10;
foPieChart.options.legend.labels.padding = 5;
foPieChart.totalCount = 123; // optionally choice, for total number
model.foPieChart = foPieChart;

Pie Percent Value

You can review the usage below for percent pie chart. 


    createPercentPieChart('chartPercentPie',
    ['Red', 'Blue', 'Yellow'],
    [31230, 54560, 27890],
    ['#FF6384', '#36A2EB', '#FFCE56']
    );

Polar Area

You can review the usage below for polar area chart. 


    createPolarAreaChart('chartPolarArea',
    ['A', 'B', 'C', 'D', 'E'],
    [12, 19, 11, 7, 14]
    );

Doughnut

You can review the usage below for doughnut chart. 


    Chart foDoughnutChart = new Chart(); // FOFramework.Core.Chart
    foDoughnutChart.type = ChartTypes.Doughnut;
    foDoughnutChart.data.labels = new List<string>
    () { "Label 1", "Label 2", "Label 3" };

    List<int>
    myDoughnutSet = new List<int>
    () { 10, 50, 247 };
    foDoughnutChart.data.datasets.First().data = myDoughnutSet;
    foDoughnutChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorBlue);
    foDoughnutChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorGreen);
    foDoughnutChart.data.datasets.First().backgroundColor.Add(ChartOptionColors.colorYellow);
    foDoughnutChart.options.responsive = false;
    foDoughnutChart.options.legend.position = ChartOptionPosions.Bottom;
    foDoughnutChart.options.legend.labels.fontColor = "black";
    foDoughnutChart.options.legend.labels.boxWidth = 10;
    foDoughnutChart.options.legend.labels.boxHeight = 10;
    foDoughnutChart.options.legend.labels.padding = 5;
    foDoughnutChart.totalCount = 123; // optionally choice, for total number
    foDoughnutChart.options.legend.display= false; // legend display true or false
    model.foDoughnutChart = foDoughnutChart;
    //Legend is used for display true or false. Returns true if not specified. foDoughnutChart.options.legend.display= false;

Doughnut Total Number

You can review the usage below for total number doughnut chart. 


    createDoughnutWithTotal('chartDoughnutTotalNumber',
    ['Label 1', 'Label 2', 'Label 3'],
    [5000, 15000, 10000],
    ['rgba(0,168,96,0.5)', 'rgba(0,153,255,0.5)', 'rgba(250,186,87,0.5)']
    );

Speedo Simple

You can review the usage below for speedomaster chart. 


    var speedo = createSpeedometer('chartSpeedoSimple', 135, {
    min: 0,
    max: 180,
    thresholds: [60, 120, 180],
    colors: ['#4caf50', '#ffb300', '#e53935'],
    ticks: { majorStep: 20, minorStep: 10, labelFontSize: 12 },
    fontFamily: 'Roboto',
    // istersen yazı biçimi:
    currentFormatter: function (v) { return 'Skor: ' + v; }
    });

Radar Chart

You can review the usage below for Pie chart. 


                                           createRadarChart('idRadarChart',
      ['Teknik', 'İletişim', 'Liderlik', 'Problem Çözme', 'Planlama', 'Uyum'],
      [
          { label: 'Bu Yıl', data: [78, 70, 65, 80, 72, 76], backgroundColor: 'rgba(25,118,210,0.18)', borderColor: '#1976d2', pointBackgroundColor: '#1976d2', borderWidth: 2 },
          { label: 'Geçen Yıl', data: [68, 62, 60, 74, 66, 70], backgroundColor: 'rgba(156,204,101,0.18)', borderColor: '#7cb342', pointBackgroundColor: '#7cb342', borderWidth: 2 }
      ]
  );

Bubble

You can review the usage below for bubble chart. 


    createBubbleChart('chartBubble', [
    { x: 10, y: 20, r: 12 },
    { x: 15, y: 25, r: 18 },
    { x: 22, y: 12, r: 14 },
    { x: 28, y: 30, r: 20 }
    ]);