Grafikk
Google
Børre Stenseth
Moduler>Grafikk>Histogram>Googlegraf

Grafer og formler

Hva
screen
Grafer og formeler produsert av Google

I denne modulen skal vi se litt nærmere på hvordan vi kan bruke Googles tjenester for å lage grafer og formler, GoogleChart [1] . Detaljer om denne tjenesten finnes på Google Chart Features [2] og Mathematical (TeX) Formulas [3] .

Webpresentasjon

Googles tjeneste fungerer i korthet slik at vi sender med parametere til URL, http://chart.apis.google.com/chart, og får tilbake et bilde. Hvilke parametere vi sender er da selvsagt avhengig av hva vi ønsker tilbake. Vi kan velge mellom en rekke kurveformer, og altså formler.

Et eksempel (brukket om for lesbarhet) kan se slik ut

<img 
src="http://chart.apis.google.com/chart?
    chxl=0:|J|F|M|A|M|J|J|A|S|O|N|D|1:|-20|-15|-10|-5|0|5|10|15|20|25|30|2:|&amp;
	chxt=x,y,r&amp;
	chs=500x250&amp;
	cht=bvg&amp;
	chco=76A4FB,FB76A4&amp;
	chd=t:-3.00,-8.90,-6.00,7.10,14.80,16.50,19.30,17.60,13.10,6.00,1.40,-4.10|
	     -10.80,-13.30,-3.70,6.00,12.40,18.20,18.00,17.50,13.30,7.00,0.70,1.20&amp;
	chg=0,20,0,0,0,0&amp;
	chds=-20,30&amp;
	chtt=Temperaturer&amp;
	chbh=a,1,6&amp;
	chdl=Moskva 2005|Moskva 2006" 
alt="failed" />

og resultatet blir slik:

failed

Dette åpner for at vi lager en enkel applikasjon med en webcontrol og legger in HTML-innhold som henter et bilde fra Google.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace simpleGraph
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            webBrowser1.DocumentText = Properties.Resources.page1;
        }
        private void button2_Click(object sender, EventArgs e)
        {
            webBrowser1.DocumentText = Properties.Resources.page2;
        }
    }
}

De to HTML-filene som brukes er lagt inn som ressurser og ser slik ut: (se på kildekoden)

page1.html
page2.html

Lese direkte

Vi kan gjøre dette enklere, uten en webcontrol. Koden nedenfor er en koplett kildekode som henter en graf og legger den ut i en PictureBox:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Net;
using System.Windows.Forms;
namespace readgoogle
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            // connection
            WebClient loader = new WebClient();
            // temporary file
            String filename = "myimage.png";
            try
            {
                // set query parameters
                loader.QueryString.Add("chl", "I|II|III|IV|V|VI");
                loader.QueryString.Add("chs", "300x300");
                loader.QueryString.Add("cht", "p");
                loader.QueryString.Add("chco", "BBBB00,BB0000");
                loader.QueryString.Add("chds", "0,1000");
                loader.QueryString.Add("chd", "t:57,119,318,637,532,315");
                loader.QueryString.Add("chtt", "Terningkast for viner");
                // download to file
                loader.DownloadFile("http://chart.apis.google.com/chart",
                    filename);
                // show it
                pictureBox1.Image = Image.FromFile(filename);
                textBox1.Text = filename + " is loaded";
            }
            catch (Exception ex)
            {
                textBox1.Text = ex.Message;
            }
         }
    }
}
Referanser
  1. Google ChartsGooglecode.google.com/apis/chart/14-12-2010
  1. Google Chart FeaturesGooglecode.google.com/apis/chart/docs/chart_params.html14-12-2010
  1. Mathematical (TeX) FormulasGooglecode.google.com/apis/chart/infographics/docs/formulas.html28-11-2011
  • Prosjekt webpresentasjon:
    https://svn.hiof.no/svn/psource/Csharpspikes/googletoweb
  • Prosjekt direkte som bilde:
    https://svn.hiof.no/svn/psource/Csharpspikes/googledirect
Vedlikehold

B. Stenseth, mars 2011

(Velkommen) Moduler>Grafikk>Histogram>Googlegraf (Norgeskart)