Floatchart

All code are beautifully written. You can customize easily. Just look the floatchart.html file go to form code with change and use.you would like to edit a specific section of the site, simply find the appropriate label in the amex/js/vendor/flot-init.html and change what you need.

amex bootstrap 4 admin dashboard provide this beautifull with standard flot chart form you can see this documentation

Line area
<----use this HTML code------>
<canvas id="flotLine1"></canvas>

js
Example1:To Change Bar chart , just find the following block into the flot-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.flot.js"></script">
<script src="js/vendor/jquery.flot.time.js"></script">
<script src="js/vendor/jquery.flot.tooltip.min.js"></script">
<script src="js/vendor/jquery.flot.resize.js"></script">
<script src="js/vendor/jquery.flot.pie.js"></script">
<script src="js/vendor/jquery.flot.spline.js"></script">
<script src="js/vendor/flot-init.js"></script">
<----use this code----> 
<script>

   var plot = $.plot($('#flotLine1'),[
    {
      data: saleCust,
      label: 'sales',
      color: '#4941e9'
    },
    {
      data: incomeCust,
      label: 'income',
      color: '#f92b8b'
    }],
    {
      series: {
        lines: {
          show: true,
          lineWidth: 5
        },
        shadowSize: 0
      },
      points: {
        show: false,
      },
      legend: {
        noColumns: 1,
        position: 'nw'
      },
      grid: {
        hoverable: true,
        clickable: true,
        borderColor: '#ddd',
        borderWidth: 0,
        labelMargin: 5,
        backgroundColor: '#fff'
      },
      yaxis: {
        min: 1,
        max: 15,
        color: '#f1f1f1',
        font: {
          size: 11,
          color: '#666'
        }
      },
      xaxis: {
        color: '#f1f1f1',
        font: {
          size: 11,
          color: '#666'
        }
      }
    });
   var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

</script>

Bar Chart
<----use this HTML code------>
<canvas id="flotBar1"></canvas>
js
Example2:To Change Line chart just find the following block into the float-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.flot.js"></script">
<script src="js/vendor/jquery.flot.time.js"></script">
<script src="js/vendor/jquery.flot.tooltip.min.js"></script">
<script src="js/vendor/jquery.flot.resize.js"></script">
<script src="js/vendor/jquery.flot.pie.js"></script">
<script src="js/vendor/jquery.flot.spline.js"></script">
<script src="js/vendor/flot-init.js"></script">
<----use this code----> 
<script>
$.plot("#flotBar1", [{
          data: [[0, 9], [2, 6], [4, 7], [6, 13],[8,7], [10,7],[12,4], [14,13]]
        }], {
          series: {
            bars: {
              show: true,
              lineWidth: 0,
              fillColor: '#4941e9'
            }
          },
          grid: {
            borderWidth: 1,
            borderColor: '#f1f1f1'
          },
          yaxis: {
            tickColor: '#f1f1f1',
            font: {
              color: '#666',
              size: 10
            }
          },
          xaxis: {
            tickColor: '#f1f1f1',
            font: {
              color: '#666',
              size: 10
            }
          }
        });

    var saleCust = [[0, 1], [2, 3], [3,5], [3, 5], [4, 7], [5, 8], [7, 9]];
    var incomeCust = [[0, 2], [1, 3], [2,5], [3, 3], [4, 5], [5, 6], [7,10]];
</script>

  
Pie Chart
<----use this HTML code------>
<canvas id="flot-pie-chart"></canvas>  
js
Example2:To Change Pie chart just find the following block into the flot-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.flot.js"></script">
<script src="js/vendor/jquery.flot.time.js"></script">
<script src="js/vendor/jquery.flot.tooltip.min.js"></script">
<script src="js/vendor/jquery.flot.resize.js"></script">
<script src="js/vendor/jquery.flot.pie.js"></script">
<script src="js/vendor/jquery.flot.spline.js"></script">
<script src="js/vendor/flot-init.js"></script">
<----use this code----> 
<script>
var data = [{
        label: "sales",
        data: 25,
        color: "#4941e9",
    }, {
        label: "customer",
        data: 25,
        color: "#f92b8b",
    }, {
        label: "visitor",
        data: 25,
        color: "#06caff",
    }, {
        label: "income",
        data: 25,
        color: "#5ae2cd",
    }];

    var plotObj = $.plot($("#flot-pie-chart"), data, {
        series: {
            pie: {
                innerRadius: 0.5,
                show: true
            }
        },
        grid: {
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
            shifts: {
                x: 20,
                y: 0
            },
            defaultTheme: false
        }
    });
</script>

