Skip to content

Commit

Permalink
Line Chart Reworked
Browse files Browse the repository at this point in the history 
- line chart with area fill
- volume chart with color matched with Chinese custom (red = rise,
green = fall)
  • Loading branch information
@freeman990
freeman990 committed Jun 14, 2017
1 parent 0f51958 commit 38e4fe3
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 63 deletions.
35 changes: 17 additions & 18 deletions Freeman's Chart.sketchplugin/Contents/Sketch/chart-candle.js
View file
Expand Up @@ -10,8 +10,8 @@ var onRun = function(context) {

var doc = context.document;
var page = doc.currentPage();
var artb = page.currentArtboard();
var artb = page.currentArtboard();

var drawArea1 = {w:1008, h:188};
var color_rise = "#F64843";
var color_fall = "#5C9F34";
Expand Down Expand Up @@ -84,20 +84,20 @@ var onRun = function(context) {
barGap = newBarGap;
barNum = newBarNum;

var CHART_wrapper = newGroup("K线图", context.document.currentPage().currentArtboard());
var CHART = newGroup("图表", CHART_wrapper);
var part_rise = newGroup("上涨", CHART);
var part_fall = newGroup("下跌", CHART);
var stick_rise = newGroup("线", part_rise);
var stick_fall = newGroup("线", part_fall);
var bar_rise = newGroup("块", part_rise);
var bar_fall= newGroup("块", part_fall);
var CHART_wrapper = addGroup("K线图", context.document.currentPage().currentArtboard());
var CHART = addGroup("图表", CHART_wrapper);
var part_rise = addGroup("上涨", CHART);
var part_fall = addGroup("下跌", CHART);
var stick_rise = addGroup("线", part_rise);
var stick_fall = addGroup("线", part_fall);
var bar_rise = addGroup("块", part_rise);
var bar_fall= addGroup("块", part_fall);

if(barNum >= data.length){
dataStartID = 0;
}
else{
dataStartID = data.length - barNum;
dataStartID = data.length - barNum;
}

var valueBoundaryTestAry = [];
Expand Down Expand Up @@ -143,13 +143,13 @@ var onRun = function(context) {
{
var dataItem = data[i];
var order = i-dataStartID;

var newBY = Math.round(dataDrawH - (dataItem[indexOpen] - priceMin) * yScale);
var newSY = Math.round(dataDrawH - (dataItem[indexHigh] - priceMin) * yScale);

var newBX = Math.round(order * (barWidth+barGap));
var newSX = Math.floor(barWidth/2) + newBX;

var newBH = Math.round((dataItem[indexClose] - dataItem[indexOpen]) * yScale*-1);
if(newBH == 0){
newBH = 1;
Expand Down Expand Up @@ -202,13 +202,13 @@ var onRun = function(context) {
//==============================================



/*
function drawLabelY(valMin, valMax, num, drawHeight){
var labelContainer = new createjs.Container();
var labelRange = valMax - valMin;
for(var i=0; i<num; i++){
for(var i=0; i<num; i++){
var newLabel = drawLabel(0, 0, (valMin+i*labelRange/num).toFixed(2));
if(i == 0){
Expand All @@ -220,10 +220,9 @@ var onRun = function(context) {
labelContainer.addChild(newLabel);
}
labelContainer.name = "labelY";
labelContainer.name = "labelY";
return labelContainer;
}
*/

};

};
139 changes: 109 additions & 30 deletions Freeman's Chart.sketchplugin/Contents/Sketch/chart-line.js
View file
@@ -1,56 +1,135 @@
@import "share.js";
@import "data-timeline.js";

var artb;
var drawArea = {w:0, h:0};
var tradeMinutes = 240;
/*----- var for Price Line -----*/
var priceDataAry = [];
var priceBorderTestAry = [];
var priceOffsetMax;
var priceBorderMax;
var priceBorderMin;
/*----- var for Average Price Line -----*/
var avgStep = 10;
/*----- var for Volume Line -----*/
var volDataAry = [];
var volMax;
var volMin;

onRun = function(context)
{
log("=======================================================================");
log("=======================================================================");
log("=================== RUN THE TIMELINE CHART ====================");
log("=======================================================================");
log("=======================================================================");

var doc = context.document;
var page = doc.currentPage();
var artb = page.currentArtboard();

var drawArea = {w:100, h:100};
if(artb != undefined)
artb = context.document.currentPage().currentArtboard();
if(artb == undefined)
{
//No artboard selected, giving defalut size
drawArea = {w:800, h:600};
}else {
//Artboard selected, use as drawArea
drawArea = {w:artb.frame().width(), h:artb.frame().height()};
}

var tradeMinutes = 240;
/*----- get DataArray -----*/
for(i in data_timeline)
{
priceDataAry.push(data_timeline[i][indexPrice])
volDataAry.push(data_timeline[i][indexVolume])
}

var priceBoundaryTestArray = [];
for(i in data_timeline)
/*----- get Price -----*/
for(i in priceDataAry)
{
var priceOffset = Math.abs(data_timeline[i][indexPrice]-data_timeline_open);
priceBoundaryTestArray.push(priceOffset);
var priceOffset = Math.abs(priceDataAry[i]-data_timeline_open);
priceBorderTestAry.push(priceOffset);
}
priceOffsetMax = getMaxNum(priceBorderTestAry, "max");
priceBorderMax = data_timeline_open + priceOffsetMax;
priceBorderMin = data_timeline_open - priceOffsetMax;
volMax = getMaxNum(volDataAry, "max");
volMin = getMaxNum(volDataAry, "min");

var OffsetMax = getMaxNum(priceBoundaryTestArray, "max");
var boundaryMax = data_timeline_open + OffsetMax;
var boundaryMin = data_timeline_open - OffsetMax;
buildLineChart();
}

log(OffsetMax);log(boundaryMax);log(boundaryMin);
var yScale = drawArea.h / (boundaryMax - boundaryMin);
function getPriceChartPoints(dataAry, valMax, valMin, drawArea){
var pntAry = [];

var timelinePointAry = [];
for(k in data_timeline)
{
var pX;
var pY;
for(i in dataAry){
var pX = Math.floor(i * (drawArea.w / dataAry.length));
var pY = valueToPosY(dataAry[i], valMax, valMin, drawArea.h);
pntAry.push({x:pX, y:pY});
}

pX = Math.floor(k * (drawArea.w / tradeMinutes));
return pntAry;
}

if(k<tradeMinutes)
{
pY = Math.round(drawArea.h - (data_timeline[k][indexPrice] - boundaryMin) * yScale);
timelinePointAry.push({x:pX, y:pY});
}
function getAverageChartPoints(dataAry, valMax, valMin, drawArea, avgStep){
var pntAry = [];

}
for(i=avgStep; i<dataAry.length; i += avgStep){
var pX = Math.floor(i * (drawArea.w / dataAry.length));
var avgVal = 0;
for(k=0; k<avgStep; k++){
avgVal += dataAry[i-k];
}
avgVal /= avgStep;
var pY = valueToPosY(avgVal, valMax, valMin, drawArea.h);

pntAry.push({x:pX, y:pY});
}

return pntAry;
}

function darwVolChart(dataAry, valMax, valMin, drawArea, priceData, groupAry){
for(i in dataAry){
var pX = Math.floor(i * (drawArea.w / dataAry.length));
var pY = valueToPosY(dataAry[i], volMax, volMin, drawArea.h/4);
var pntAry = [
{x:pX, y:drawArea.h},
{x:pX, y:pY + drawArea.h*0.75}];

if(priceData[i]-priceData[i-1] > 0){
drawLine(pntAry, hexToMSColor("#F64843"), groupAry[0], "vol");
}else {
drawLine(pntAry, hexToMSColor("#5C9F34"), groupAry[1], "vol");
}

}
}

function buildLineChart(){
var root = addGroup("LineChart", artb);
var volFolder = addGroup("Vol", root);
var volRise = addGroup("rise", volFolder);
var volFall = addGroup("fall", volFolder);

var pricePnts = getPriceChartPoints(priceDataAry, priceBorderMax, priceBorderMin, drawArea);
var avgPnts = getAverageChartPoints(priceDataAry, priceBorderMax, priceBorderMin, drawArea, 10);

var priceAreaPnts = pricePnts.slice();
priceAreaPnts.push({x:priceAreaPnts[priceAreaPnts.length-1].x, y:drawArea.h});
priceAreaPnts.push({x:0, y:drawArea.h});

var a = drawLine(priceAreaPnts, hexToMSColor("#667788"), root, "分时曲线_area");
var b = drawLine(pricePnts, hexToMSColor("#667788"), root, "分时曲线_line");
var c = drawLine(avgPnts, hexToMSColor("#ff8833"), root, "均线_line");
darwVolChart(volDataAry, volMax, volMin, drawArea, priceDataAry, [volRise, volFall]);

drawLine(timelinePointAry, hexToMSColor("#667788"), artb, "分时曲线");
a.setIsClosed(true);
a.style().borders()[0].setIsEnabled(false);
var fill = a.style().addStylePartOfType(0);
fill.color = hexToMSColor("#667788");
fill.setOpacity(0.2);

}
volFall.resizeToFitChildrenWithOption(0);
volRise.resizeToFitChildrenWithOption(0);
volFolder.resizeToFitChildrenWithOption(0);
root.resizeToFitChildrenWithOption(0);
}
32 changes: 17 additions & 15 deletions Freeman's Chart.sketchplugin/Contents/Sketch/share.js
View file
@@ -1,21 +1,13 @@
//===============================================
//========== Create a new group ===========
//===============================================
function newGroup(name, parent){
function addGroup(name, parent){
name = name||"Group";
parent = parent || "";



var group = MSLayerGroup.new();
group.setName(name);

if(parent == ""){
doc.currentPage().addLayers([group]);
}else{
parent.addLayers([group]);
}



parent.addLayers([group]);
return group;
}

Expand Down Expand Up @@ -43,7 +35,7 @@ function drawBox(x, y, width, height, color, parent, radius, name) {
//Add the newly created layer to selection to update frame & make next draw pos right
//doc.currentPage().deselectAllLayers();
rectLayer.setIsSelected(true);

return(rectLayer);
}

Expand Down Expand Up @@ -71,6 +63,8 @@ function drawLine(dotAry, color, parent, name)
layerStyle.setPosition(0);

parent.addLayers([lineLayer]);

return lineLayer;
}

//===============================================
Expand All @@ -80,7 +74,7 @@ function drawLine(dotAry, color, parent, name)
function getMaxNum(ary, direction, length){
direction = direction || "max";
length = length || ary.length;
var op = ary[0];
var op = ary[0];

if(direction == "min"){
for(var i=0; i<length; i++){
Expand Down Expand Up @@ -128,4 +122,12 @@ function getAvgNum(ary, index, avg)
}else{
return 0;
}
}
}

function valueToPosY(value, vMax, vMin, height){
var posY;

posY = height - ( ( value - vMin ) / ( vMax - vMin ) * height );

return Math.round(posY);
}
Binary file removed Others/Icons.sketch
View file
Binary file not shown.
Binary file added Others/VisualAssets.sketch
View file
Binary file not shown.

0 comments on commit 38e4fe3

Please sign in to comment.