Responsive Flot Chart

Developer
Matt Litherland
Size
3,554 Kb
Views
72,864
  1. Responsive Flot Chart Previews
  2. Responsive Flot Chart HTML Codes
  3. Responsive Flot Chart CSS Codes
  4. Responsive Flot Chart JS Codes

How do I make an responsive flot chart?

A quick responsive flot chart for dashboards. Check out the C3 Version here!. What is a responsive flot chart? How do you make a responsive flot chart? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Responsive Flot Chart Previews
IQ Test

Responsive Flot Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Flot Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <header><h2>Responsive Flot</h2></header> <div id="chart"></div>
</div>
<div class="box"> <header><h2>Responsive Flot</h2></header> <div id="spline-chart"></div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://lab.westilian.com/westilo-admin/full-width-fluid-layout/js/lib/chart/flot/jquery.flot.min.js'></script>
<script src='http://lab.westilian.com/westilo-admin/full-width-fluid-layout/js/lib/chart/flot/jquery.flot.resize.min.js'></script>
<script src='http://lab.westilian.com/westilo-admin/full-width-fluid-layout/js/lib/chart/flot/jquery.flot.spline.js'></script>
<script src='http://lab.westilian.com/westilo-admin/full-width-fluid-layout/js/lib/chart/flot/jquery.flot.tooltip.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Flot Chart - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * { box-sizing: border-box;
}
body { background: #e4e9f0; padding: 40px;
}
.box { float: left; position: relative; width: 49%; background: #26c6da; padding: 30px; margin-right: 2%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden;
}
.box + .box { margin: 0px;
}
.box:after { padding-top: 30%; /* 16:9 ratio */ display: block; content: '';
}
.box > div { float: left; width: 100%; height: 150px; color: #fff;
}
.box > div > canvas { width: 100%; max-width: 100%;
}
.box header { background: #fff; display: block; margin: -30px -30px 30px -30px; padding: 30px 30px;
}
.box header h2 { line-height: 1; padding: 0; margin: 0; font-family: "roboto", sans-serif; font-weight: 600; font-size: 20px; color: #556078; -webkit-font-smoothing: antialiased;
}
.flot-tt { font-family: "roboto", sans-serif; font-weight: 600; border: none !important; border-radius: 2px; position: absolute; z-index: 1040; padding: 0.4em 0.6em; font-size: 0.8em; white-space: nowrap; background: white;
}
.tickLabel { color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Responsive Flot Chart - Script Codes JS Codes

var spline_chart_options = { grid: { hoverable: true, borderWidth: { top: 0, right: 0, bottom: 0, left: 0 }, clickable: true, margin: { top: 10, right: 10, bottom: 0, left: 10 }, mouseActiveRadius: 30 }, xaxis: { tickLength: 0, show: true, color: '#fff', ticks: [ [1, "Sat"], [2, "Sun"], [3, "Mon"], [4, "Tue"], [5, "Wed"], [6, "Thu"], [7, "Fri"] ] }, yaxis: { ticks: false, tickLength: 0 }, tooltip: { show: true, cssClass: "flot-tt", content: "%y", defaultTheme: false }, colors: ["#fff"]
};
// Chart 1
var chart_data = { splines: { show: true, tension: 0.4, lineWidth:4, fill:0 }, points: { show: true, lineWidth: 1.5, radius: 3, symbol: "circle", fill: true, fillColor: "#ffffff" }, data: [ [1, 4000], [2, 3600], [3, 6000], [4, 3700], [5, 4000], [6, 3400], [7, 5200] ]
};
// Chart 2
var spline_chart_data = { splines: { show: true, tension: 0.4, lineWidth:4, fill:0 }, points: { show: true, lineWidth: 1.5, radius: 3, symbol: "circle", fill: true, fillColor: "#ffffff" }, data: [ [1, 3500], [2, 3600], [3, 4000], [4, 3800], [5, 5000], [6, 3800], [7, 4200] ]
};
var SpLineChart = $.plot($("#spline-chart"), [chart_data], spline_chart_options);
var SpLineChart = $.plot($("#chart"), [spline_chart_data], spline_chart_options);
Responsive Flot Chart - Script Codes
Responsive Flot Chart - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,554 Kb
Views 72,864
Do you need developer help for Responsive Flot Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Litherland (mattsince87) Script Codes
Name
Animated Resposnive SVG Path
Ultimate Pop-Out Menu
SVG Firework Animation
SCSS Social Icons Flat
Wishlist Toggle Button
Animated SVG Path
Flat Origami Article
Slick Two Part Form
Share Your Profile
Vertical Align Images - Explained
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!