Category Archives: Javascript

How to create JavaScript Charts in PHP | examples | videos

  • PHP charting components are server-side charting libraries that generate only static images of charts and gauges, without any interactivity. To generate interactive JavaScript charts, gauges and maps, use FusionCharts Suite XT.
  • FusionCharts Suite XT is essentially a JavaScript library which combines HTML and JavaScript for chart rendering and accepts data in XML or JSON formats.

Example 1: Creating a simple column chart :

Source Code in PHP :

// This is a simple example on how to draw a chart using FusionCharts and PHP.</span>
<span class="com">// We have included includes/fusioncharts.php, which contains functions</span>
<span class="com">// to help us easily embed the charts.</span><span class="pln">
	include</span><span class="pun">(</span><span class="str">"includes/fusioncharts.php"</span><span class="pun">);</span>
<span class="pun">?></span>
<span class="pun"><?</span><span class="pln">php
	 </span><span class="com">// Create the chart - Column 2D Chart with data given in constructor parameter</span>
	 <span class="com">// Syntax for the constructor - new FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data")</span><span class="pln">
	 $columnChart </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"Column2D"</span><span class="pun">,</span> <span class="str">"myFirstChart"</span> <span class="pun">,</span> <span class="lit">600</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-1"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span> <span class="str">'{"chart":{"caption":"Monthly revenue for last year","subCaption":"Harry\'s SuperMart","xAxisName":"Month","yAxisName":"Revenues (In USD)","numberPrefix":"$","paletteColors":"#0075c2","bgColor":"#ffffff", "borderAlpha": "20", "canvasBorderAlpha": "0", "usePlotGradientColor":"0", "plotBorderAlpha":"10", "placeValuesInside": "1", "rotatevalues": "1", "valueFontColor": "#ffffff", "showXAxisLine": "1", "xAxisLineColor": "#999999", "divlineColor": "#999999", "divLineIsDashed": "1", "showAlternateHGridColor":"0", "subcaptionFontSize":"14", "subcaptionFontBold":"0" },"data":[{"label":"Jan","value":"420000"},{"label":"Feb","value":"810000"},{"label":"Mar","value":"720000"},{"label":"Apr","value":"550000"},{"label":"May","value":"910000"},{"label":"Jun","value":"510000"},{"label":"Jul","value":"680000"}, {"label":"Aug","value":"620000"}, {"label":"Sep","value":"610000"}, {"label":"Oct","value":"490000"}, {"label":"Nov","value":"900000"}, {"label":"Dec","value":"730000"}]}'</span><span class="pun">);</span>
	 <span class="com">// Render the chart</span><span class="pln">
	 $columnChart</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();</span>
<span class="pun">?></span>
<span class="tag"><div</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"chart-1"</span><span class="tag">></span><span class="com"><!-- Fusion Charts will render here--></span><span class="tag"></div>

Example 2: Creating gauges or widgets for dashboards :

Source Code in PHP :