Real time chart
<----use this HTML code------>
<canvas id="floatrealtime"></canvas>
js
Example2:To Change floatrealtime chart just find the following block into the flot-init.js and change what you need
<---include js file---->
<script src="js/vendor/jquery.flot.js"></script">
<script src="js/vendor/jquery.flot.time.js"></script">
<script src="js/vendor/jquery.flot.tooltip.min.js"></script">
<script src="js/vendor/jquery.flot.resize.js"></script">
<script src="js/vendor/jquery.flot.pie.js"></script">
<script src="js/vendor/jquery.flot.spline.js"></script">
<script src="js/vendor/flot-init.js"></script">
<----use this code----> 
<script>

    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 3000) {
                updateInterval = 3000;
            }
            $(this).val("" + updateInterval);
        }
    });

    var plot = $.plot("#floatrealtime", [getRandomData()], {
        series: {
            shadowSize: 0 // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        },
        colors: ["#f92b8b"],
        grid: {
            color: "transparent",
            hoverable: true,
            borderWidth: 0,
            backgroundColor: '#FFF'
        },
        tooltip: true,
        tooltipOpts: {
            content: "Y: %y",
            defaultTheme: false
        }


    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
</script>

peity chart

All code are beautifully written. You can customize easily. Just look the peitychart.html file go to form code with change and use.you would like to edit a specific section of the site, simply find the appropriate label in the amex/js/vendor/peitychart.html and change what you need.

amex bootstrap 4 admin dashboard provide this beautifull with standard chart form you can see this documentation

Graph pie chart
<----use this HTML code------>
<span class="pie" data-peity='{ "height": 100, "width": 200 }'>1/8</span>
<span class="pie" data-peity='{ "height": 100, "width": 200 }'<198/460</span>>
js
Example1:To Change Bar chart , just find the following block into the peity-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.peity.js"></script">
<script src="js/vendor/peity-init.js"></script">
<----use this code----> 
<script>
$("span.pie").peity("pie", {
    fill: ['#a00af6', '#f92b8b', '#ffffff'],
})
</script>

Area line chart
<canvas id="line"></canvas>
js
Example2:To Change Line chart just find the following block into the chart-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.peity.js"></script">
<script src="js/vendor/peity-init.js"></script">
<----use this code----> 
<script>
 $(".line").peity("line",{
      
})
</script>

Bar chart
   
<canvas id="bar"></canvas>  
js
Example2:To Change Pie chart just find the following block into the peity-init.js and change what you need
<---include js file----> 
<script src="js/vendor/jquery.peity.js"></script">
<script src="js/vendor/peity-init.js"></script">
<----use this code----> 
<script>
 $(".bar").peity("bar", {
        fill: ["#a00af6", "#5ae2cd", "#f92b8b"]
    })
</script>

Dount chart
<canvas id="peity-donut"></canvas>
js
Example2:To Change comboChart chart just find the following block into the peity-init.js and change what you need
<---include js file----> 
<script src="js/vendor/simple-lightbox.min.js"></script">
<script src="js/vendor/Chart.min.js"></script">
<script src="js/vendor/utils.js"></script">
<script src="js/vendor/chart-init.js"></script">
<----use this code----> 
<script>
$(".peity-donut").peity("donut", {
        fill: ["#f92b8b", "#4941e9", "#5ae2cd"],
    })
</script>

Rickshawchart

All code are beautifully written. You can customize easily. Just look the rickshawchart.html file go to form code with change and use.you would like to edit a specific section of the site, simply find the appropriate label in the amex/js/vendor/rickshaw-init.js and change what you need.

amex bootstrap 4 admin dashboard provide this beautifull with standard rickshaw chart form you can see this documentation

Lines chart
<----use this HTML code------>
<div id="chart"></div>
js
Example1:To Change Bar chart , just find the following block into the rickshaw-init.js and change what you need
<---include js file----> 
<script src="js/vendor/rickshaw.min.js"></script">
<script src="js/vendor/rickshaw-init.js"></script">
<----use this code----> 
<script>
var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 235,
    height: 85,
    renderer: 'line',
    series: [ {
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
        color: '#f92b8b'
    } ]
} );
graph.render();
</script>

Scatterplot chart
<canvas id="chartscatterplot"></canvas>
js
Example2:To Change Line chart just find the following block into the rickshaw-init.js and change what you need
<---include js file----> 
<script src="js/vendor/d3.v3.js"></script">
<script src="js/vendor/rickshaw.min.js"></script">
<script src="js/vendor/rickshaw-init.js"></script">
<----use this code----> 
<script>
var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chartscatterplot"),
    width: 235,
    height: 85,
    renderer: 'scatterplot',
    series: [ {
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
        color: '#34dd87'
    } ]
} );
graph.render();

</script>

Bar chart
<canvas id="chartbar"></canvas>  
js
Example2:To Change Pie chart just find the following block into the chart-init.js and change what you need
<---include js file----> 
<script src="js/vendor/d3.v3.js"></script">
<script src="js/vendor/rickshaw.min.js"></script">
<script src="js/vendor/rickshaw-init.js"></script">
<----use this code----> 
<script>
 var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chartbar"),
    width: 235,
    height: 85,
    renderer: 'bar',
    stack: false,
    series: [ 
        {
            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
            color: '#f92b8b'
        }, {
            data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
            color: '#4941e9'

    } ]
} );

graph.render();
</script>