score:1
var envelopBorder =[[-20, 63], [-20, 85], null, null,null,null,[19, 130], [35,150], [60,150],[65,148], [80,140],[80,100],[65,82],[55,70],[40,67],[20,63],[15,63],[-20,63]] ;
var dasshedBorder =[[-20, 85],[-20, 100],[1, 130],[19, 130]] ;
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Operating Envelop'
},
xAxis: {
title: {
enabled: true,
text: 'Evaporating Temperature (°F)'
},
gridLineWidth: 0,
lineWidth:1,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Normal',
data: envelopBorder
}, {
name: 'Dash',
data: dasshedBorder,
dashStyle: 'dash'
}]
});
Result :-
score:3
Yes solid and dashed lines in one line graph is possible .I have implemented it using a java program to create my data for series .
Create two series
series : [
{
name : 'Series 1',
id : 'series1',
data : mydashData,
allowPointSelect : true,
marker: {
enabled: false
}
},
{
name : 'Series 2',
data : myDotData,
dashStyle : 'dot',
id : 'series2',
color : '#A81F40',
allowPointSelect : true,
marker: {
enabled: false
}
}
}
Consider these points 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
From 1 -5 its dashed line . From 5-10 its dotted Line . From 10-15 its dashed line again . Consider some sample X axis Values as you wish.
This is the java logic to create two series data points : -
List dashList;
List dotList;
Initial = FirstPoint ;
LOOP
if Initial == Dash and LastParsedPoint = Dash
add to DashList corresponding to that X axis value
if Initial ==Dot and LastParsePoint = Dot
add to DotList corresponding to that X axis value
if Initial == Dot and LastParsePoint =Dash
add to DashList Y and X values
add to DashList y =NULL and same X value
add to DotList y and X value.
if Initial =Dash and LastParsePoint =Dot
add to DotList Y and X values
add to DotList Y =NULL and same X value
add to DashList Y and X value.
LastParsePoint =Initial
END LOOP.
Send this two list as json to Jsp or HTMl page and assign it to data of both the series .
Here is a sample i created .Please save this code in an HTMl file As Chart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var colors = Highcharts.getOptions().colors;
var pathname = window.location.pathname;
//console.log(pathname);
var containerName = 1;
/*Creates a div element by passing index name and class*/
function create_div_dynamic(i, id, className) {
dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id', id + i); //give id to it
dv.className = className; // set the style classname
//set the inner styling of the div tag
dv.style.margin = "0px auto";
if (id == 'container') {
//hr = document.createElement('hr');
//br = document.createElement('br');//Break after Each Chart Container and Horizontal Rule.
//document.body.appendChild(br);
//document.body.appendChild(hr);
}
document.body.appendChild(dv);
}
/*Creates a span element by passing index name and class*/
function create_span_dynamic(i, id, className) {
dv = document.createElement('span'); // create dynamically div tag
dv.setAttribute('id', id + i); //append id to to name
dv.className = className; // set the style classname
//set the inner styling of the span tag
dv.style.margin = "0px auto";
document.body.appendChild(dv);
}
/*Get URL Parameters*/
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
$(document).ready(function() {
var json = getUrlParameter('json');
$.ajax({
type: 'GET',
url: json,
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
async: false,
contentType: "application/json",
success: function (datas){
//Each data table column/block index.
var blockNumber = 0;
//Each Row inside block index
var rowNumber = 0;
//Used to store previous charts row index for blank divs generation
var prevRowNum=0;
//Number of blank divs created .
var oldC=0;
//J : Chart Index
for (j = 0; j < 2; j++) {
for ( var key in datas.root[j]) {
var solid = [];
var dot = [];
for (i = 0; i < datas.root[j][key][0].solid.length; i++) {
solid.push([parseInt(datas.root[j][key][0].solid[i].date),parseFloat(datas.root[j][key][0].solid[i].value)|| null ]);
}
for (i = 0; i < datas.root[j][key][0].dot.length; i++) {
dot.push([parseInt(datas.root[j][key][0].dot[i].date),parseFloat(datas.root[j][key][0].dot[i].value)|| null ]);
}
var chartBlock = '';
var k = j;
//Container Name
var renderCont = 'container'+ ++j;
create_div_dynamic(j,'container','image-capture-container');
//Creating Charts
this['chart_' + j] = new Highcharts.Chart(
{
chart : {
renderTo : renderCont,
type : 'line',
zoomType : 'xy',
borderWidth : 0,
borderColor : '#ffffff',
borderRadius : 0,
width : 600,
height : 400,
plotShadow : false,
alignTicks :true,
plotBackgroundColor:'#C0C4C9',
//margin: [15, 10, 40,60],
style : {
//position : 'relative',
opacity : 100,
textAlign : 'center'
}
},
xAxis : {
useHTML : true,
type : 'datetime',
lineColor: '#ffffff',
tickInterval:30 * 24 * 3600 * 1000,
tickColor: '#000000',
tickWidth: 1,
tickLength: 5
},
yAxis : {
title : {
useHTML :'true',
align : 'high',
offset:0,
rotation: 0,
y: 1,
x:-4,
},
lineWidth : 1,
gridLineWidth :2,
minorGridLineWidth : 1,
gridLineColor :'#FFFFFF',
lineColor:'DarkGray',
opposite : false,
maxPadding: 0.2,
labels : {
align : 'right',
x : -5
}
},
series : [
{
name : 'Solid Line',
id : 'series1',
data : solid,
allowPointSelect : true,
color : '#888888',
marker: {
enabled: false
}
},
{
name : 'Dashed',
data : dot,
dashStyle : 'dot',
id : 'series2',
color : '#666666',
allowPointSelect : true,
marker: {
enabled: false
}
}
]
});
create_div_dynamic(j,'main','main');
var main = 'main'+ j;
var chartDiv = $('#'+renderCont).children(":first").attr('id');
//console.log(chartDiv);
create_div_dynamic(j,'title_div','title_div');
$('#' + main).append($('#'+ chartDiv));
$('#' + renderCont).append($('#'+ main));
}
} //End of Each Chart Loop
}
});
});
</script>
</head>
<body id="mainBody">
</body>
</html>
I am posting the sample json in Jsfiddle here: https://jsfiddle.net/t95r60fc/
Save this json as json1.json and keep it in same directory as Chart.html and open the html in browser as given below :
file:///C:/temp/Chart.html?json=C:/temp/json1.json?callback=jsonCallback
Final output will be like this :
score:8
Yes. This is possible. Hard to picture your chart but what you could have is 2 series. One is your real data and the other is the predicted/future data. To set the line style use dashStyle.
score:14
I don't think you can have two different kind of line style in one series, but you can split the series into two, then specify the x coordinates for the second series to start where the first left off. Then you can set the dashStyle of that line.
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
name: 'New York',
data: [{x: 5, y: 21.5}, {x: 6, y: 22.0}, {x: 7, y: 24.8}, {x: 8, y: 24.1}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
dashStyle: 'dash'
}]
Here's a JSFiddle illustrating it: http://jsfiddle.net/mkremer90/zMZEV/1/
score:30
Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.
Examples
$(function() {
$('#container').highcharts({
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c',
style: 'dotted',
}, {
value: 10,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}, ]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>$(function() {
$('#container').highcharts({
title: {
text: 'Zone with dash style'
},
subtitle: {
text: 'Dotted line typically signifies prognosis'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
zoneAxis: 'x',
zones: [{
value: 8
}, {
dashStyle: 'dot'
}]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
Source: stackoverflow.com
Related Query
- Highcharts: Line graph with half solid line and half dotted line?
- Creating a line graph with highcharts and data in an external csv
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Programmatically draw rect and line in Highcharts with zoom
- Highcharts - Global configuration with common code and unique data & Headings
- HighCharts & MVC: How to load whole graph definition and data with JSON?
- Highcharts connectNulls with dotted line
- (Horizontal) bar and line chart with Highcharts
- Can't disconnect line chart with [null,null] and irregular intervals in Highcharts
- How to stop plotting the graph if data is blank and continue if data is there on the y-axis in base line highcharts
- move one vertical line with mouse over and find intersection point with two highcharts
- Highcharts plot offset on line graph with categories
- Find and fill intersection of line chart with plot line in highcharts
- Highcharts with a thick line - at 0 values the line is half hidden
- Highcharts to display area range and line chart with data from a CSV file
- highcharts line graph with ajax
- how to make chart real time with 2 line and get data from php with highcharts
- Highcharts redraw and sort data on draggable line graph
- highcharts graph with one regular column and one stacked column
- HIGHCHARTS How to to make separate colors for shaded region and the line in Area Graph
- Highcharts step line with gaps and series like [x,y]
- Create Line in Highcharts with start and end point
- How to get 2 data-points with one name in series Line Graph Highcharts Reactjs
- Plot line is hiding behind trend in highcharts and movement of plotline is become very hindrance when loaded with very large data sets
- JSON format for Highcharts line and bar graph
- missing value in highcharts line graph results in no line, just points
- Displaying hours and minutes on x-axis with Highcharts
- how to import highcharts with webpack and babel
- Highcharts data series issue with ajax/json and PHP
- Highcharts / jQuery - destroy and rebuild chart with original options
More Query from same tag
- highcharts: when adding new data series add new Y axis only if the title is different from existing Y axis
- Overlay 2 series of data of different length with highcharts
- Highcharts Stacked Area Data
- highcharter change highlight color on hover
- Implement chartit in Django 1.6 with Python 2.7 - TypeError: 'NoneType' has no attribute __getitem__
- Highchart Y-Axis Scale Values Missing
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- Highcharts.js question: is it possible to not draw line beyond MACD indicator histogram?
- Add design to plotLabel Highcharts
- Render bar chart
- Highcharts how to add treemap upon click event on line chart?
- Highcharts Spiderweb chart xAxis labels disappear on long label name
- Highcharts text labels for y-axis
- HighCharts not being displayed in Partial view
- Highcharts - How to remove connecting line between fixed tooltip and point
- How to put two y-axis on a wicketcharts-highcharts chart in Java
- Highchart export not applying style(font size) on series data labels
- Why do I get 'Cannot read property 'isValid' of undefined' when using 400 data points?
- Highcharts - Format X axis with 2 digit hours in 24 hour format
- Want to fetch mysql Field record in highchart tooltip
- Highstock gapsize is causing line rendering issue
- highcharts custom datalabels duplicating
- Issue with highCharts range selector date format?
- Vertical line on x axis on midnight in HighCharts/HighStock
- Highcharts - Unable to remove xasis titles while drill down
- Get number and percentage on Highchart´s chart
- Highchart - Add dynamic data to the bar
- Trying to push data to a JSON array
- Highcharts (Gauge) and Highstock on the same page with Meteor
- How do I set a minimum upper bound for an axis in Highcharts?