$angulargauge </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"angulargauge"</span><span class="pun">,</span> <span class="str">"angular"</span> <span class="pun">,</span> <span class="lit">400</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-1"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span> <span class="str">'{"chart":{"caption":"Customer Satisfaction Score","subcaption":"Last week","lowerLimit":"0","upperLimit":"100","lowerLimitDisplay":"Bad","upperLimitDisplay":"Good","showValue":"1","valueBelowPivot":"1","theme":"fint"},"colorRange":{"color":[{"minValue":"0","maxValue":"50","code":"#e44a00"},{"minValue":"50","maxValue":"75","code":"#f8bd19"},{"minValue":"75","maxValue":"100","code":"#6baa01"}]},"dials":{"dial":[{"value":"67"}]}}'</span><span class="pun">);</span>
	<span class="com">// Render the chart</span><span class="pln">
	$angulargauge</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();</span><span class="pln">

	$cylinder </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"cylinder"</span><span class="pun">,</span> <span class="str">"cylinder"</span> <span class="pun">,</span> <span class="lit">400</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-2"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span> <span class="str">'{"chart":{"theme":"fint","caption":"Diesel Level in Generator","subcaption":"Bakersfield Central","lowerLimit":"0","upperLimit":"120","lowerLimitDisplay":"Empty","upperLimitDisplay":"Full","numberSuffix":" ltrs","showValue":"0","chartBottomMargin":"45"},"value":"110","annotations":{"origw":"400","origh":"190","autoscale":"1","groups":[{"id":"range","items":[{"id":"rangeBg","type":"rectangle","x":"$canvasCenterX-45","y":"$chartEndY-30","tox":"$canvasCenterX +45","toy":"$chartEndY-75","fillcolor":"#6caa03"},{"id":"rangeText","type":"Text","fontSize":"11","fillcolor":"#333333","text":"80 ltrs","x":"$chartCenterX-45","y":"$chartEndY-50"}]}]}}'</span><span class="pun">);</span>
	<span class="com">// Render the chart</span><span class="pln">
	$cylinder</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();</span><span class="pln">

	$thermometer </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"thermometer"</span><span class="pun">,</span> <span class="str">"thermometer"</span> <span class="pun">,</span> <span class="lit">400</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-3"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span> <span class="str">'{"chart":{"caption":"Temperature Monitor","subcaption":" Central cold store","lowerLimit":"-10","upperLimit":"0","decimals":"1","numberSuffix":"°C","showhovereffect":"1","thmFillColor":"#008ee4","showGaugeBorder":"1","gaugeBorderColor":"#008ee4","gaugeBorderThickness":"2","gaugeBorderAlpha":"30","thmOriginX":"100","chartBottomMargin":"20","valueFontColor":"#000000","theme":"fint"},"value":"-6","annotations":{"showbelow":"0","groups":[{"id":"indicator","items":[{"id":"background","type":"rectangle","alpha":"50","fillColor":"#AABBCC","x":"$gaugeEndX-40","tox":"$gaugeEndX","y":"$gaugeEndY+54","toy":"$gaugeEndY+72"}]}]}}'</span><span class="pun">);</span>
	<span class="com">// Render the chart</span><span class="pln">
	$thermometer</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();</span><span class="pln">

	$vled </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"vled"</span><span class="pun">,</span> <span class="str">"vled"</span> <span class="pun">,</span> <span class="lit">400</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-4"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span> <span class="str">'{"chart":{"caption":"Fuel Level Indicator","lowerLimit":"0","upperLimit":"100","lowerLimitDisplay":"Empty","upperLimitDisplay":"Full","numberSuffix":"%","valueFontSize":"12","showhovereffect":"1","origW":"400","origH":"150","ledSize":"3","ledGap":"2","manageResize":"1","theme":"fint"},"annotations":{"showbelow":"1","groups":[{"id":"indicator","items":[{"id":"bgRectAngle","type":"rectangle","alpha":"90","radius":"1","fillColor":"#6baa01","x":"$gaugeCenterX - 20","tox":"$gaugeCenterX + 20","y":"$gaugeEndY + 25","toy":"$gaugeEndY + 45"}]}]},"colorRange":{"color":[{"minValue":"0","maxValue":"45","code":"#e44a00"},{"minValue":"45","maxValue":"75","code":"#f8bd19"},{"minValue":"75","maxValue":"100","code":"#6baa01"}]},"value":"92"}'</span><span class="pun">);</span>
	<span class="com">// Render the chart</span><span class="pln">
	$vled</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();

Example 3: Creating a simple pie chart :

Source Code in PHP :

