Im attempting to add this code to my website, built with sandvox, via the insert 'Raw HTML' function. Once I add the code, I simply see a blank box on my site. Im hoping that there is some way I can get a bit of help. Thank you for any help.
<html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</hmtl>
place jQuery script before highcharts js, and don't forget close your <script> tag
<html>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Prevalence of Performance Enhancing Drug Use By Sport'
},
subtitle: {
text: 'Source: getfast'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Prevalence (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>'
},
series: [{
name: 'Prevalence',
data: [
['WADA All Pros', 2],
['Child Athletes', 4],
['HS Football', 6.3],
['HS Seniors All Sports', 6.6],
['Amatuer Weight-lifters', 8.2],
['American Football', 9],
['Baseball', 9.4],
['Research Estimate All Pros', 10.2],
['Top 100 Sprinters (running)', 40],
['Professional Bodybuilders', 54],
['Tour de France Winners', 79],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: -15,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
</script>
</hmtl>
You are missing a closing </script> tag at the end of your Highcharts script. Adding that closing tag and ensuring that jQuery is loaded before loading the Highcharts script should work great.
So it should be:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
<!-- your Highcharts script here... -->
</script>
</head>
<body>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
A working example can be seen here.
Related
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0
I have several echarts in an application I develop. I'm using V4 of echarts (can't upgrade just yet) and following the documentation for tooltip usage as found here: https://echarts.apache.org/v4/en/option.html#tooltip All but my latest one are showing the tooltip just fine. I cannot see any difference between my new one and my old ones.
I have explicitly imported the proper modules as outlined in the answer to this question: Apache ECharts with Vue does not show Tooltip just like I did for my old ones.
I use vue files with the template on top, script in the middle, and css at the bottom. The chart is defined in the template thus:
<echarts
id="alertPie"
:options="option"
class="alertChart"
autoresize
/>
In my scripts section, I have these imports:
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
The "option" for the chart is a computed field defined thus:
computed: {
option () {
return {
backgroundColor: '#efefef',
textStyle: {
fontStyle: 'italic',
fontWeight: 'bold'
},
title: {
text: 'Alert Adoption',
subtext: 'Count by Alert',
left: 'center',
top: 10,
textStyle: {
color: '#ee0022',
textBorderColor: '#000000',
textBorderWidth: 2,
textShadowColor: 'rgba(0,0,0,0.5)',
textShadowBlur: 4,
fontWeight: 'bold',
textShadowOffsetX: 2,
textShadowOffsetY: 2,
fontSize: 28
},
subtextStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center'
},
series: [
{
name: 'pie',
type: 'pie',
data: this.alertPieData,
radius: '40%',
center: ['50%', '40%'],
selectedMode: 'single',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
animationDuration: 2000
}
}
}
The pie shows the data correctly. The title and legend both show correctly. Of the imported items, only the tooltip is not working.
Like I said, my other charts are built the same and tooltips work. What could I have missed? I've stared at this and compared to my working examples and don't see any differences (other than data sources and title/label changes).
Any ideas?
Data sample below:
[ { "name": "Acthar Gel Med Order Alert", "value": 10 },
{ "name": "Anticoagulation / Hemoglobin Alert", "value": 6 },
{ "name": "Anticoagulation or Dual Antiplatelet / Hemoglobin Alert", "value": 7 },
{ "name": "Berinert Alert", "value": 10 },
{ "name": "Blood Culture Identification Alert", "value": 13 },
{ "name": "Clostridium Difficile Alert", "value": 9 },
{ "name": "Clostridium Difficile Lab Order Alert", "value": 15 },
{ "name": "Controlled Substance - Pyxis Removal / Late Admin Alert", "value": 13 } ]
I have tried this using CDN it should work.
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=pie-roseType
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl#2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat#latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts#{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
backgroundColor: '#efefef',
textStyle: {
fontStyle: 'italic',
fontWeight: 'bold'
},
title: {
text: 'Alert Adoption',
subtext: 'Count by Alert',
left: 'center',
top: 10,
textStyle: {
color: '#ee0022',
textBorderColor: '#000000',
textBorderWidth: 2,
textShadowColor: 'rgba(0,0,0,0.5)',
textShadowBlur: 4,
fontWeight: 'bold',
textShadowOffsetX: 2,
textShadowOffsetY: 2,
fontSize: 28
},
subtextStyle: {
color: 'black'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center'
},
series: [
{
name: 'pie',
type: 'pie',
data: [ { "name": "Acthar Gel Med Order Alert", "value": 10 },
{ "name": "Anticoagulation / Hemoglobin Alert", "value": 6 },
{ "name": "Anticoagulation or Dual Antiplatelet / Hemoglobin Alert", "value": 7 },
{ "name": "Berinert Alert", "value": 10 },
{ "name": "Blood Culture Identification Alert", "value": 13 },
{ "name": "Clostridium Difficile Alert", "value": 9 },
{ "name": "Clostridium Difficile Lab Order Alert", "value": 15 },
{ "name": "Controlled Substance - Pyxis Removal / Late Admin Alert", "value": 13 } ],
radius: '40%',
center: ['50%', '40%'],
selectedMode: 'single',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
animationDuration: 2000
}
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
I've been researching for hours trying to figure out this issue. I use ChartJS and trying to build line chart. It seems i have no gap between my chart and its legend, and need to add more space between them.
It should be like this:
But i got this (see my code snippet)
Here's my code:
new Chart(document.getElementById("line-chart"), {
type: "line",
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [
{
label: "A",
fill: false,
data: [10, 30, 60, 100],
borderWidth: 1,
backgroundColor: "red",
borderColor: "red",
},
{
label: "B",
fill: false,
data: [28, 80, 60, 60],
borderWidth: 1,
backgroundColor: "green",
borderColor: "green",
},
],
},
options: {
legend: {
align: "start",
position: "right",
labels: {
usePointStyle: true,
fontSize: 10,
},
},
elements: {
line: {
tension: 0,
},
},
responsive: true,
maintainAspectRatio: false,
},
});
canvas {
height: 35vh !important;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<head></head>
<body>
<canvas id="line-chart"></canvas>
</body>
Depending on where the legend is placed there are some quick fix options available. See this question
For your case and, more often than not, I would recommend generating your own html legend which will give you full control.
You can set this up in the options:
options: {
legend: {
display:false, //turn default legend off
},
legendCallback : legendBuilder, //link to your custom function returning html string
}
Define where your legend will go in the html:
<div id="chart-container">
<canvas id="line-chart"></canvas>
<div id="chart-legend"></div>
</div>
Then generate your legend:
var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();
working example
I have a cytoscape.js model, where edges between nodes represent different relations.
I want to have possibility to display something like round shape or button in the middle of the edge, where user could click and get popup to change the relationship type.
So far I see in base package there is no option to display round shape.
I am using dagre layout, and this is my current edge configuration:
{
selector: "edge",
style: {
width: 1,
"font-size": "20px",
//opacity: "0.5",
label: "data(type)",
color: function(ele) {
return getEdgeColor(ele.data("type"));
},
"line-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"target-arrow-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"curve-style": "straight",
"target-arrow-shape": "triangle"
}
},
Could you recommend me any easy solution?
I have a workaround for this (the editation works on the whole edge, the dot is just for the looks:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px'
}
},
{
selector: 'edge',
css: {
'font-size': "40px",
'label': "\u2022",
'curve-style': 'bezier',
'target-arrow-shape': 'data(arrow)'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n2',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n3',
arrow: 'triangle'
}
},
]
},
layout: {
name: 'concentric',
minNodeSpacing: 140,
}
});
cy.cxtmenu({
selector: 'edge',
menuRadius: 90,
commands: [{
content: 'Direction',
select: function(edge) {
edge.move({
source: edge.target().id(),
target: edge.source().id()
});
}
}]
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
.cxtmenu-disabled {
opacity: 0.333;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/cytoscape#3.10.1/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cxtmenu#3.1.1/cytoscape-cxtmenu.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I use the ctx-menu extension here (right click on edge to open menu) and the dot is just an unicode character.
I Serialized my data in code behind as;
Dim classes As List(Of SerializedJsonDT) = SerializedJsonDT.GetJsonFriendlyClasses(dt)
jsonNTMS = JsonConvert.SerializeObject(classes)
Then I received this data from aspx page as;
<script type="text/javascript">
var obj = JSON.parse('<%=jsonNTMS%>');
var catName = obj[0].name;
var ser1Name = obj[1].name;
var ser2Name = obj[2].name;
var catData = obj[0].data;
var ser1Data = obj[1].data;
var ser2Data = obj[2].data;
var cSstopHere2 = 2;
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
height: 400,
width: 600,
spacingRight: 20,
type: 'spline',
backgroundColor: '#1a1818',
events: {
load: function () {
this.series[1].setData(eval(ser1Data), true, true);
this.series[0].setData(eval(ser2Data), true, true);
}
}
},
title: {
text: 'GÜNLÜK DÖVİZ STATİĞİ - USD',
style: {
color: '#ffffff',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
categories: catData,
labels: {
style: {
color: '#ffffff',
fontSize: '10px'
}
},
tickInterval: 1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
yAxis: {
title: {
text: '1 USD = ? TL',
style: {
color: '#ffffff',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
},
},
min: 2.1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
color: '#ffffff'
}
},
lineWidth: 2
}
},
series: [{
name: "USD: " + ser1Name,
data: []
},{
name: "USD: " + ser2Name,
data: []
}],
});
chart.redraw
});
</script>
I can see my chart container but only the categories shown. I cant see my series in my highchart.
The web form I have;
<body>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</form>
</body>
Does anyone knows how to make my highcharts shows my series?
My categories was time values and I convert them to string before serialized. (08:17, 09:45 etc). And my series data originally was decimal values and I convert them to string before serialized. I did place ser1Data first and didn't work. So I try to use set data events. I guess I have to convert my series data in javascript to decimal. But I rather use this process in my custom "Public Class SerializedJsonDT" class. mason help me to build the class.
Kind Regards...