Så här skapar du nedgraderingar med PHP, MySQL och FusionCharts

Antag att du tittar på ett kolumnschema som visar årliga försäljningsuppgifter för ditt företag, där varje kolumn representerar ett enda år. Om du klickar på en kolumn går du en nivå djup för att se kvartalsdata. Nu om du klickar en gång till kommer du till månadsvisa försäljningsuppgifter.

Vad du gör här borrar ner från årligen till kvartalsvis till månadsdata med hjälp av ett borr ner diagram. Drill-down-diagrammen låter dig klicka på enskilda data-tomter för att avslöja mer detaljer om det (en dataplot avser en kolumn i kolumnschema, rader i ett linjediagram eller pajskivor i ett cirkeldiagram).

Bore diagrammar är mycket användbara i företagsrapporter och analyspaneler. Och i den här handledningen kommer jag att täcka steg-för-steg-processen för att skapa ett nedgraderingsschema med FusionCharts JavaScript-kartbibliotek. Vi ska hämta de data som finns i en MySQL-databas med PHP, och använd sedan FusionCharts kärnbibliotek och dess PHP-diagram wrapper för att plotta vårt diagram.

Här är vad vi gör idag: (du kan se live version här eller ladda ner källkoden med den här länken).

Det är ett 2D kolumnschema med två nivåer borr ned. Första nivån innehåller årliga försäljningsdata för 6 år. Om du klickar på något år kan du se kvartalsdata för det aktuella året (andra nivån).

Jag har delat hela processen i sju steg:

• 1: Inklusive JavaScript-filer och PHP-omslag
• 2: Initiera och validera DB-anslutning
• 3: Hämtar data med hjälp av SQL-fråga
• 4: Konvertera sökresultatet till JSON
• 5: Upprepa steg -3 och 4 för varje drill-down nivå
• 6: Skapa diagraminstans och stänga DB-anslutning

1. Inklusive JavaScript-filer och PHP Wrapper

För att göra diagram i detta projekt behöver vi både FusionCharts 'core JS-bibliotek och dess PHP-wrapper:

