Dashboard Development උදව් ඕනේ: ASP .NET or ASP .NET MVC

saja · Jul 8, 2017

Dashboard Development උදව් ඕනේ: ASP .NET or ASP .NET MVC

මම Free Templates ගොඩක් download කරලා බැලුව , හැබැයි එකක්වත් ඉක්මනට edit කරන්න පුළුං විදිහට guide එකක් වත් Help tutorials වත් නැ, හොද free templates තියනවනම් කියන්න chart (එක එක විදිහේ) ගොඩක් හදන්න ඕන.

Free templates වල sample data hard code කරලා තියෙන්නේ, database එකින් dynamically data get support කරනවානම් ගොඩක් හොදඊ, මට data get කරන්න code ලියා ගන්න පුළුවන් , හොද Free ටෙම්ප්ලටෙස් තමා දන්නේ නැත්තේ.

ලොකු උදව්වක්

numeric · Jul 8, 2017

Meka Balanna!
https://cssauthor.com/bootstrap-admin-templates/

saja · Jul 8, 2017

මචන් ඔකේ එකක් හරි edit කරලා තියෙනවද ? reference guide එකක් නැ වගේ නේ

numeric said:
Meka Balanna!
https://cssauthor.com/bootstrap-admin-templates/

numeric · Jul 8, 2017

reference guide ekaknam na machan,math net eke hoyala hoyala thama edit kale,try karapan beri na!

saja · Jul 8, 2017

thanks,try නම් කරන්නම් , අනික් පින්වන්ත අයියල , අක්කලටත් උදව් කරන්න පුළුවන් , ලොකු උදව්වක් , රේප් දෙනවා මම ලොබ නැතුව :yes:

You have given out too much Reputation in the last 24 hours, try again later.

numeric said:
reference guide ekaknam na machan,math net eke hoyala hoyala thama edit kale,try karapan beri na!

saja · Jul 8, 2017

අනික් පින්වන්ත අයියල , අක්කලටත් උදව් කරන්න පුළුවන් , ලොකු උදව්වක් , රේප් දෙනවා මම ලොබ නැතුව :yes:

blackcatcyb · Jul 8, 2017

https://adminlte.io/
https://adminlte.io/themes/AdminLTE/index2.html

Meka patta template eka. One karana charts okkama wage tiyenawa.

KingCM · Jul 8, 2017

dashboard එක අරගෙන...brackets වලින් open කරලා ඕනේ නැති පාර්ට්ස් ටික කපලා හදල ගනින්...උබට ඕනේ විදියට....

ඔය උඩින් දීල තියෙන්නේ ලින්ක් එකක්...එකේ ඒවා download කරලා බලපන්...

reference guide මොකටද බන් ඕව තේරුම් ගන්න.... :dull:

KingCM · Jul 8, 2017

Free templates වල sample data hard code කරලා තියෙන්නේ, database එකින් dynamically data get support කරනවානම් ගොඩක් හොදඊ........

උබ developer කෙනෙක්ද නැත්නම් තම ඉගෙන ගන්නවද?... :dull:

saja · Jul 8, 2017

මම development කරනවා , අනික් අයගේ ideas ගන්න තමා එළකිරි එකේ දැම්මේ

මට data get කරන්න code ලියා ගන්න පුළුවන්

KingCM said:
උබ developer කෙනෙක්ද නැත්නම් තම ඉගෙන ගන්නවද?...

The_Killer · Jul 8, 2017

Template වල data hardcode කරලා තියෙන්නේ මේකට data feed වෙද්දී කොයි වගේද කියලා තේරුම් ගන්න. උබට තියෙන්නේ හාඩ් කෝඩ් කරලා තියෙන ලයින්ස් උබේ PHP resultset statements වලින් data output එක දෙන්න.

උදා:

PHP:

var salesChartData = {
    labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label               : 'Electronics',
        fillColor           : 'rgb(210, 214, 222)',
        strokeColor         : 'rgb(210, 214, 222)',
        pointColor          : 'rgb(210, 214, 222)',
        pointStrokeColor    : '#c1c7d1',
        pointHighlightFill  : '#fff',
        pointHighlightStroke: 'rgb(220,220,220)',
        data                : [65, 59, 80, 81, 56, 55, 40]
      }
    ]
  };

මේකෙන් තේරුම් ගන්න පුළුවන් `labels` කියන්නේ Table columns කියලා.. එතකොට `data : [65, 59, 80, 81, 56, 55, 40]` කියන්නේ උබේ ඒ columns අදාළ row values ටික. දැන් මේක මේ විදියට format කරලා හදන්න නම් PHP වලින් for loop එකක් වගේ දාලා උබ column names ටික ඇඩ් කරගනින්.

