I've used Highcharts quite a bit and the charts work great, but I've been stuck trying to make Highmaps work for quite a while now.
I believe I have everything setup correctly with my test map that I'm trying to make work because it works correctly in JSFiddle.
The error I'm receiving in my browser console is this:
"Uncaught ReferenceError: Highcharts is not defined at
https://code.highcharts.com/mapdata/custom/world-highres.js:1:1 (anonymous function) # world-highres.js:1"
The first part of world-highres.js is: Highcharts.maps["custom/world-highres"] = { ...
Does anyone know why Highcharts would be coming back as undefined here?
I'm using Meteor 1.3.5.1 and I have Highcharts 5.0.4 installed through NPM.
Here's how I currently have things setup:
exampleTemplate.js
import Highcharts from 'highcharts';
require('highcharts/modules/map')(Highcharts);
Template.exampleTemplate.onRendered(function() {
// Example data
var mymapdata = [
{
key: "US",
value: 198812
},
{
key: "GB",
value: 52894
},
{
key: "CA",
value: 35572
}
];
// Initiate
Highcharts.mapChart('country-map-container', {
title: {
text: 'Highmaps Example'
},
subtitle: {
text: 'Example'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: mymapdata,
mapData: Highcharts.maps['custom/world-highres'],
joinBy: ['iso-a2', 'key'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
exampleTemplate.html
<template name="exampleTemplate">
<div id="country-map-container" style="width:100%; height:400px;"></div>
</template>
Head tag:
<head>
<script src="https://code.highcharts.com/mapdata/custom/world-highres.js"></script>
</head>
Here's what it looks like with the code above:
I've tried a lot of different things and spent a ton of time on this but nothing I've tried seems to make it work... Any help with this would be extremely appreciated.
Make sure your order is as follows,
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world-highres.js"></script>
JSFIDDLE
Related
I'm using mathjax in a project and I've been trying to change the colors of all math. I am loading the following configuration file:
window.MathJax = {
jax: ['input/TeX', 'output/HTML-CSS'],
extensions: ['tex2jax.js'],
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}', // this is working!
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
'HTML-CSS': {
fonts: ['TeX'],
styles: {
scale: 110,
'.MathJax': { padding: '1em 0.1em', color: 'green ! important' }, //Not working
'.MathJax_Display': { 'text-align': 'center' }
}
},
showProcessingMessages: false,
menuSettings: { zoom: 'Double-Click', mpContext: true, mpMouse: true }
}
Everything is apparently working but the HTML-CCS:styles part is not working. I couldn't find a proper reference for this, and I don't know if this version of MathJax (2.7.8) is using a different format.
In this project I'm using nuxt and vuetify, I don't know if this is the problem, but I turn off vuetify and still the styles are not applied to the math display.
Thanks very much for any help,
Milton.
The scale: 110 parameter is not a CSS declaration, so should not be in the styles block (but rather in the HTML-CSS block directly). I suspect that that may be causing the styles not to be generated properly. Try moving the scale up one level and see if that helps.
Note that the HTML-CSS output jax is the slowest one available. You might consider switching to the CommonHTML output jax instead.
I finally found what was the problem. Apparently the new versions of Mathjax changed the name of the CSS classes. The following configuration now works:
Update: Now I'm facing a different problem...that configuration only works in developing mode, when deploy the mathjax css is not working...in that case I think it is the vuetify css. :-(
Update: Now it is working, also in deployed mode. I was loading Mathjax with a the pre-configuration ?config=TeX-AMS-MML_SVG. When I load it without that pre-configuration it works. I don't know why.
window.MathJax = {
jax: ['input/TeX', 'output/CommonHTML'],
extensions: ['tex2jax.js', 'Safe.js'],
styles: {
'.mjx-chtml': { padding: '0.1em 0.1em' }, //new names of the selectors, working!
'.MJXc-display, .mjx-chtml': { color: 'green' }
},
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}',
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
CommonHTML: {
scale: 105,
linebreaks: { automatic: true }
},
showProcessingMessages: false,
menuSettings: { zoom: 'None', mpContext: true, mpMouse: true }
}
Note that styles are in the core configurations, outside the CommonHTML item.
Thanks for the help!
Milton.
Hy guys,
I would like to know if is possible to create a line chart like this Linear chart with Chart.js with javascript in a WebView in a Xamarin.Forms page, the values of the lines must be added in code.
I followed this tutorial, to implement a Hybrid WebView
The tutorial is working fine more or less, but I changed the index.htm file and I added the utils.js to have the same chart as in the first link.
The content of index and utils.js is the same as you cand find in the first link with F12.
But I don't know what I need more, my intuition says that the utils.js file is not working fine. This is the result when I run the app, I hope someone has a solution :)
Now I can see the chart fine in the Xamarin.Forms page, to do it I just copied all the files and changed the route in multi-axi.html.
<!doctype html>
<html>
<head>
<title>Line Chart Multiple Axes</title>
<script src="../../../../dist/2.8.0/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
var lineChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: 'y-axis-1',
}, {
label: 'My Second dataset',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: 'y-axis-2'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart.js Line Chart - Multi Axis'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
lineChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
});
</script>
</body>
</html>
The result:
I have one last problem, the lineChartData variable must be created in the .cs file with custom data, how I do that?
I found a ton of people having this issues online of using js charts in Xamarin.Forms so I took some inspiration from HybridWeb view and some Gists online and created a Nuget Package to solve this.
https://github.com/ChristopherMWood/XamarinChartJSPlugin
It will allow you to configure charts in C# and it converts them to chart.js charts in a WebView. As of writing this it's fairly new but it helps solve the main line use cases using CHart.js.
You might want to read the [update] first, as the nature of the problem has changed.
I am trying to add charting to an AngularJs app. I get the following error
angular.js:13236 Error: Please set height and width for the chart element
at validateHeightAndWidth (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:138:15)
at link (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:106:7)
at http://localhost/plafotrm_2/js/angular/angular.js:9486:44
at invokeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:9492:9)
at nodeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8978:11)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8226:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) <div id="chart1" ac-chart="chartType" ac-data="chartData" ac-config="chartConfig" class="ng-isolate-scope">
However, in my index.html, I <link rel="stylesheet" href="css/charts.css" /> and in css/charts.css, I
.chartStyle
{
width: 500px;
height: 500px;
}
and the chart is supposed to go into
<div
data-ac-chart="bar"
data-ac-data="chartData"
data-ac-config="chartConfig"
class="chartStyle" >
</div>
It all looks fine to me, and I copied from a Plunk.
I am sure that I am pulling in the correct CSS File, because if I rename it, I get an error in the developer console. But even with no error about the CSS file, I get the error shown above.
Any ideas, anyone?
[Update]
After applying #SteveCampbell 's comment and answer, there are now no errors in the developer console - alas, there is also no chart on the page :-(
The HTML looks like this
<div data-ac-chart="'bar'" data-ac-data="chartData" data-ac-config="chartConfig" class="chartStyle ng-isolate-scope"></div>
no height or width, so that waitForHeightAndWidth : true is only masking the problem :-(
I think I need to read the docs ...
I have this in the controller ...
$scope.chartConfig = {
title: 'Products',
tooltips: true,
labels: false,
waitForHeightAndWidth : true,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$scope.chaartData = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
};
The issue is not related to CSS. Probably it occurs because the chart element is not initially visible on the first digest cycle, and thus it gets an error when trying to determine the height and width.
The readme on https://github.com/chinmaymk/angular-charts implies that you can set config.waitForHeightAndWidth to true to avoid this problem.
I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.
When I move between views in my Sencha Touch app I see the animation (slide), then the original view(the one I started at) is shown again. At that point, if I click anywhere in the app the view will change to the correct newly active item.
I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.
Thanks in advance!
here's the code for the main viewport:
plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
login: new plantanalyzer.views.Login(),
plantDetail: new plantanalyzer.views.PlantDetail(),
buildingList: new plantanalyzer.views.BuildingList()
});
Ext.apply(this, {
items: [
plantanalyzer.views.login,
plantanalyzer.views.plantDetail,
plantanalyzer.views.buildingList
]
});
plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
and for the viewController:
plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList,
options.animation);
}
});
and this is the code for one of the views:
plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
{
xtype: 'panel',
html: '<img src="images/logo.jpg"/>',
tpl: '{name}',
cls: 'plantToolbar'
},
{
xtype: 'button',
name : 'buildingSelect',
text: 'Select Building',
cls: 'standardButton',
listeners: {
'tap': function () {
'use strict';
Ext.dispatch({
controller: plantanalyzer.controllers.viewController,
action: 'show'
});
}
}
},
{
xType: 'panel',
cls: 'infoBoxes',
html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalTons',
html: 'Total Plant Tons: '
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalCost',
html: 'Real-time Plant Cost: '
},
{
xType: 'panel',
name: 'uodateTime',
cls: 'lastUpdate',
html: 'Last Update: '
}
]
});
The code looks fine in both sections. When i had issues with phonegap and sencha touch doing this i generally found there was a javascript error occurring or extra html markup was in between the body tag of the index.html file. The first thing would be to open the console in chrome or safari and check the javascript console to determine if it is a javascript error. If you can't run it in them i would suggest the Wienre application that will give you a console and was written to debug phonegap applications (wienre will also allow you to view the html markup to make sure it is correct)
The problem must be somewhere in the view files. The code you have shown is correct.
Well, for what it's worth, after rebuilding the app I found the issue. It was some custom css that was screwing up the app. Specifically the width that was being set on some of the components.
Hopefully, this will save somebody else some time and heartache.
Thanks, Darren and Ilija for your help!