I am developing a pie chart using HighCharts. Using asp.net MVC.
I try to feed the java a data string using a ViewData like this:
data: (#ViewData["data"])
When I view this data in the JSON viewer, it looks like this:
[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
When I put it hardcoded behind the ' data: ' property, the pie is neatly shown.
However it failes when I try to feed it from the action method. In that case, it looks like this:
"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"
How can I make the JSON data without all the escape strings, so the Highcharts accepts it?
#model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="../../Scripts/jquery-1.10.2.min.js"></script>
<script src="../../scripts/highcharts.js"></script>
<meta name="viewport" content="width=device-width" />
<title>CruiseControlChart</title>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart / configure the highcharts
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '#ViewData["charttitle"]'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
colorByPoint: true,
data: (#ViewData["data"])
data: [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
//onderstaand is een setje statische test data
//data: [{
// name: "Bouwend",
// y: 3
//}, {
// name: "Build succesvol",
// y: 64,
// sliced: true,
// selected: true
//}, {
// name: "Build gefaald",
// y: 33
//}]
}]
});
});
</script>
<style type="text/css">
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="display: block">
<a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
#*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*#
<div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
</a>
<br/>
<div class="col-centered"><span> Oldest build time: #ViewData["eldestbuildtime"]</span></div>
</div>
</div>
</body>
</html>
Try updating code like this:
data: JSON.parse("#Html.Raw(#ViewData["data"])")
Related
I am using c3.js to generate a graph. I want to put an image on top of each bar, on the label. So that the image is shown well I would like the graphic to have a space in the top that gives me the possibility of having the image without leaving the svg
https://jsfiddle.net/ao2xojnx/
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels:true,
type:'bar'
},
axis: {
}
});
There are two ways for doing this. Both have the same result and both need hardcoded values.
First way: set the y axis maximum:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
max: 700
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Second way: set the padding.top:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
padding: {top:200, bottom:0}
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
Pay attention to the fact that, in both ways, you'll have extra ticks in the y axis.
I am very new to JavaScript. I want to use w2ui panels to create a webpage for data visualization using D3.js.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
d3.select("body")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
</script>
</body>
</html>
My question is how to specify D3js to draw a rectangular in left pane (or any specified pane) of the w2ui panel. Thank you!
First, you should probably check out the w2ui docs for layouts / panels and learn about the different methods to fill the panels (content(), set(), load(), html(), ...).
The below example will draw your blue box into the main panel.
It's not the best method to do what you want (check out onContent for an alternative to the timeout), but it should give you an idea how to achieve your goal.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: '<div style="height: 100%; width: 100%" id="my_div"></div>' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
setTimeout(function(){
d3.select("#my_div")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
}, 100);
</script>
</body>
</html>
I have the following code that make a simple line chart of price during the day
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flot Line Graph</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
<form>
<input id="price_cat" type="radio" name="price_val" value="0" checked> LMP<br>
<input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
<input id="price_cat" type="radio" name="price_val" value="2">MCC
</form>
</div>
<div class="col-md-4">
<h4 id ="title"></h4>
<div id="placeholder" style = "width:850px; height:450px"></div>
<h4>Hour</h4>
</div>
</div>
</body>
<script type="text/javascript">
//Rome, Italy
var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);
});
$.when(mkt_data).then(function(data) {
var price_data = data
var collection = []
var lmp_c =[]
var mcc_c = []
var mlc_c = []
var series = []
data.forEach(function(a) {
var lmp_s = []
var mcc_s = []
var mlc_s = []
lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
lmp_c.push(lmp_s);
mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
mcc_c.push(mcc_s)
mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
mlc_c.push(mlc_s)
})
series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})
console.log(series[0].label);
$("#title").html("Average LMP per hour of the Day Jan - June 2016")
$.plot($("#placeholder"), [series[0]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
$("input:radio[name=price_val]").change(function(){
var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);
$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")
$.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
});
});
the chart work and so does the change listener but I can't get the fade in to work properly. I would usually attached it to the element selector but the flot libraries $.plot() function is making it unclear to me where I should put the call to fadeIn(). I just want to achieve a smoother transition when changing datasets. The fade in call is at line 114.
I use Highcharts Bubble as example from its official website and try to modified it using Framework CodeIgniter.
I run it in GoogleChrome and Firefox but not show anything.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>STATISTIK</title>
</head>
<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet">
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script>
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 10px;
}
</style>
<body>
<div id="content">
</div>
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /-->
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Formasi Tenaga Kerja'
},
series: [{
data: [[97,36,1000]],
name: 'Area Medan'
}, {
data: [[25,10,1000]],
name: 'Area Lubuk Pakam'
}, {
data: [[47,47,1000]],
name: 'Area Binjai'
}, {
data: [[75,80,1000]],
name: 'Area Sibolga'
}, {
data: [[60,25,1000]],
name: 'Area Rantau Prapat'
}, {
data: [[100,80,1000]],
name: 'Area Padang Sidempuan'
}, {
data: [[80,55,1000]],
name: 'Area Nias'
}, {
data: [[75,80,1000]],
name: 'Area Pematang Siantar'
}]
});
});
</script></body>
</html>
Thnks for every reply.
regards
try importing highcharts-more.js file.
Look at the working example here :
DEMO
code:
HTML:
<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>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.
What it does in document mode IE8:
When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)
My JS:
$(function () {
var chart;
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 200
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
layout: 'vertical'
},
credits: {
enabled: false
},
title: {
margin: 30,
style: {
color: '#6e685c',
fontSize: '10px'
}
},
tooltip: {
pointFormat: 'Aantal: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size:'100%',
dataLabels: {
enabled: true,
color: '#454545',
format: '{point.y}',
distance: 10
}
}
}
}
$(document).ready(function () {
// Build the chart
options.title.text = 'Financieel fout';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-1').highcharts(options);
// Build the chart
options.title.text = 'Financieel onzeker';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-2').highcharts(options);
// Build the chart
options.title.text = 'Service desk';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-3').highcharts(options);
// Build the chart
options.title.text = 'Controle';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-4').highcharts(options);
});
$("body").width($("body").width()-200).delay(1000).width($("body").width()+200);
});
The HTML:
<div class="row">
<div class="col-md-6 graph-container border-right">
<h4>Rechtmatigheid</h4>
<div class="clearfix">
<div id="graph-1" class="col-md-6 no-horizontal-padding"></div>
<div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div>
</div>
</div>
<div class="col-md-3 graph-container border-right no-horizontal-padding">
<h4 class="padding-left">Kwaliteit</h4>
<div class="graph-container">
<div id="graph-3" class=""></div>
</div>
</div>
<div class="col-md-3 graph-container no-horizontal-padding">
<h4 class="padding-left">Workload</h4>
<div class="graph-container">
<div id="graph-4" class="no-horizontal-padding"></div>
</div>
</div>
</div>
And the CSS
/***************************************************************/
/* GRAPHS */
/***************************************************************/
.graph-container{
}
.graph-container.border-right{
border-right: 1px solid #e5e5e5;
}
.graph-container .graphs-info{
margin: 20px 0px;
}
.graphs-info{
color: #6e685c;
line-height: 26px;
}
.graphs-info .content-title{
font-size: 17px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
.graphs-info .graphs-info-title{
display: inline-block;
margin-right: 6px;
}
.graphs-info .error{
color: #830020;
}
.padding-left{
padding-left: 20px !important;
}
Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)
Use comments in HTML for IE8, like this:
<!--[if IE 8]>
<style>...</style>
<![endif]-->
The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.