The line will change to area sometimes, but I don't know how to deal with this problem.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/highstock/4.2.5/highstock.src.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var options = {
"chart":{
"type": "line",
"height":500,
// "backgroundColor":"transparent",
// "spacingBottom":0,
// "spacingRight":1,
// "alignTicks":false,
"events":{
}
},
"rangeSelector":{
// "enabled":false
},
"credits":{
"enabled":false
},
"title":{
"text":null
},
"xAxis":{
// "labels":{
// },
"min":1514995200000,
"max":1516204800000,
// "gridLineColor":"#E9E9E9",
// "gridLineWidth":1,
// "tickWidth":0,
// "minTickInterval":86400000
},
"yAxis":[
{
"title":"",
"min":0,
"labels":{
// "useHTML":true,
"style":{
"color":"#2cbfbe"
}
},
"gridLineColor":"#E9E9E9",
"gridLineWidth":1,
"opposite":false
},
{
"title":"",
"min":0,
"labels":{
// "useHTML":true
},
"gridLineWidth":0,
"opposite":true
}
],
"legend":{
// "enabled":true,
// "verticalAlign":"top",
// "align":"left",
// "x":40,
// "y":-10,
// "floating":true,
// "borderWidth":0,
// "itemStyle":{
// "fontFamily":"Arial,微软雅黑",
// "fontColor":"#6e7384",
// "fontWeight":"normal"
// }
},
"plotOptions":{
"series":{
"lineWidth":2,
// "marker":{
// "enabled":false,
// "radius":1.5,
// "symbol":"circle",
// "states":{
// "hover":{
// "halo":{
// "size":8,
// "opacity":0.25
// }
// }
// }
// },
// "animation":{
// "duration":1500
// },
// "events":{
// }
},
// "area":{
// "fillOpacity":0.5,
// "lineWidth":0
// },
// "column":{
// "states":{
// "hover":{
// "color":"#eee"
// }
// }
// }
},
"tooltip":{
// "borderColor":"#666",
// "borderWidth":0,
// "borderRadius":2,
// "backgroundColor":"rgba(255, 255, 255, 0.8)",
// "useHTML":true,
// "shadow":false,
// "crosshairs":{
// "color":"#7ac943",
// "dashStyle":"shortdot",
// "width":1
// },
// "shared":true,
// "style":{
// "padding":"0"
// }
},
"exporting":{
"enabled":false
},
"navigator":{
"height":80,
"margin":60,
// "xAxis":{
// "type":"datetime",
// "opposite":true,
// "labels":{
// "opposite":true
// }
// },
// "outlineWidth":0
},
"scrollbar":{
// "barBackgroundColor":"#82cdcb",
// "barBorderWidth":0,
// "barBorderRadius":5,
// "buttonBackgroundColor":"#82cdcb",
// "buttonBorderWidth":0,
// "buttonArrowColor":"#fff",
// "buttonBorderRadius":2,
// "rifleColor":"#82cdcb",
// "trackBackgroundColor":"#d3dcdc",
// "trackBorderWidth":0,
// "trackBorderColor":"#d3dcdc",
// "trackBorderRadius":3,
// "height":10
},
"series":[
{
"name":"人口",
"data":[
{
"x":1514995200000,
"y":181864
},
{
"x":1515081600000,
"y":121360
},
{
"x":1515168000000,
"y":116758
},
{
"x":1515254400000,
"y":249596
},
{
"x":1515340800000,
"y":1891802.3
},
{
"x":1515427200000,
"y":4175895.4
},
{
"x":1515513600000,
"y":4172570.7
},
{
"x":1515600000000,
"y":5520244
},
{
"x":1515686400000,
"y":4449323.3
},
{
"x":1515772800000,
"y":3544046.6
},
{
"x":1515859200000,
"y":3713686.6
},
{
"x":1515945600000,
"y":3655995.1
},
{
"x":1516032000000,
"y":4828718.9
},
{
"x":1516118400000,
"y":4563104
},
{
"x":1516204800000,
"y":4660163
}
],
"yAxis":0
},
{
"name":"GDP",
"data":[
{
"x":1514995200000,
"y":4142
},
{
"x":1515081600000,
"y":2519
},
{
"x":1515168000000,
"y":1773
},
{
"x":1515254400000,
"y":6396
},
{
"x":1515340800000,
"y":18486
},
{
"x":1515427200000,
"y":12680
},
{
"x":1515513600000,
"y":11155
},
{
"x":1515600000000,
"y":13043
},
{
"x":1515686400000,
"y":12274
},
{
"x":1515772800000,
"y":11034
},
{
"x":1515859200000,
"y":12303
},
{
"x":1515945600000,
"y":11717
},
{
"x":1516032000000,
"y":13913
},
{
"x":1516118400000,
"y":14214
},
{
"x":1516204800000,
"y":16528
}
],
"yAxis":1
}
]
};
$('#container').highcharts('StockChart', options)
</script>
</body>
</html>
Related
my build config
"build": {
"mac": {
"target": [
"dmg",
"zip"
],
"publish": {
"provider": "generic",
"url": "http://ip/update/darwin/0.0.1",
"channel": "stable"
}
},
"win": {
"target": [
"squirrel",
"nsis"
]
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": false
}
},
command
"build_mac": "electron-builder --mac"
and main.js
const { app, BrowserWindow, dialog } = require('electron');
const { autoUpdater } = require('electron-updater');
const log = require('electron-log');
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
log.info('App starting...');
app.whenReady().then(function() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile('buildprodp/index.html');
win.webContents.openDevTools();
setInterval(() => {
win.webContents.send('submitted-form', `currentVersion - ${app.getVersion()}`);
}, 5000);
init(win);
});
app.on('ready', function() {
setTimeout(() => {
autoUpdater.checkForUpdates();
}, 6000);
});
// autoUpdate codes
const init = win => {
autoUpdater.on('checking-for-update', (ev, err) => {
win.webContents.send('submitted-form', '🔎 Checking for updates');
win.webContents.send('submitted-form', ev);
win.webContents.send('submitted-form', err);
});
autoUpdater.on('update-available', (ev, err) => {
win.webContents.send('submitted-form', '🎉 Update available. Downloading ⌛️');
});
autoUpdater.on('update-not-available', (ev, err) => {
win.webContents.send('submitted-form', '👎 Update not available');
});
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
const dialogOpts = {
type: 'info',
buttons: ['Restart', 'Later'],
title: 'Application Update',
message: process.platform === 'win32' ? releaseNotes : releaseName,
detail: 'plz restart',
};
dialog.showMessageBox(dialogOpts).then(returnValue => {
if (returnValue.response === 0) autoUpdater.quitAndInstall();
});
});
autoUpdater.on('error', message => {
win.webContents.send('submitted-form', message);
});
autoUpdater.on('download-progress', progressObj => {
win.webContents.send('submitted-form', 'down start');
});
};
it did work
6s after
autoUpdater.checkForUpdates();
List item
autoUpdater.on('checking-for-update'
autoUpdater.on('update-available',
!!skiping autoUpdater.on('download-progress'!!
autoUpdater.on('update-downloaded'
https://github.com/electron-userland/electron-builder/blob/master/packages/electron-updater/src/AppUpdater.ts#L555
Only 'download-progress' doesn't work
It was a cache problem
Deleting a folder works fine
Im ploting a 3-pie chart as a single Highchart in a resizable container with VueJs and vue-highcharts component.
To do this, I need then to redefine my pies positions and sizes when the container is resized. Im having a huge struggle in redrawing the pies after I alter my series positions and sizes. Here's some code:
<template>
<div class="multiple-pie-wrapper" ref="root">
<vue-highcharts style="height: 100%; width: 100%;" :Highcharts="Highcharts" :options="options" ref="chart"></vue-highcharts>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts';
import Highcharts from 'highcharts';
export default {
props: {
options: { type: Object, required: true }
},
data: function () {
return {
Highcharts: Highcharts
};
},
components: {
VueHighcharts
},
methods: {
reflow: function() {
var series = this.options.series;
//... Calculate the new positions and sizes and set it to
// series[i].size and series[i].center
// HERE IS WHERE I SHOULD REDRAW IT
}
},
mounted() {
this.reflow();
}
}
</script>
The highchart options:
{
"title":{
"text":"3 Pies"
},
"credits":{
"enabled":false
},
"exporting":{
"enabled":false
},
"series":[
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":true
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
},
{
"type":"pie",
"data":[
{
"name":"Firefox",
"y":45.0
},
{
"name":"IE",
"y":26.8
},
{
"name":"Chrome",
"y":12.8
},
{
"name":"Safari",
"y":8.5
},
{
"name":"Opera",
"y":6.2
},
{
"name":"Others",
"y":0.7
}
],
"dataLabels":{
"enabled":false
},
"showInLegend":false
}
]
}
I have tried the following without success:
this.$refs.chart.chart.redraw()
this.$refs.chart.chart.reflow()
series[i].setData(series)
None of them have any effect and my pies are plotted as if the center and size are the default ones (therefore, overlaping each other).
Any ideas?
I've created a method that does graph redesign.
reloadTypeSeries(){
let pizzaCharts = this.$refs.pizzaCharts;
let updateSeries = JSON.parse(this.updateoptions);
let concatJson = [];
$.each(updateSeries, function(key, value) {
concatJson = concatJson.concat([[updateSeries[key].name, updateSeries[key].y]]);
});
pizzaCharts.chart.series[0].setData(concatJson, true);
}
Hope this helps!
var dataSourceDashboard = new kendo.data.DataSource({
pageSize: 20,
type: "json",
transport: {
read: function (operation) {
if (navigator.onLine) {
$.ajax({
url: '/Home/Dashboard_Read/',
type: "GET",
dataType: "json",
success: function (response) {
try
{
localStorage.setItem("Dashboard_Read", JSON.stringify(response));
}
catch (domException)
{
if (domException.name === 'QuotaExceededError' ||
domException.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
// Fallback code comes here.
$("#progressMsgError").html("Cannot save the data for offline use, please clear the cache, or call administrator!");
$('#myModalError').modal('show');
}
}
operation.success(response);
BindSitesCombo(response);
//// initial sync of data
//var cashedDataBaseJson = [];
//var cashedDataBase = localStorage.getItem("cashedDataBase");
//if (cashedDataBase != null || cashedDataBase != undefined) {
// cashedDataBaseJson = JSON.parse(cashedDataBase);
// if (cashedDataBaseJson.length > 0) {
// syncInitialData(cashedDataBaseJson);
// localStorage.setItem("cashedDataBase", JSON.stringify(cashedDataBaseJson));
// }
//}
//else
//{
// syncInitialData(response);
// localStorage.setItem("cashedDataBase", JSON.stringify(response));
//}
var cashedDataBase = localStorage.getItem("cashedDataBase");
if (cashedDataBase == null || cashedDataBase == undefined) {
localStorage.setItem("cashedDataBase", JSON.stringify(response));
}
else {
var cashedDataBaseJson = [];
var cashedDataBase = localStorage.getItem("cashedDataBase");
if (cashedDataBase != null || cashedDataBase != undefined) {
cashedDataBaseJson = JSON.parse(cashedDataBase);
var i = response.length;
while (i--)
{
var ifsiteisinthelist = contains(cashedDataBaseJson, response[i]);
if (ifsiteisinthelist == false)
{
cashedDataBaseJson.push(response[i]);
}
}
localStorage.setItem("cashedDataBase", JSON.stringify(cashedDataBaseJson));
}
}
rempvesyncedlinks();
},
error: function (response)
{
window.location.href = "/account/login";
}
});
}
else {
var cashedData = localStorage.getItem("Dashboard_Read");
if (cashedData != null || cashedData != undefined) {
//if local data exists load from it
var data = JSON.parse(cashedData);
operation.success(data);
BindSitesCombo(data);
rempvesyncedlinks();
}
}
}
},
schema: {
model: {
id: "SiteID",
}
},
//change: function (e) {
// $.each(dataSourceDashboard.data(), function (index, value) {
// $('#cmbAllSites')
// .append($("<option></option>")
// .attr("value", value.SiteID)
// .text(value.SiteName));
// });
//}
change: function (e) {
rempvesyncedlinks();
},
aggregate: [
{ field: "DailyTotalFormated", aggregate: "sum" },
{ field: "WeeklyTotalFormated", aggregate: "sum" },
{ field: "WeeklySiteTotalFormated", aggregate: "sum" },
{ field: "WeeklyGoal", aggregate: "sum" }
],
});
$(function () {
$("#gridDashboard").kendoGrid({
dataSource: dataSourceDashboard,
filterable: false,
groupable: false,
toolbar: false,
pageable: {
change: function (e) {
rempvesyncedlinks();
}
},
sortable: true,
height: 600,
columns: [
{ field: "SiteName", title: "MY COMPANIES", template: '#=SiteName#',footerTemplate: "Total " },
{ field: "DailyTotalFormated", title: "MY DAILY TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklyTotalFormated", title: "MY WEEKLY TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklySiteTotalFormated", title: "WEEKLY SITE TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklyGoal", title: "WEEKLY SITE GOAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "", title: "SYNC", template: "# if (isSynced == true) { #" +
"<div style='width: 130px;margin: auto;'><img src='/images/ready.png' alt='Up-to-date' /><div style='font-size:15px; font-weight:bolder; float: right;'>Ready</div></div>" +
"# } else { #" +
"<div style='width: 130px;margin: auto;'><img src='/images/pleasesync.png' alt='Up-to-date' /><div style='font-size:15px; font-weight:bolder; float: right;'>Please Sync</div></div>" +
"# } # <a id='syncforoffline#=SiteID#' href='##' onclick='syncDataForSite(#=SiteID#);return false;'>Sync for offline</a>"
},
{ field: "SiteLogo", title: " ", hidden : true },
],
editable: false
});
$("#cmbAllSites").change(function ()
{
var di = dataSourceDashboard.data()[this.selectedIndex - 1];
setSiteID(di.SiteID, di.SiteLogo, di.SiteName);
});
});
Footer sum is not calculated
What is wrong in this code, why does the total show last row by default?
I fixed the issue. I am just adding:
model: {
id: "SiteID",
fields: {
SiteName: { type: "string" },
DailyTotalFormated: { type: "number" },
WeeklyTotalFormated: { type: "number" },
WeeklySiteTotalFormated: { type: "number" },
WeeklyGoal: { type: "number" }
}
}
Pass the following config to PhantomJS:
{
u'subtitle': {
u'text': u'2016-05-19 12:09 to 2016-05-26 12:09'
},
u'title': {
u'text': u'Query'
},
u'series': [
],
u'yAxis': {
u'title': {
u'text': u'Count'
}
},
u'tooltip': {
u'pointFormat': u'<span style="color:{point.color}">{series.name}</span>: <b>{point.y}</b><br/>'
},
'height': 1000,
u'credits': {
u'enabled': False
},
u'plotOptions': {
u'column': {
u'colorByPoint': False
}
},
u'xAxis': {
u'type': u'category'
},
u'type': u'chart',
u'legend': {
u'enabled': True
}
}
but the output PNG is 1200*800? Why? Anything missing?
Thanks
As already wergeld answered in comments - height is property of chart object in the chart's options (see the API for a reference). So you could use it like this:
{
'chart': {
'height': 1000
},
'subtitle': {
'text': '2016-05-19 12:09 to 2016-05-26 12:09'
},
...rest of your settings...
Please see the the plunker - https://plnkr.co/edit/Kl5smDzNPm9edDBa3Fai?p=preview
the button Delete1 works for inline alert with onClick event. I am trying grid.appscope for the rest of the of the buttons with ng-click, with different options but they don't work. Do you know what I am missing?
//code
/* global angular */
(function() {
'use strict';
console.clear()
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'ui.bootstrap', 'ui.grid.autoResize', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.rowEdit']);
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'ui-grid',
template: '<div ui-grid="{ data: model[options.key], columnDefs: to.columnDefs, onRegisterApi: to.onRegisterApi}" ui-grid-auto-resize ui-grid-pagination ui-grid-selection ui-grid-edit ui-grid-row-edit ></div>',
wrapper: ['bootstrapLabel', 'bootstrapHasError']
});
});
app.controller('MainCtrl', function MainCtrl($scope, $rootScope, formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Benjamin Orozco',
url: 'https://github.com/benoror'
};
vm.exampleTitle = 'UI Grid'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.deleteRow2 = function() {
alert(2);
}
$scope.deleteRow3 = function() {
alert(3);
}
$rootScope.deleteRow4 = function() {
alert(4);
}
var columnDefs;
columnDefs = [{
name: 'State',
field: 'name'
}, {
name: 'Abbr',
field: 'abbr'
}, {
name: 'Delete1',
cellTemplate: '<button type="button" onClick="alert(1)">Click Me!</button>'
}, {
name: 'Delete2',
cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow2()">Click Me!</button>'
}, {
name: 'Delete3',
cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow3()">Click Me!</button>'
}, {
name: 'Delete4',
cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow4()">Click Me!</button>'
}
];
vm.model = {
list: [{
"name": "Alabama",
"abbr": "AL"
}, {
"name": "Alaska",
"abbr": "AK"
}, {
"name": "American Samoa",
"abbr": "AS"
}, {
"name": "Arizona",
"abbr": "AZ"
}, {
"name": "Arkansas",
"abbr": "AR"
}, {
"name": "California",
"abbr": "CA"
}, {
"name": "Colorado",
"abbr": "CO"
}, {
"name": "Connecticut",
"abbr": "CT"
}]
};
vm.options = {
formState: {
uiGridCtrl: function($scope) {
$scope.to.onRegisterApi = function(gridApi) {
vm.gridApi = gridApi;
};
}
}
};
vm.fields = [{
key: 'list',
type: 'ui-grid',
templateOptions: {
label: 'Simple UI Grid',
columnDefs: columnDefs,
onRegisterApi: ''
},
controller: 'formState.uiGridCtrl'
}];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
vm.options.updateInitialValue();
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
Thanks
i thinks problem is here :
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'ui-grid',
template: '<div ui-grid="{ data: model[options.key], columnDefs: to.columnDefs, onRegisterApi: to.onRegisterApi}" ui-grid-auto-resize ui-grid-pagination ui-grid-selection ui-grid-edit ui-grid-row-edit ></div>',
wrapper: ['bootstrapLabel', 'bootstrapHasError']
});
});
cuz this sample works fine :
http://ui-grid.info/docs/#/tutorial/305_appScope
http://plnkr.co/edit/0uXsSmruve6QYOJThNPP?p=preview