In my fiddle, I'm trying to replicate plotting a DevExpress's DevExtreme doughnut chart:
var dataSource = [{
region: "Asia",
val: 4119626293
}, {
region: "Africa",
val: 1012956064
}, {
region: "Northern America",
val: 344124520
}, {
region: "Latin America and the Caribbean",
val: 590946440
}, {
region: "Europe",
val: 727082222
}, {
region: "Oceania",
val: 35104756
}];
$("#container").dxPieChart({
dataSource: dataSource,
title: "The Population of Continents and Regions",
tooltip: {
enabled: true,
format: "millions",
percentPrecision: 2,
customizeTooltip: function(arg) {
return {
text: arg.valueText + " - " + arg.percentText
};
}
},
legend: {
horizontalAlignment: "right",
verticalAlignment: "top",
margin: 0
},
series: [{
type: "doughnut",
argumentField: "region",
label: {
visible: true,
format: "millions",
connector: {
visible: true
}
}
}]
});
#container {
height: 440px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
This official code is working in ChartJS's fiddle.
Since I'm not doing it in an ASP.NET MVC project, chartjs after the DevExpress MVC scripts shall not be an issue
What am I missing here?
Check the console - it isn't finding the .dxPieChart function because it can't load the 'insecure' chart.js script:
'Mixed Content: The page at 'https://jsfiddle.net/xameeramir/51h3bmgf/' was loaded over HTTPS, but requested an insecure script 'http://cdn3.devexpress.com/jslib/15.2.10/js/dx.chartjs.js'. This request has been blocked; the content must be served over HTTPS.'
Maybe you find a https CDN link for the library?
Change http cdn to https. Https cdn for the devextreme chartjs 13.1.5 library: https://dxjscdn2.blob.core.windows.net/jslib/13.1.5/js/dx.chartjs.js
Related
The following fiddle shows what is happening to my users in mobile when rotating between portrait and landscape.
On load, the chart shows up as desired.
Hit 'Step 1', the chart shrinks and is shown as desired.
Hit 'Step 2', the chart returns to original size, but the vertical axis labels overlap.
http://jsfiddle.net/burchw78/rwb7ms93/
I have tried chart.redraw(), but with no success. Any ideas?
$(function() {
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
renderTo: 'industrybasicbar'
},
title: {
text: 'All Private Industries Expected to Add Jobs by 2024'
},
xAxis: {
categories: ['Health care and social assistance', 'Professional and business services', 'Trade, transportation, and utilities', 'Leisure and hospitality', 'Manufacturing', 'Construction', 'Local government', 'Financial activities', 'Other services', 'Natural resources and mining', 'Private educational services', 'State government', 'Information', 'Federal government'
],
title: {
text: null
}
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Projected Growth',
data: [46300, 45700, 36200, 35800, 21100, 17600, 9600, 9100, 8800, 6100, 4700, 2800, 2000, -1000
],
negativeColor: 'black'
}]
});
$('#resize').click(function () {
chart.setSize(300, 300);
});
$('#resize2').click(function () {
chart.setSize(500, 300);
});
});
It seems to be a bug. I reported it here: https://github.com/highcharts/highcharts/issues/8510
Workaround:
Update textOverflow manually:
$('#resize').click(function() {
chart.setSize(300, 300);
chart.xAxis[0].update({
labels: {
style: {
textOverflow: 'ellipsis'
}
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/axhcwrmd/
Chart.js is not displaying in visual studio. it is not running don't know why.
I have checked with sublime, notepad, there it is working properly. but in Visual Studio asp.net platform it is not working.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Please refer Tutorials on adding Charts into ASP.NET MVC Applications for integrating CanvasJS Charts in your ASP .Net Application.
I need a little bit of help to change data from a chart, when an option is selected from a drop-down menu. I've searched for similar questions but nothing was really helpful.
So far I have this code and I don't understand what am I missing that it's not working?
the html:
<div id="scroll-container">
<select id="menu">
<option value="Oil">Oil</option>
<option value="Gas">Gas</option>
</select>
<div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
</div>
and the javascript part:
<script>
$(function () {
var value = document.getElementById("menu").value;
var chart = document.getElementById("container_Oil");
$('#menu').change(function(evt){
var dataSelection = eval($("#menu").val());
var chart = $('#container_Oil').ejChart ({
dataSource: dataSelection
})
})
})
</script>
The date I am using for the chart, I have in another file, app.js and it contains the following:
var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
{
primaryXAxis:
{
//labelFormat: 'dd, MM',
//labelFormat: "{value}",
range: { min: 1, max: 30, interval: 2 },
font: { size: '10px' },
labelRotation: 20,
visible :false
},
primaryYAxis:
{
labelFormat: "{value}",
//range: { min: 39, max: 40, interval: 0.1 },
rangePadding: 'normal',
font: { size: '10px' },
visible : false
},
commonSeriesOptions: {
tooltip: { visible: true },
type: 'line', enableAnimation: false,
marker:
{
shape: 'circle',
size:
{
height: 5, width: 5
},
visible: true
},
border: { width: 2 }
},
series: [{
//Binding series with a JSON data source
dataSource: Oil,
//Mapping name of the field containing X value to series
//xName: 'Day',
//Mapping name of the field containing Y value to series
yName: 'Actual',
name: 'Actual'
},
{ dataSource: Oil,
//xName: 'Day',
yName: 'Plan',
name: 'Plan'
}
],
canResize: true,
load: 'onchartload',
title: { text: 'Product - Oil', font: { size: '12px' } },
legend: { visible: true, position: "top" }
});
I want when I select for example Gas in the selector to change the dataSource for the chart from Oil to Gas.
I tried debugging and it said that "Oil" and "Gas" were undefined. Then I tried to put the data for "Oil" and "Gas" in the same file with the script. No more error, but still not working. I think I am missing something important in my code, but I can't seem to understand what. A little help would be more than welcomed!
Perhaps it only creates the charts on page load? Since it's only two charts, you could create them both on page load, and then hide and show the divs depending on the dropdown value for a quick fix.
Did you tried?
$('#menu').on( "change", function(evt){
Instade of:
$('#menu').change(function(evt){
I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?
series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series
your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper
I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},