Привязка таблицы данных к диаграммам Google - PullRequest
Новая
       1

Привязка таблицы данных к диаграммам Google

1 голос
/ 05 марта 2012

Я должен использовать диаграммы Google в своем проекте.Я должен реализовать c # и asp .net для этого, однако я также пробовал java-скрипт, но вывод не тот, для которого я предназначался.Кто-нибудь может мне помочь с этим?

Ответы [ 3 ]

1 голос
/ 10 апреля 2013

Да, вы можете использовать Google Chart, используя C #: 

 string strCon2=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

 SqlConnection con2 = new SqlConnection(strCon2);

 SqlDataAdapter da = new SqlDataAdapter("SELECT result,date_time FROM read_master  WHERE user_id =" + Session["user_id"]+"ORDER BY date_time ASC", con2);

 DataTable dt = new DataTable();
 try
 {

     da.Fill(dt);

     //data.addColumn('string'(datatype), 'Year'(columnname according to the sql table));
     //data.addColumn('number'(datatype), 'Sales'(columnname according to the sql table));
     //data.addColumn('date'(datatype), 'Date'(columnname according to the sql table));

     str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});  //You can replace "corechart" to any other package of Google charts like For "Google Table" use "table"

     google.setOnLoadCallback(drawLineChart);
     function drawLineChart() {
         var data = new google.visualization.DataTable();

         data.addColumn('date', 'Date Time');
         data.addColumn('number', 'Result');

         data.addRows(" + dt.Rows.Count + ");");

         Int32 i=0;
         //here i am using for loop to fetch multiple recorod from the database

         for (i = 0; i <= dt.Rows.Count - 1; i++)
         {

             str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["result"].ToString() + ");");

             DateTime cDate = DateTime.ParseExact(dt.Rows[i]["date_time"].ToString(), "dd-MM-yyyy tt hh:mm:ss", CultureInfo.InvariantCulture);

             str.Append(" data.setValue(" + i + "," + 0 + ",new Date(" + cDate.Year.ToString() + "," + (cDate.Month-1).ToString() + "," + cDate.Day.ToString() + "," + cDate.Hour.ToString() + "," + cDate.Minute.ToString() + "," + cDate.Second.ToString() + "));");
         }

         // To display LineChart in your project use "google.visualization.'LineChart'". 
         // And to display PieChart or Google DataTable, change to
         // "google.visualization.'Piechart'" or "'google.visualization.'Table'" accordingly.

         str.Append("   var chart = new google.visualization.LineChart(document.getElementById('LineChartDiv'));");
         // in the below line you can set width height of the chart according to your need
         str.Append(" chart.draw(data, {width: 1200, height: 500, title: 'Your Glucodata',");
         //  str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
         str.Append("vAxis: {title: 'Result', titleTextStyle: {color: 'green'}}");
         str.Append(",hAxis: {format: 'dd MMM,yyyy'}");
         str.Append("}); }");
         str.Append("</script>");
         ltLineChart.Text = str.ToString().TrimEnd(',').Replace('*', '"');
         con2.Close();
     }
0 голосов
/ 05 марта 2012

Здесь полно замечательных учебников:

http://code.google.com/intl/es-ES/apis/chart/

В нем действительно полно кода о том, как заставить работать Google-чарты.По сути, вам нужно динамически создать данные для вызова API с вашими данными.

Давайте рассмотрим пример Google-Charts: 

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006', 660, 1120],
          ['2007', 1030, 540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

При этом вам просто нужно использовать цикл For с ASP / C # / ... для создания данных в data.addRows()

Если мы имеем дело с C #, я бы предложил использовать это: http://code.google.com/p/googlechartsharp/

Вот вам базовый пример: 

using GoogleChartSharp;

int[] data = new int[] { 0, 10, 20, 30, 40 };
LineChart chart = new LineChart(150, 150);
chart.SetData(data);
string url = chart.GetUrl();

Однако, и поскольку вы настаиваете на том, как предоставлять данные, я боюсь, что вы собираетесь создать свой собственный алгоритм дляпредоставить данные (нужно просто заполнить вектор нужными значениями)

0 голосов
/ 05 марта 2012

Чтобы использовать Google Chart, вам нужно использовать ajax call, чтобы получить данные из данных и связать их там в aspx файле

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...