Ex:

PHP:

$query = "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = 'my_database' AND TABLE_NAME = 'monthly_data'";

$labelsData = mysqli_query($conn, $query); 

if (mysqli_num_rows($labelsData) > 0) {
      $labels[] = mysqli_fetch_assoc($labelsData)
} else {
      $labels[] = "";
}

දැන් මෙතනින් උබේ table එකේ column names ටික එනවා. කොහොමත් උබට මාස ටිකේ විස්තර පෙන්නන්න ඕන නම් මෙච්චර කට්ටක් කන්න ඕනා නෑ.. ඒ ටික hard code කරපන්. :dull:

දැන් data fetch කරපන් මෙහෙම..

PHP:

$query = "SELECT value FROM monthly_data WHERE YEAR = '2016'";

$dataRows = mysqli_query($conn, $query); 

if (mysqli_num_rows($dataRows ) > 0) {
      while($currentRow = mysqli_fetch_assoc($dataRows)){
              $data[] .= $currentRow['value'];
      }
} else {
      $data[] = "0";
}

දැන් උබට array 2ක් හැදිලා ඇතිනේ database values වලින්.. දැන් ඔව්වා දෙක අර template code එකට සම්බන්ද කරන්න.

PHP:

var salesChartData = {
    labels  : <?php $labels ?>,
    datasets: [
      {
        label               : 'Electronics',
        fillColor           : 'rgb(210, 214, 222)',
        strokeColor         : 'rgb(210, 214, 222)',
        pointColor          : 'rgb(210, 214, 222)',
        pointStrokeColor    : '#c1c7d1',
        pointHighlightFill  : '#fff',
        pointHighlightStroke: 'rgb(220,220,220)',
        data                : <?php $data ?>,
      }
    ]
  };

වැඩේ ඉවර උනහම මේ වගේ chart එක පෙනේවි උබට.. (එක රැල්ලක් විතරක්. අනික වෙන label type එකක්.)

කෝ දැන් උබ හිතපු තරම් අමාරුද මේක? නෑනේ...

සැයු: මම PHP Code දැම්මේ කම්මැලි කමට නිකන් නෙට් එකෙන් උස්සලා. මේවල statement වැරදි ඇති හොදේ.. උබට idea එකක් ගන්න දැම්මේ.

HKavinda · Jul 8, 2017

B U M P

dasith077 · Jul 8, 2017

Godak welawata oya template walath use karanne 3rd party libraries. Uba mulinma aran thiyana js css files bala la ewata adala official web site eke documentation eka refer karapan. Uba thaniyen scratch eke idan website gahala thiynwanan ubata owa blanna onet na dakka gaman therenwa.

saja · Jul 8, 2017

thanks for reply,

මම php නම් නෙමයි, කමක් නැ , මට තියෙන question එක ඕක නෙමයි, data නම් load කරන්න පුළුවන් මට , අපි Admin LtE ටෙම්ප්ලටෙ එක ගතහොත් https://adminlte.io/themes/AdminLTE/index.html එකේ Sales කියල graph එක , ඕකට data එන්නේ morris.html එකෙන් dashboard.js file එකේ හැබැයි /index.html එකේ තියෙන්නේ පහල තියෙන div එක විතරයි

<div class="tab-content no-padding">

<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>

මට අලුත් chart එකක් add කරන්න ඕනේ නම් Morris type , process එක හරි ද කියන්න?
copy කලා morris.html code එක, වෙන හ්ට්ම්ල් එක්ක හැදුව , array එක වෙනස් කලා , දැන් /index.html එකට ලින්ක් කරන්නේ කොහෝ ම ද ?

var line = new Morris.Line({
element: 'line-chart',
resize: true,
data: [
{y: '2011 Q1', item1: 2666},
{y: '2011 Q2', item1: 2778},
{y: '2011 Q3', item1: 4912},
{y: '2011 Q4', item1: 3767},
{y: '2012 Q1', item1: 6810},
{y: '2012 Q2', item1: 5670},
{y: '2012 Q3', item1: 4820},
{y: '2012 Q4', item1: 15073},
{y: '2013 Q1', item1: 10687},
{y: '2013 Q2', item1: 8432}
],
xkey: 'y',
ykeys: ['item1'],
labels: ['Item 1'],
lineColors: ['#efefef'],
lineWidth: 2,
hideHover: 'auto',
gridTextColor: "#fff",
gridStrokeWidth: 0.4,
pointSize: 4,
pointStrokeColors: ["#efefef"],
gridLineColor: "#efefef",
gridTextFamily: "Open Sans",
gridTextSize: 10
});

