PlotSet LogoPlotSet

How to Create an Online Calculator

A step by step walkthrough for turning a spreadsheet of questions into a published, embeddable calculator in PlotSet, with a formula that computes a result from visitors' answers.

Etwa 10 Minuten

A short sequence of questions followed by a computed result, such as a score, an estimate or a recommendation, ready to embed on your page: that is what you will have. Each row of a spreadsheet becomes one question, and a formula you write turns the answers into a number.

Expect about ten minutes. Most of it is deciding the questions and the formula, since the template does the rest. Test it with a few known inputs before you publish.

Die Daten, die Sie brauchen

One row per question with a question text and type, then optional answer options, a default answer, help text, an image URL and extra numeric columns such as a weight.

Beispiel-CSV
question_textquestion_typeanswers_rawfallback_valuecontext_textimageweight_co2
How many miles do you drive per week?number50Include commuting and errands0.4
How often do you fly each year?slider"0101"2Return trips count as two250
What is your diet?dropdownVegan|Vegetarian|Mixed|Meat heavyMixed1
How many people live in your home?rating52
Hinweise

Question type must be one of text, number, dropdown, date, rating, slider or buttons. Anything else becomes a text box.

For dropdown and buttons, separate options with a pipe. Use label=value to store a value different from the label.

For rating, give the number of icons. For slider, give min,max,step, such as 0,10,1.

Extra numeric columns, such as a weight, are available in the formula as q1_weight, named by question number and column header.

Die Schritte

Der genaue Klickpfad in PlotSet, von einer leeren Vorlage bis zum fertigen Diagramm.

  1. 01

    Open the Calculator template

    From the PlotSet dashboard, start a new project and choose Calculator from the Other category. It loads with an eight-question sample so you can see every question type working.

    Die Vorlagenauswahl von PlotSet: links die Liste der Diagrammkategorien, daneben das geöffnete Raster "Bar Charts" und die Vorlagenkarte "Bar Chart" mit ihrer Schaltfläche "Select".
    Jede Anleitung beginnt hier. Wählen Sie erst die Kategorie, dann die Vorlage. Das Raster ist für jeden Diagrammtyp dasselbe.
  2. 02

    Write your questions

    Give each question a prompt and a type, then add options, a sensible default and a line of help text where it helps. Keep each question short and answerable in one move.

  3. 03

    Upload the file, or connect it live

    Import a CSV or .xlsx file from the data panel, paste rows from a spreadsheet, or connect a Google Sheet so changes to the questions flow through. The first row is read as the headers.

    Die Datenansicht im PlotSet-Editor: ein Tabellenraster mit den Spalten "Name", "Value" und "Region", gefüllt mit Zahlen zu kanadischen Provinzen, daneben der Bereich "Data" mit "Upload CSV File", "Magic Import" und der Synchronisierung über "Google Sheet".
    Die Datenansicht, hier in einem Balkendiagramm-Projekt. Laden Sie über "Upload CSV File" eine CSV-Datei hoch, holen Sie die Zahlen mit "Magic Import" aus einem Bild oder verbinden Sie ein Google Sheet. Der Bereich sieht bei jedem Diagrammtyp gleich aus.
  4. 04

    Check the column bindings

    Confirm which column is the question text, type, options, default, help text, image and extra data. This is usually right automatically when the headers are clear.

    Der Datenbereich von PlotSet mit hervorgehobenen Spaltenzuordnungen: "Label/time" auf Spalte A, "Values" auf Spalte B und "Filter/color" auf Spalte C, darunter die Schaltfläche "Auto Binding".
    Die Zuordnungen legen fest, welche Spalte zur Beschriftung wird, welche die Werte liefert und welche die Farbe steuert. "Auto Binding" errät sie anhand Ihrer Spaltenüberschriften. Prüfen Sie das Ergebnis, statt sich darauf zu verlassen.
  5. 05

    Write the result formula

    Open the Submit and result tab. In the variables box add one name equals expression line per value, referring to answers as q1, q2 and so on. Then write the result text and put the names in double curly brackets.

    Der PlotSet-Editor im Tab "Preview": ein fertiges Diagramm vom Typ "Calculator" auf der Arbeitsfläche und der rot umrandete Einstellungsbereich am rechten Rand.
    Der Tab "Preview" für ein Diagramm vom Typ "Calculator". Alle Gestaltungsoptionen stecken im umrandeten Bereich: Aussehen, Kopfzeile, Fußzeile und die Optionen, die es speziell für diesen Diagrammtyp gibt, jeweils in einem eigenen Tab.
  6. 06

    Choose the flow

    In the Flow and design tab, show one question at a time with Back and Next buttons, or all questions on one page. Style the card, buttons and inputs to match your site.

  7. 07

    Style the question types

    The Question types tab styles each control separately: text and number inputs, dropdowns, rating icons, sliders and button groups.

  8. 08

    Test it, then publish

    Answer every question with known values and check the result against a hand calculation. Then publish and copy the embed code from the Share dialog.

    Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Share" direkt neben der Schaltfläche "Export".
    Über "Share" werden aus dem fertigen Diagramm ein öffentlicher Link und ein Einbettungscode.

