I am trying to display some charts in my admin view( by extending admin/base.html) and I want to use a template instead of libraries such as charts.Js to display them. I want my view to be like the following (https://colorlib.com/polygon/cooladmin/index.html). Github repo here (https://github.com/puikinsh/CoolAdmin). However, in my case no charts are being displayed.
I have integrated all files and folders( containing static files) and set all dependencies correctly andhe main.js(contains code for charts) are also working.
Extract from main.html(includes links)
<div id="content-main" class="main-content container-fluid">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">overview</h2>
<button class="au-btn au-btn-icon au-btn--blue">
<i class="zmdi zmdi-plus"></i>add item</button>
</div>
</div>
</div>
<div class="row m-t-25">
<div class="col-sm-6 col-lg-3">
<div class="overview-item overview-item--c1">
<div class="overview__inner">
<div class="overview-box clearfix">
<div class="icon">
<i class="zmdi zmdi-account-o"></i>
</div>
<div class="text">
<h2>10368</h2>
<span>members online</span>
</div>
</div>
<div class="overview-chart">
<canvas id="widgetChart1"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<script src={% static 'hfs_admin/vendor/jquery-3.2.1.min.js' %}""></script>
<!-- Bootstrap JS-->
<script src={% static 'hfs_admin/vendor/bootstrap-4.1/popper.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/bootstrap-4.1/bootstrap.min.js' %}""></script>
<!-- Vendor JS -->
<script src={% static 'hfs_admin/vendor/slick/slick.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/wow/wow.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/animsition/animsition.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/bootstrap-progressbar/bootstrap-progressbar.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/counter-up/jquery.waypoints.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/counter-up/jquery.counterup.min.js' %}"">
</script>
<script src={% static 'hfs_admin/vendor/circle-progress/circle-progress.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/perfect-scrollbar/perfect-scrollbar.js' %}""></script>
<script src={% static 'hfs_admin/vendor/chartjs/Chart.bundle.min.js' %}""></script>
<script src={% static 'hfs_admin/vendor/select2/select2.min.js' %}"">
</script>
<!-- Main JS-->
<script src={% static 'hfs_admin/js_template/main.js' %}></script>
Extract from main.js
(function ($) {
// USE STRICT
"use strict";
try {
//WidgetChart 1
var ctx = document.getElementById("widgetChart1");
if (ctx) {
ctx.height = 130;
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
type: 'line',
datasets: [{
data: [78, 81, 80, 45, 34, 12, 40],
label: 'Dataset',
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
},]
},
options: {
maintainAspectRatio: true,
legend: {
display: false
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}],
yAxes: [{
display: false,
ticks: {
display: false,
}
}]
},
title: {
display: false,
},
elements: {
line: {
borderWidth: 0
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
});
}
})(jQuery);
Expected ouput should be like the following (https://colorlib.com/polygon/cooladmin/index.html). However mine gets rendered without any charts. I beleive something is preventing the JS from applying the chart onto the html page.
Any helps will be appreciated. Also Do let me know if the question need updating.
Thanks.
Solution: it uses chart.js.
https://www.chartjs.org/
You will have to have a js file with datapoints.
Try opening the chrome developer console and inspect the js.
Related
I try to place the value of my sensor in a HTML script (see interface).
I found a example on internet. I would like to have only the blocks with the name Temp en Hum (in running mode are the values visible in the block). But when I delete the graphs, I lost the actual value also.
How can I delete the graphs and hold the actual values in the blocks (temp and Hum)?
Interface
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask App </title>
<!-- Bootstraps Java Scipts Links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--High CHART LIVE -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!--Gauge -->
<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor1"> Sensor : </h1>
</div>
<br>
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor2">Sensor :</h1>
</div>
<br>
</div>
</div>
<style>
<!--
.jumbotron{
widows: 150px;
height: 220px;
justify-content: center;
}
.row{
justify-content: center;
}
-->
</style>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-temperature">
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-humidity">
</div>
</div>
</div>
<script>
var chartTemperatue;
var chartHumidity;
function requestData()
{
// Ajax call to get the Data from Flask
var requests = $.get('/data');
var tm = requests.done(function (result)
{
// Temperature
var seriesTemperature = chartTemperatue.series[0],
shiftTemperature = seriesTemperature.data.length > 20;
// Humidity
var seriesHumidity = chartHumidity.series[0],
shiftHumidity = seriesTemperature.data.length > 20;
// Add the Point
// Time Temperature\
var data1 = [];
data1.push(result[0]);
data1.push(result[1]);
// Add the Point
// Time Humidity
var data2 = [];
data2.push(result[0]);
data2.push(result[2]);
chartTemperatue.series[0].addPoint(data1, true, shiftTemperature);
chartHumidity.series[0].addPoint(data2, true, shiftHumidity);
$(".sensor1").text("");
$(".sensor1").text("Temperature : " + Math.round(data1[1]) );
$(".sensor2").text("");
$(".sensor2").text("Humidity : " + Math.round(data2[1]) );
// call it again after one second
setTimeout(requestData, 2000);
});
}
$(document).ready(function()
{
// --------------Chart 1 ----------------------------
chartTemperatue = new Highcharts.Chart({
chart:
{
renderTo: 'data-temperature',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
color : '#c23d23',
lineColor: '#303030',
name: 'Temperature',
data: []
}]
});
// --------------Chart 1 Ends - -----------------
chartHumidity = new Highcharts.Chart({
chart:
{
renderTo: 'data-humidity',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Humidity'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
lineColor: '#1d82b8',
name: 'Humidity',
data: []
}]
});
});
</script>
</body>
</html>
Python code
from flask import Flask,render_template,url_for,request,redirect, make_response
import random
import json
from time import time
from random import random
from flask import Flask, render_template, make_response
app = Flask(__name__)
#app.route('/', methods=["GET", "POST"])
def main():
return render_template('index.html')
#app.route('/data', methods=["GET", "POST"])
def data():
# Data Format
# [TIME, Temperature, Humidity]
Temperature = random() * 100
Humidity = random() * 55
data = [time() * 1000, Temperature, Humidity]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
if __name__ == "__main__":
app.run(debug=True)
The following code is supposed to create a new bar chart but I'm getting an "Uncaught TypeError: Cannot set property 'data' of undefined" which points to the first line (var chart = new Chart etc)
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
I have a html file with the following:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
Do i need to include the chartjs api in the js file as well?
Or do i need to call the chart somewhere in my js file?
Works for me. It must be just the order.
Try this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
</head>
<body>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script type="application/javascript">
var chart = new Chart(document.getElementById("chart1"), {
type: 'bar',
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [{
label: "Num incidents",
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [89,57,25,28]
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
Or play here: https://jsfiddle.net/2d9kfegj/2/
Inside your html file:
<script src="myJavascript.js"> </script>
The problem is that you don't include your js file in your html. Make sure you include your js file at the end of your html like:
<head>
<meta charset="utf-8"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
</head>
<div class="column">
<canvas id="chart1"></canvas>
</div>
<script src="myJavascript.js"></script>
After that it will work just fine. You need to load your page first so your JS knows where to put the chart that is created.
In jquery you can use document.ready function but since you don't have a jquery tag i will avoid to mention to put a listener for page ready and suggest to just put it in the end for your ease.
I'm trying to get a decent understanding of rickshaw so I've been trying to add functionality to one of the simpler examples, but the range slider just isn't working. I've been looking at the code for this example to try to get it to work, but even though my code looks the same it just isn't working. Part of my problem is that I'm not sure what all the minified files contain, so I'm not sure when I need to include individual .js files for which functionality. As I'm sure you've noticed the documentation doesn't cover this,
so if any of you have any insight for me it would be greatly appreciated.
A note about the below code, I'm using jinja2 templates, thus the url_for functions
vvv This is the rendered code for the pertinent section of html vvv
<div id="preview" class="ui-slider ui-slider-horizontal ui-widget ui-widget content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
-------------------------------------------------
<!doctype>
<head>
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/graph.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/detail.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/legend.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/lines.css')}}">
<script src="{{ url_for('static', filename='vendor/d3.min.js')}}"></script>
<script src="{{ url_for('static', filename='vendor/d3.layout.min.js')}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="{{ url_for('static', filename='rickshaw.js')}}"></script>
<script src="{{ url_for('static', filename='extensions.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.Preview.js')}}"></script>
</head>
<body>
<div id="chart_container">
<div id="chart"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="slider"></div>
</div>
<script>
// set up our data series with 50 random data points
var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke:true,
preserve:true,
series: [
{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}
]
} );
graph.render();
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: graph,
legend: legend
} );
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: graph,
legend: legend
} );
</script>
Using the demo here: http://code.shutterstock.com/rickshaw/ and the standalone example: http://code.shutterstock.com/rickshaw/examples/extensions.html it only needs the id of the div to initialize.
I would advise removing the following from your head:
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
And using:
<link type="text/css" rel="stylesheet" source="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.csss">
I don't think this will cause an issue but it also does not improve anything.
I also see they use:
<script>
jQuery.noConflict();
</script>
They execute this before the jQuery UI is included. I see no issue with:
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
If it were me, I would suggests:
// set up our data series with 50 random data points
var seriesData = [
[],
[],
[]
];
var random = new Rickshaw.Fixtures.RandomData(150);
var graph, slider, hoverDetail, legend, shelving, order, highlight;
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke: true,
preserve: true,
series: [{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}]
});
graph.render();
slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: $("#slider")[0]
});
hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph
});
legend = new Rickshaw.Graph.Legend({
graph: graph,
element: $("#legend")[0]
});
shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
highlight = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
Example: https://jsfiddle.net/Twisty/qoofL8kb/4/
After fiddling with it I realized the problem was the way I was trying to link to the jQuery-ui css file. Instead I downloaded the files I needed and added them to the project, linking them that way.
component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
templateUrl: './cad.html'
})
export class cadcomponent {
}
cad.html
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<script src="scripts/cad.js"></script>
<div id="container1" class="chart"></div>
cad.js
$.get('scripts/dataCAD.csv', function(csv) {
$('#container1').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'CAD'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
and my index.html
<html>
<head>
<link rel="icon" href="Resources/favicon.ico">
<base href="/">
<title>IT Status</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="center.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/highcharts.js"></script>
<script src="scripts/highchartsdatamodule.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>System.import('app').catch(function(err){ console.error(err); });</script>
<script src="scripts/cad.js" type="text/javascript"></script>
<script src="scripts/market.js" type="text/javascript"></script>
<script src="scripts/system.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="bootstrap-3.3.6-dist/js/vendor/jquery.min.js"><\/script>')</script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/speed.js"></script>
<script src="scripts/nickcodestatus.js"></script>
<script src="scripts/nickworkingon.js"></script>
<script src="scripts/seamuscodestatus.js"></script>
<script src="scripts/seamusworkingon.js"></script>
<script src="scripts/mikecodestatus.js"></script>
<script src="scripts/mikeworkingon.js"></script>
<script src="scripts/justincodestatus.js"></script>
<script src="scripts/justinworkingon.js"></script>
<script src="scripts/tonycodestatus.js"></script>
<script src="scripts/tonyworkingon.js"></script>
<script src="scripts/kevincodestatus.js"></script>
<script src="scripts/kevinworkingon.js"></script>
<script data-main="scripts/main.js" src="scripts/require.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
so i have googled the error and i am taken to this page http://www.highcharts.com/errors/16
I am just confused as to what i am doing wrong I do not see two calls to the high charts module. I have changed the container names to not all be the same as i saw in this post on stack overflow Highcharts Error #16: charts not showing on the same page . If anyone could help me i would be very appreciative. I am almost done with the website this is my last problem that inst loading.
updated component
import {Component} from '#angular/core';
#Component({
selector: 'cad',
template: `
<div class="row">
<div class="col-md-12">
<div class="thumbnail alert-info alert alert-dismissible fade in">
<p class="lead text-center"> Our Dynamic KPI</p>
</div>
</div>
</div>
<pre id="csv" style="display:none">Month,Current,Previous
JAN,100,100
FEB,100,100
MAR,100,100
APR,100,100
MAY,100,100
JUN,100,100
JUL,100,100
AUG,100,100
SEPT,100,100
OCT,100,100
NOV,,100
DEC,,100</pre>
<chart [options]="options"></chart>
`
})
export class cadcomponent {
constructor() {
this.options = {
chart: {
type: 'column',
},
title: {
text: 'CAD'
},
subtitle: {
text: 'Uptime % for CAD'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC']
},
series: [{
name: "Current",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
},
{
name: "Previous",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,]
}]
};
}
options: Object;
}
Hi I am a beginner to JQuery and Highcharts and running into problems I can't solve spending over 3-4 hours on it while following Highcharts documentation to create the first chart in Visual Studio 2013.
I create a barebone ASP MVC 5 application and add the following code to Index.cshtml body:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="width:100%; height:400px;"></div>
Then I add the following code to _Layout.cshtml:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
It output html code that immediate crash the IE browser launching from with Visual Studio, giving me error message: JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<div id="container1" style="width:100%; height:400px;"></div>
<p>
Create New
</p>
<table class="table">
<tr>
<th>
Voltage
</th>
<th>
Current
</th>
<th></th>
</tr>
<tr>
<td>
3.12
</td>
<td>
3.18
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
3.124
</td>
<td>
6.28
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
//<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"bab8eaa5834742c0a90d4a2266b8953c"}
</script>
<script type="text/javascript" src="http://localhost:19978/19d3f54454e64aa2aeab6fa68d1e8a88/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
However, if I copy and paste this into an static html file and open browser to view it offline from my desktop, then the charts works.
Please help! I spent hours already trying out different things to solve this!
Thank you!
You are including jQuery twice. In the header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and at the bottom of the page:
<script src="/Scripts/jquery-1.10.2.js"></script>
This second inclusion will overwrite the first one, where Highcharts was attached to. I.e. inside the document ready callback, $ refers to jquery-1.10.2.js, which doesn't have Highcharts added to it.
You are actually including both libraries, jQuery and Highcharts twice. Don't do that.
Just in case this helps anyone, this was happening for me when I was using AngularJS and mistakenly, a self closing ng-view tag. Angular ended up loading twice so if relevant ensure your ng-view tag is
<ng-view></ng-view>
instead of
<ng-view/>
Took a while to figure out, hopefully it will save somebody else time.