<?<span class="pln">php

	</span><span class="com">/*
	For Pie 2D chart, the JSON data should follow the structure
	{
		chart : {
			// Contains chart attributes like color, label, caption,
			// background color etc. To know more about these attributes
			// refer http:docs.fusioncharts.com/tutorial-attr-pie2d.html
		},
		data : [{
			// contains label and value for plot 1
		}, {
			// contains label and value for plot 2
		}]
	}
	*/</span>

	<span class="com">// First we declare chart attributes</span><span class="pln">
	$arrData </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span>
		<span class="str">"chart"</span> <span class="pun">=></span><span class="pln"> array</span><span class="pun">(</span>
			<span class="str">"caption"</span> <span class="pun">=></span> <span class="str">"Split of Visitors by Age Group"</span><span class="pun">,</span>
			<span class="str">"subCaption"</span> <span class="pun">=></span> <span class="str">"Last year"</span><span class="pun">,</span>
			<span class="str">"paletteColors"</span> <span class="pun">=></span> <span class="str">"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000"</span><span class="pun">,</span>
			<span class="str">"bgColor"</span> <span class="pun">=></span> <span class="str">"#ffffff"</span><span class="pun">,</span>
			<span class="str">"showBorder"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"use3DLighting"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"showShadow"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"enableSmartLabels"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"startingAngle"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"showPercentValues"</span> <span class="pun">=></span> <span class="str">"1"</span><span class="pun">,</span>
			<span class="str">"showPercentInTooltip"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"decimals"</span> <span class="pun">=></span> <span class="str">"1"</span><span class="pun">,</span>
			<span class="str">"captionFontSize"</span> <span class="pun">=></span> <span class="str">"14"</span><span class="pun">,</span>
			<span class="str">"subcaptionFontSize"</span> <span class="pun">=></span> <span class="str">"14"</span><span class="pun">,</span>
			<span class="str">"subcaptionFontBold"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"toolTipColor"</span> <span class="pun">=></span> <span class="str">"#ffffff"</span><span class="pun">,</span>
			<span class="str">"toolTipBorderThickness"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"toolTipBgColor"</span> <span class="pun">=></span> <span class="str">"#000000"</span><span class="pun">,</span>
			<span class="str">"toolTipBgAlpha"</span> <span class="pun">=></span> <span class="str">"80"</span><span class="pun">,</span>
			<span class="str">"toolTipBorderRadius"</span> <span class="pun">=></span> <span class="str">"2"</span><span class="pun">,</span>
			<span class="str">"toolTipPadding"</span> <span class="pun">=></span> <span class="str">"5"</span><span class="pun">,</span>
			<span class="str">"showHoverEffect"</span> <span class="pun">=></span> <span class="str">"1"</span><span class="pun">,</span>
			<span class="str">"showLegend"</span> <span class="pun">=></span> <span class="str">"1"</span><span class="pun">,</span>
			<span class="str">"legendBgColor"</span> <span class="pun">=></span> <span class="str">"#ffffff"</span><span class="pun">,</span>
			<span class="str">"legendBorderAlpha"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"legendShadow"</span> <span class="pun">=></span> <span class="str">"0"</span><span class="pun">,</span>
			<span class="str">"legendItemFontSize"</span> <span class="pun">=></span> <span class="str">"10"</span><span class="pun">,</span>
			<span class="str">"legendItemFontColor"</span> <span class="pun">=></span> <span class="str">"#666666"</span><span class="pun">,</span>
			<span class="str">"useDataPlotColorForLabels"</span> <span class="pun">=></span> <span class="str">"1"</span>
		<span class="pun">)</span>
	<span class="pun">);</span>

	<span class="com">// Our actual data can be in key-value form</span><span class="pln">
	$actualData </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span>
		<span class="str">"Teenage"</span> <span class="pun">=></span> <span class="lit">1250400</span><span class="pun">,</span>
		<span class="str">"Adult"</span> <span class="pun">=></span> <span class="lit">1463300</span><span class="pun">,</span>
		<span class="str">"Mid-age"</span> <span class="pun">=></span> <span class="lit">1050700</span><span class="pun">,</span>
		<span class="str">"Senior"</span> <span class="pun">=></span> <span class="lit">491000</span>
	<span class="pun">);</span>

	<span class="com">// Now we need to convert it to FusionCharts consumable form.</span>
	<span class="com">// Our data will be an array. So, let's declare it.</span><span class="pln">
	$arrData</span><span class="pun">[</span><span class="str">'data'</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> array</span><span class="pun">();</span>

	<span class="com">// Loop over actual data and insert it in data array.</span>
	<span class="kwd">foreach</span> <span class="pun">(</span><span class="pln">$actualData </span><span class="kwd">as</span><span class="pln"> $key </span><span class="pun">=></span><span class="pln"> $value</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
		array_push</span><span class="pun">(</span><span class="pln">$arrData</span><span class="pun">[</span><span class="str">'data'</span><span class="pun">],</span><span class="pln"> array</span><span class="pun">(</span>
				<span class="str">'label'</span> <span class="pun">=></span><span class="pln"> $key</span><span class="pun">,</span>
				<span class="str">'value'</span> <span class="pun">=></span><span class="pln"> $value
			</span><span class="pun">)</span>
		<span class="pun">);</span>
	<span class="pun">}</span>

	<span class="com">// JSON Encode the arrData</span><span class="pln">
	$jsonEncodedData </span><span class="pun">=</span><span class="pln"> json_encode</span><span class="pun">(</span><span class="pln">$arrData</span><span class="pun">);</span>

	<span class="com">// Create pieChart object</span><span class="pln">
	$pieChart </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">FusionCharts</span><span class="pun">(</span><span class="str">"pie2D"</span><span class="pun">,</span> <span class="str">"myFirstChart"</span> <span class="pun">,</span> <span class="lit">600</span><span class="pun">,</span> <span class="lit">300</span><span class="pun">,</span> <span class="str">"chart-1"</span><span class="pun">,</span> <span class="str">"json"</span><span class="pun">,</span><span class="pln"> $jsonEncodedData</span><span class="pun">);</span>

	<span class="com">// Render the chart</span><span class="pln">
	$pieChart</span><span class="pun">-></span><span class="pln">render</span><span class="pun">();</span>

<span class="pun">?>

Dynamic 3D Pie charts using PHP and google library :

Creating Dashboards Using Google Charts. PHP, and MySQL Database :

JavaScript Charting Libraries – SitePoint |examples

Column and Bars :

Example :[ Bar with Negative Stack  – Source Code] :

package 

com.vaadin.addon.charts.examples.columnandbar;
import 

com.vaadin.addon.charts.Chart;
import 

com.vaadin.addon.charts.examples.AbstractVaadinChartExample;
import 

com.vaadin.addon.charts.model.ChartType;
import 

com.vaadin.addon.charts.model.Configuration;
import 

com.vaadin.addon.charts.model.ListSeries;
import 

com.vaadin.addon.charts.model.PlotOptionsSeries;
import 

com.vaadin.addon.charts.model.Stacking;
import 

com.vaadin.addon.charts.model.Title;
import 

com.vaadin.addon.charts.model.Tooltip;
import 

com.vaadin.addon.charts.model.XAxis;
import 

com.vaadin.addon.charts.model.YAxis;
import com.vaadin.ui.Component;

@SuppressWarnings("serial")
public class BarWithNegativeStack extends 

AbstractVaadinChartExample {

    @Override
    public String 

getDescription() {
        return "Bart with negative stack";
    }

    

@Override
    protected Component getChart() {
        Chart chart = 

new Chart(ChartType.BAR);

        Configuration conf = 

chart.getConfiguration();

        conf.setTitle("Population pyramid 

for Germany, midyear 2010");
        conf.setSubTitle("Source: 

www.census.gov");

        final String[] categories = new String[] { 

"0-4", "5-9", "10-14",
                "15-19", "20-24", "25-29", "30

-34", "35-39", "40-44", "45-49",
                "50-54", "55-59", 

"60-64", "65-69", "70-74", "75-79", "80-84",
                "85-89", 

"90-94", "95-99", "100 +" };

        XAxis x1 = new XAxis();
        

conf.addxAxis(x1);
        x1.setCategories(categories);
        

x1.setReversed(false);

        XAxis x2 = new XAxis();
        

conf.addxAxis(x2);
        x2.setCategories(categories);
        

x2.setOpposite(true);
        x2.setReversed(false);
        

x2.setLinkedTo(x1);

        YAxis y = new YAxis();
        y.setMin(-

4000000);
        y.setMax(4000000);
        y.setTitle(new Title

(""));
        conf.addyAxis(y);

        PlotOptionsSeries plot = new 

PlotOptionsSeries();
        plot.setStacking(Stacking.NORMAL);
        

conf.setPlotOptions(plot);

        Tooltip tooltip = new Tooltip();
    

    tooltip.setFormatter("''+ this.series.name +', age '+ 

this.point.category +'
'+ 'Population: '+ Highcharts.numberFormat

(Math.abs(this.point.y), 0)");
        conf.setTooltip(tooltip);

       

 conf.addSeries(new ListSeries("Male", -1746181, -1884428, -2089758,
  

              -2222362, -2537431, -2507081, -2443179, -2664537, -

3556505,
                -3680231, -3143062, -2721122, -2229181, -

2227768, -2176300,
                -1329968, -836804, -354784, -90569, 

-28367, -3878));
        conf.addSeries(new ListSeries("Female", 

1656154, 1787564, 1981671,
                2108575, 2403438, 2366003, 

2301402, 2519874, 3360596, 3493473,
                3050775, 2759560, 

2304444, 2426504, 2568938, 1785638, 1447162,
                1005011, 

330870, 130632, 21208));

        chart.drawChart(conf);

        return 

chart;
    }

<a title="JavaScript Charting Libraries - SitePoint |examples" href="http://demo.vaadin.com/charts/#BasicBar">}

JavaScript For Loop |Instead of writing |Different Kinds of Loops |The For Loop|The For/In Loop

  • Loops can execute a block of code a number of times.

JavaScript Loops :

  • Loops are handy, if you want to run the same code over and over again, each time with a different value.
  • Often this is the case when working with arrays:

Instead of writing:

text += cars[<span class="highVAL">0</span>] + <span class="highVAL">"<br>"</span>;
text += cars[<span class="highVAL">1</span>] + <span class="highVAL">"<br>"</span>;
text += cars[<span class="highVAL">2</span>] + <span class="highVAL">"<br>"</span>;
text += cars[<span class="highVAL">3</span>] + <span class="highVAL">"<br>"</span>;
text += cars[<span class="highVAL">4</span>] + <span class="highVAL">"<br>"</span>;
text += cars[<span class="highVAL">5</span>] + <span class="highVAL">"<br>"</span>;

You can write:

for</span> (i = <span class="highVAL">0</span>; i < cars.length; i++) {
text += cars[i] + <span class="highVAL">"<br>"</span>;
}

Different Kinds of Loops :

  • JavaScript supports different kinds of loops:
  • for - loops through a block of code a number of times
  • for/in - loops through the properties of an object
  • while - loops through a block of code while a specified condition is true
  • do/while – also loops through a block of code while a specified condition is true

The For Loop :

  • The for loop is often the tool you will use when you want to create a loop.
  • The for loop has the following syntax:
for (<i>statement 1</i>;<i> statement 2</i>;<i> statement 3</i>) {
<i>code block to be executed</i>
}
  • Statement 1 is executed before the loop (the code block) starts.
  • Statement 2 defines the condition for running the loop (the code block).
  • Statement 3 is executed each time after the loop (the code block) has been executed.

Example :

for</span> (i = <span class="highVAL">0</span>; i < <span class="highVAL">5</span>; i++) {
text += <span class="highVAL">"The number is "</span> + i + <span class="highVAL">"<br>"</span>;
}
  • From the example above, you can read:
  • Statement 1 sets a variable before the loop starts (var i = 0).
  • Statement 2 defines the condition for the loop to run (i must be less than 5).
  • Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Statement 1 :

  • Normally you will use statement 1 to initiate the variable used in the loop (i = 0).
  • This is not always the case, JavaScript doesn’t care. Statement 1 is optional.
  • You can initiate many values in statement 1 (separated by comma):

Example:

for</span> (i = <span class="highVAL">0</span>, len = cars.length, text = <span class="highVAL">""</span>; i < len; i++) {
text += cars[i] + <span class="highVAL">"<br>"</span>;
}
  • And you can omit statement 1 (like when your values are set before the loop starts):

Example:

var</span> i = <span class="highVAL">2</span>;
<span class="highELE">var</span> len = cars.length;
<span class="highELE">var</span> text = <span class="highVAL">""</span>;
<span class="highELE">for</span> (; i < len; i++) {
text += cars[i] + <span class="highVAL">"<br>"</span>;
}

Statement 2 :

  • Often statement 2 is used to evaluate the condition of the initial variable.
  • This is not always the case, JavaScript doesn’t care. Statement 2 is also optional.
  • If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Statement 3 :

  • Often statement 3 increases the initial variable.
  • This is not always the case, JavaScript doesn’t care, and statement 3 is optional.
  • Statement 3 can do anything like negative increment (i–), positive increment (i = i + 15), or anything else.
  • Statement 3 can also be omitted (like when you increment your values inside the loop):

Example:

var</span> i = <span class="highVAL">0</span>;
<span class="highELE">var</span> len = cars.length;
<span class="highELE">for</span> (; i < len; ) {
text += cars[i] + <span class="highVAL">"<br>"</span>;
i++;
}

The For/In Loop :

  • The JavaScript for/in statement loops through the properties of an object:

Example :


var</span> person = {fname:<span class="highVAL">"John"</span>, lname:<span class="highVAL">"Doe"</span>, age:25};

<span class="highELE">var</span> text = <span class="highVAL">""</span>;
<span class="highELE">var</span> x;
<span class="highELE">for</span> (x <span class="highELE">in</span> person) {
text += person[x];
}

The While Loop :

The while loop and the do/while loop will be explained in the next chapter.

Test Yourself with Exercises!

Example :1

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var i;
for (i = num1; i < num2; i++) {
document.getElementById("demo").innerHTML += i + "<br>";
}
</script>

</body>
</html>

Example : 2

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var i;
for (i = 0; i < 10; i++) {
document.getElementById("demo").innerHTML += i + "<br>";
}
</script>

</body>
</html>

Example : 3

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var i;
for (i = 0; i < 10; i++) {
document.getElementById("demo").innerHTML += i + "<br>";
}
</script>

</body>
</html>

Example : 4

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var i;
for (i = 0; i < 10; i++) {
document.getElementById("demo").innerHTML += i + "<br>";
}
</script>

</body>
</html>

Example : 5

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var text = "";
var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"];
var i;

for () {
text += "I love " + food[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Example : 6

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var text = "";
var i;

// add for loop here

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

 

1 2 3 9