• FusionCharts JavaScript-bibliotek - fusioncharts.js - kommer att inkluderas med hjälp av HTML

  2. Initiering och validering av DB-anslutning

  När vi har inkluderat alla beroenden måste vi initiera anslutningen med vår databas för att hämta data för diagrammet.

  Så här inleder och validerar vi databasanslutning i PHP:

  connect_error) exit ("Det uppstod ett fel med din anslutning:". $ dbhandle-> connect_error); ?>

  För att upprätta anslutningen med MySQL-databasen bör dessa fyra parametrar anges:

  • Adress på servern där databasen är installerad. I vårt fall är detlokal värd.
  • Användarnamn att ansluta till databasen. Standardvärdet är rot.
  • Lösenord för det användarnamnet.
  • Namn på databasen under vilken tabellen skapas.

  $ dbhandle etablerar anslutning till databasen. Jag har inkluderat dummyvärden i ovanstående kodbit, och du måste ersätta värden för $ hostdb, $ userdb, $ passdb, och $ namedb med faktiska värden för din databas.

  3. Hämta data med SQL Query

  När anslutningen med MySQL-databasen har upprättats kan vi använda SQL-förfrågan nedan för att hämta data för vårt diagram:

  // SQL-fråga för moderkortet $ strQuery = "SELECT Year, Sales FROM yearly_sales"; // Utför frågan, annars returnera felmeddelandet $ result = $ dbhandle-> query ($ strQuery) eller avsluta ("Felkod ($ dbhandle-> errno): $ dbhandle-> error");

  Om fråga ($ strQuery) körs framgångsrikt, data kommer att fyllas i $ result.

  4. Konvertera sökresultatet till JSON

  Om du följde alla ovanstående steg korrekt tills nu, borde du ha hämtat data från förfrågan i $ result variabel.

  För att skapa JSON-data i korrekt format skapar vi en associativ array - $ arrData - och tryck på alla diagramkonfigurationsattribut och data i den som visas i koden nedan:

  // om frågan returnerar ett giltigt svar, förbereder JSON-arrayen. om ($ resultat) // '$ arrData' innehåller diagrammen alternativ och data. $ arrData = array ("chart" => array ("caption" => "YoY-försäljningen - KFC", "xAxisName" => "Year", // andra diagramattribut)); // skapa en matris för parent-chart $ arrData ["data"] = array (); // tryck data i array medan ($ row = mysqli_fetch_array ($ result)) array_push ($ arrData ["data"], array ("label" => $ row ["Year"], "value" => $ rad ["Försäljning"], "länk" => "newchart-json-". $ Rad ["År"])); 

  Denna kod innehåller JSON-data för moderkortet. De länk Attribut i JSON-data hänvisar till nästa diagram som ska göras, efter att ha klickat på enskild dataplot. För en mer detaljerad beskrivning kan du besöka den här officiella dokumentationssidan.

  5. Repeterande steg-3 & 4 för varje borr ner nivå

  För att borra ner till nästa nivå måste vi hämta data igen med hjälp av variabeln $ resultQuarterly från respektive databastabell (kvartalsvisa försäljningar). Detta liknar vad vi gjorde i steg 3. Koden för samma visas nedan:

  $ strQuarterly = "SELECT Kvartal, Försäljning, År FRÅN quarterly_sales WHERE 1"; $ resultQuarterly = $ dbhandle-> query ($ strQuarterly) eller exit ("Felkod ($ dbhandle-> errno): $ dbhandle-> error");

  Den associativa gruppen $ arrData bifogas med barndiagramdata för varje parent-data-tomt, men här kommer uppgifterna under länkad data . Koden för detta visas nedan med relaterade kommentarer:

  // linkeddata ansvarar för att mata data och kartlägga alternativ till barnscheman. $ arrData ["linkeddata"] = array (); $ i = 0; om ($ resultQuarterly) while ($ row = mysqli_fetch_array ($ resultQuarterly)) $ year = $ row ['Year']; om isset ($ arrData ["linkeddata"] [$ i - 1]) && $ arrData ["linkeddata"] [$ i - 1] ["id"] == $ år) array_push ($ arrData ["linkeddata "] [$ i - 1] [" linkedchart "] [" data "], array (" label "=> $ rad [" Quarter "]," value "=> $ rad [" Försäljning "]));  array_push ($ arrData ["linkeddata"], array ("id" => "$ år", "linkedchart" => array ("diagram" => array ("caption" => "QoQ Försäljning - KFC för $ "," xAxisName "=>" Quarter "," yAxisName "=>" Försäljning "," paletteColors "=>" # D5555C "," baseFont "=>" Öppna Sans " ), "data" => array (array ("label" => $ row ["Quarter"], "value" => $ rad ["Försäljning"])))))); $ I ++; 

  Nu har vi vår associativa array redo med data i variabeln $ arrData och äntligen kodar vi matrisen i vårt JSON-format med json_encode () metod. Variabeln $ jsonEncodedData Håller data för diagrammet med en nedrullningsfunktion.

  $ jsonEncodedData = json_encode ($ arrData);

  6. Skapa diagraminstans och avsluta DB-anslutning

  En HTML

  passar bäst som en behållare till vårt diagram och här är hur vi förklarar det:

  Fantastisk bild på väg!

  Som nästa steg kommer vi att skapa diagraminstans och överföra diagramtypen, dess dimensioner, container-ID och andra detaljer för att göra diagrammet. Här är mallen för att skapa FusionCharts-instans:

  // Syntax för förekomsten - nya FusionCharts ("diagramtyp", "diagram id", "diagrambredd", "diagramhöjd", "div id att göra diagrammet", "typ av data", "faktiska data")

  Här är koden för att skapa FusionCharts-instans (med ovanstående mall), gör diagrammet och slutligen stänga databasanslutningen:

  // Skapa FusionCharts Instance $ columnChart = nya FusionCharts ("column2d", "myFirstChart", 600, 300, "linked-chart", "json", "$ jsonEncodedData"); // FusionCharts Render Method $ columnChart-> render (); // Rendermetod // Slutför databasanslutning $ dbhandle-> close ();

  Att göra dina diagram ser bättre ut

  Om du hämtade källkoden för det här projektet måste du ha märkt några parametrar under Diagram array som vi inte diskuterade ovan. Dessa parametrar kontrollerar utseende och funktionalitet i ett diagram och kallas formellt som diagramattribut.

  Här är några förklaringar på några viktiga attribut som jag har använt i min kod:

  • canvasBgColor och bgcolor: Du kan använda dessa två attribut för att styra bakgrundsfärgen på ditt diagrams duk och dess behållare.
  • basefont: Du kan använda det här attributet för att ange teckensnittsfamiljen för diagrammet. Du är inte begränsad till bara systemfonter, men du kan lägga till alla teckensnitt. Om du vill använda en anpassad typsnitt ska du inkludera källfilen för den fonten i HTML och ställa in den med hjälp av basefont attribut. Vårt exempel använder Open Sans från Google Fonts.
  • plotToolText: Att visa ytterligare information om svävar är ett bra sätt att förbättra data med erfarenhet och det är här plotToolText kommer in i bilden. Det låter dig anpassa verktygstipset för diagrammet. Du kan använda HTML -
    och anpassad CSS för att ställa in ditt verktygstips med det här attributet.
  • tema: Detta attribut hjälper dig att behålla en konsekvent design över alla dina diagram. Du kan definiera ett diagrams kosmetika i en fil och inkludera det med tema Attribut att ha en gemensam design för alla dina diagram. Du kan lära dig mer om det på denna temapersonals dokumentationssida.

  Det finns hundratals attribut som du kan använda för att anpassa ditt diagram och det är praktiskt taget omöjligt att beskriva allt i det här inlägget. Så ovanför har jag bara listat några viktiga, och för mer information kan du besöka sidan Siddiagram för 2D kolumndiagram.

  Fler resurser

  Jag försökte täcka allt i detalj ovan, men du är tvungen att möta utmaningar när du försöker göra det själv eller vill ta det här konceptet vidare. Så att hjälpa dig på din resa, här är några viktiga resurser:

  • Dokumentation: För att lära dig mer om borra ner diagram och dess genomförande, besök den officiella utvecklaren center sidan.
  • PHP wrapper: Om du vill veta mer om vad som är möjligt med FusionCharts wrapper, kan du utforska deras PHP-diagrams sida. Den innehåller många levande exempel med fullständig kod.

  Skriv gärna dina frågor / feedback / förslag i kommentarfältet nedan. Alltid gärna chatta och hjälp!

  Koda