The_Killer said:
Template වල data hardcode කරලා තියෙන්නේ මේකට data feed වෙද්දී කොයි වගේද කියලා තේරුම් ගන්න. උබට තියෙන්නේ හාඩ් කෝඩ් කරලා තියෙන ලයින්ස් උබේ PHP resultset statements වලින් data output එක දෙන්න.

උදා:

PHP:

var salesChartData = { labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label : 'Electronics', fillColor : 'rgb(210, 214, 222)', strokeColor : 'rgb(210, 214, 222)', pointColor : 'rgb(210, 214, 222)', pointStrokeColor : '#c1c7d1', pointHighlightFill : '#fff', pointHighlightStroke: 'rgb(220,220,220)', data : [65, 59, 80, 81, 56, 55, 40] } ] };

මේකෙන් තේරුම් ගන්න පුළුවන් `labels` කියන්නේ Table columns කියලා.. එතකොට `data : [65, 59, 80, 81, 56, 55, 40]` කියන්නේ උබේ ඒ columns අදාළ row values ටික. දැන් මේක මේ විදියට format කරලා හදන්න නම් PHP වලින් for loop එකක් වගේ දාලා උබ column names ටික ඇඩ් කරගනින්.

Ex:

PHP:

$query = "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = 'my_database' AND TABLE_NAME = 'monthly_data'"; $labelsData = mysqli_query($conn, $query); if (mysqli_num_rows($labelsData) > 0) { $labels[] = mysqli_fetch_assoc($labelsData) } else { $labels[] = ""; }

දැන් මෙතනින් උබේ table එකේ column names ටික එනවා. කොහොමත් උබට මාස ටිකේ විස්තර පෙන්නන්න ඕන නම් මෙච්චර කට්ටක් කන්න ඕනා නෑ.. ඒ ටික hard code කරපන්.

දැන් data fetch කරපන් මෙහෙම..

PHP:

$query = "SELECT value FROM monthly_data WHERE YEAR = '2016'"; $dataRows = mysqli_query($conn, $query); if (mysqli_num_rows($dataRows ) > 0) { while($currentRow = mysqli_fetch_assoc($dataRows)){ $data[] .= $currentRow['value']; } } else { $data[] = "0"; }

දැන් උබට array 2ක් හැදිලා ඇතිනේ database values වලින්.. දැන් ඔව්වා දෙක අර template code එකට සම්බන්ද කරන්න.

PHP:

var salesChartData = { labels : <?php $labels ?>, datasets: [ { label : 'Electronics', fillColor : 'rgb(210, 214, 222)', strokeColor : 'rgb(210, 214, 222)', pointColor : 'rgb(210, 214, 222)', pointStrokeColor : '#c1c7d1', pointHighlightFill : '#fff', pointHighlightStroke: 'rgb(220,220,220)', data : <?php $data ?>, } ] };

වැඩේ ඉවර උනහම මේ වගේ chart එක පෙනේවි උබට.. (එක රැල්ලක් විතරක්. අනික වෙන label type එකක්.)

කෝ දැන් උබ හිතපු තරම් අමාරුද මේක? නෑනේ...

සැයු: මම PHP Code දැම්මේ කම්මැලි කමට නිකන් නෙට් එකෙන් උස්සලා. මේවල statement වැරදි ඇති හොදේ.. උබට idea එකක් ගන්න දැම්මේ.

saja · Jul 8, 2017

මේක තමයි මම මුලින් ම download කලේ ,ඔකේ තමයි මට question එක තිබුනේ data display කරන විදිහ , තැන්ක්ස් මචන් for reply

blackcatcyb said:
https://adminlte.io/
https://adminlte.io/themes/AdminLTE/index2.html

Meka patta template eka. One karana charts okkama wage tiyenawa.

saja · Jul 8, 2017

You have given out too much Reputation in the last 24 hours, try again later.

numeric said:
reference guide ekaknam na machan,math net eke hoyala hoyala thama edit kale,try karapan beri na!

The_Killer · Jul 8, 2017

කොලුවෝ... එක එක චාට් එක ලෝඩ් වෙන්නේ එක එක ඩිව් එකේ තියෙන unique ID එකටයි. තව එකක් ලෝඩ් කරගන්න ඕනා නම් මෙහෙමයි කරන්න ඕනා.

PHP:

// Donut Chart
  var donut = new Morris.Donut({
    element  : 'sales-chart',
    resize   : true,
    colors   : ['#3c8dbc', '#f56954', '#00a65a'],
    data     : [
      { label: 'Download Sales', value: 12 },
      { label: 'In-Store Sales', value: 30 },
      { label: 'Mail-Order Sales', value: 20 }
    ],
    hideHover: 'auto'
  });