Starten Sie mit der Calculator-Vorlage samt bereits geladenen Beispieldaten und ersetzen Sie diese durch Ihre eigenen.

Vorlage öffnen

Veröffentlichen, einbetten oder exportieren

Der letzte Abschnitt ist bei jedem Diagrammtyp gleich: "Share" macht aus dem Diagramm einen öffentlichen Live-Link und einen Einbettungscode, "Export" schreibt es als statische Datei heraus.

"Share": öffentlicher Link und Einbettungscode

Aktivieren Sie den Einbettungscode und den öffentlichen Link, um das Diagramm zu veröffentlichen. Den Link können Sie bedenkenlos an alle weitergeben, und der Einbettungscode fügt sich als iframe in jede Seite ein. Die Tooltips beim Überfahren mit der Maus und die volle Interaktivität bleiben erhalten. Wenn Sie das Diagramm später bearbeiten, überträgt "Recreate" die Änderungen auf Link und Einbettung.

Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Share" direkt neben der Schaltfläche "Export".
Über "Share" werden aus dem fertigen Diagramm ein öffentlicher Link und ein Einbettungscode.
Der Dialog "Share" von PlotSet: der Schalter, der den Einbettungscode und den öffentlichen Link aktiviert, die Schaltflächen "Link", "Embed", "Facebook", "Reddit", "Twitter", "LinkedIn" und "Email" sowie der öffentliche Diagrammlink mit der Schaltfläche "Copy".
Aktivieren Sie den Einbettungscode und den öffentlichen Link, kopieren Sie dann den Link oder den iframe-Code. Mit "Recreate" erreichen spätere Änderungen alle, die den Link bereits haben.

"Export": SVG, PNG oder JPG

"Export" schreibt eine statische Kopie in der Größe heraus, die Sie brauchen. SVG bleibt in jeder Skalierung scharf und lässt sich weiterhin in einem Design-Tool bearbeiten; PNG und JPG sind die sichere Wahl für Folien und Dokumente. Der Skalierungsfaktor sorgt dafür, dass das Bild auf einem Retina-Display gestochen scharf wirkt.

Die Werkzeugleiste des PlotSet-Editors mit der hervorgehobenen Schaltfläche "Export".
Über "Export" bekommen Sie eine statische Datei für eine Folie oder einen Bericht.
Der Dialog "Export chart" von PlotSet: die Skalierungsauswahl auf 2x, die Felder für Breite und Höhe mit 1000 mal 600 und das geöffnete Formatmenü mit "SVG", "PNG" und "JPG".
SVG bleibt in jeder Größe scharf und im Design-Tool bearbeitbar; PNG und JPG sind die sichere Wahl für eine Präsentation. Stellen Sie die Skalierung vor dem Export ein, damit das Bild auf einem Retina-Display gestochen scharf ist.

Styling-Tipps für Calculator

Test with round numbers

Use inputs whose answer you can work out in your head, so a wrong formula is obvious.

Give honest defaults

An untouched question uses its default, so pick the most common answer rather than zero.

Name your variables

Build the result in named steps, such as driving, flights and total, so the formula stays readable.

Format the result

Use the Number and date format tab to set prefixes, suffixes and decimals so the result reads as a cost, a percentage or a weight.

Häufige Fehler bei Calculator

The result shows zero

A line in the formula is probably malformed, and a bad line silently evaluates to zero. Check the spelling of each name and bracket.

A question appears as a text box

The type was misspelled or missing, so it fell back to text. Check it matches one of the seven types exactly.

The numbers shifted after reordering

Formulas use q1, q2 and so on by sheet order. If you move rows, update the formula.

The exported image does not match the live chart

The static export redraws the current state approximately. Use the live embed for the real experience.

Mehr über Calculator erfahren

Nicht sicher, ob Calculator die richtige Wahl ist? Erfahren Sie, was es ist, wann Sie es verwenden sollten und wann nicht.

Über Calculator

Calculator: häufige Fragen

A question text and a question type for each row. Options, defaults, help text, an image and extra numeric columns are optional.

Jetzt Calculator erstellen

Kostenlos starten mit über 300 Vorlagen. Keine Kreditkarte erforderlich.