මේක ඇවිත් මෙන්න මේ HTML DIV එක යටතේ චාට් එක initialize වෙලා data load වෙන්න තියෙන code එක. දැන් ඔයාට ඒ වගේ තවත් එකක් ගන්න ඕනා නම් මේ විදියට කරන්න.

PHP:

[B]HTML[/B]
Create new element: 
<div class="chart tab-pane" id="sales-chart-2" style="position: relative; height: 300px;"></div>

Notice >> id="sales-chart-2"

කලින් එකේ තිබ්බේ id="sales-chart" හරිද? දැන් මේක unique element එකක්. දැන් බලමු chart එක initialize කරලා data load කරන හැටි...

[B]Inside dashboard.js[/B]

var donut = new Morris.Donut({
    element  : 'sales-chart-2',
    resize   : true,
    colors   : ['#3c8dbc', '#f56954', '#00a65a'],
    data     : [
      { label: 'Custom column 1', value: 20 },
      { label: 'Custom column 2', value: 50 },
      { label: 'Custom column 3', value: 70 }
    ],
    hideHover: 'auto'
  });

 $('.box ul.nav a').on('shown.bs.tab', function () {
    area.redraw();
    donut.redraw();
    elakiridonut.redraw();
    line.redraw();
  });

දැන් පේනවා නේද ඒක දෙකක් කියලා..? ලස්සන ලෝඩ් වෙයි චාට් 2ක.

මෙන්න output එක...

>> jsFiddle Demo <<

shiran987 · Jul 8, 2017

Menna meka balapan,

https://startbootstrap.com/template-overviews/sb-admin-2/

saja · Jul 9, 2017

තැන්කු වේවා :yes:

, වැඩි වැඩියෙන් දැනුම ලැබේවා... ට්‍රය් කරනවා මම

The_Killer said:
කොලුවෝ... එක එක චාට් එක ලෝඩ් වෙන්නේ එක එක ඩිව් එකේ තියෙන unique ID එකටයි. තව එකක් ලෝඩ් කරගන්න ඕනා නම් මෙහෙමයි කරන්න ඕනා.

PHP:

// Donut Chart var donut = new Morris.Donut({ element : 'sales-chart', resize : true, colors : ['#3c8dbc', '#f56954', '#00a65a'], data : [ { label: 'Download Sales', value: 12 }, { label: 'In-Store Sales', value: 30 }, { label: 'Mail-Order Sales', value: 20 } ], hideHover: 'auto' });

මේක ඇවිත් මෙන්න මේ HTML DIV එක යටතේ චාට් එක initialize වෙලා data load වෙන්න තියෙන code එක. දැන් ඔයාට ඒ වගේ තවත් එකක් ගන්න ඕනා නම් මේ විදියට කරන්න.

PHP:

[B]HTML[/B] Create new element: <div class="chart tab-pane" id="sales-chart-2" style="position: relative; height: 300px;"></div> Notice >> id="sales-chart-2" කලින් එකේ තිබ්බේ id="sales-chart" හරිද? දැන් මේක unique element එකක්. දැන් බලමු chart එක initialize කරලා data load කරන හැටි... [B]Inside dashboard.js[/B] var donut = new Morris.Donut({ element : 'sales-chart-2', resize : true, colors : ['#3c8dbc', '#f56954', '#00a65a'], data : [ { label: 'Custom column 1', value: 20 }, { label: 'Custom column 2', value: 50 }, { label: 'Custom column 3', value: 70 } ], hideHover: 'auto' }); $('.box ul.nav a').on('shown.bs.tab', function () { area.redraw(); donut.redraw(); elakiridonut.redraw(); line.redraw(); });

දැන් පේනවා නේද ඒක දෙකක් කියලා..? ලස්සන ලෝඩ් වෙයි චාට් 2ක.

මෙන්න output එක...

>> jsFiddle Demo <<

The_Killer · Jul 9, 2017

saja said:
තැන්කු වේවා , වැඩි වැඩියෙන් දැනුම ලැබේවා... ට්‍රය් කරනවා මම

බය වෙන්න එපා ඔය වගේ template ගත්තහම. පොඩ්ඩක් creative වෙයන් මචන්. තේරෙන්නේ නැත්නම් අනිවාර්යෙන්ම ඒ plugin එකේ documentation එක බලන්න. Template එකක තිබ්බා කියලා plugin එක අමුතුවෙන් වෙනස්කමක් නෑ.

Dashboard Development උදව් ඕනේ: ASP .NET or ASP .NET MVC

Well-known member

Member

Well-known member

Member

Well-known member

Well-known member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads